persistent mobile javascript
DESCRIPTION
Storing your code, data, resources persistently on your mobile devices.TRANSCRIPT
Persistent Mobile JSTips & Tricks
Yorick Phoenix / ISSIO Solutions, Incslides: slidesha.re/1zdXBk6
about.me/yorickphoenix | @scribblings | github.com/yphoenix | [email protected]
Achieving Persistence
1. Downloading to a mobile device.
2. Keeping it cached.3. Timely updating.
Mobile Browser Issues
Slow networking speeds.
Mobile Browser Issues
Bad latency problems.
Mobile Browser Issues
Code & data not (always) persistent across browser reloads.
Causes re-downloads from your web server.
Mobile Browser Issues
Cache / Freshness tradeoff.
HTTP/1.1 200 OKDate: Fri, 03 Oct 2014 07:08:21 GMTLast-Modified: Fri, 26 Sep 2014 02:13:19 GMTCache-Control: max-age=43200Expires: Fri, 03 Oct 2014 19:08:21 GMTContent-Encoding: gzipContent-Length: 622Content-Type: application/x-javascript
Easy #1 Solution…
• Use PhoneGap / Cordova. Wrap your code in an app.
• Download once.• Code & data are always
available.
Easy #1 Solution Flaws
• Multiple builds: iOS, Android, etc.
• iOS WebView doesn’t use JIT.• Android WebView !== Chrome.• Different from Desktop version.
Easy #1 More Flaws
• Slow app store updates.• Users don’t always update.• Sometimes never.
new Better(Solution);
{ nativeBrowser: true,
downloadSpeed: “fast”,
deviceCaching: “best”,
updates: “immediate”,
workOffline: true }
Browser Debugging Tools• Learn how to use them.
• Watch Network Traffic.
• Track caching & compression.
• Request and Response headers.
• How to inspect resources & the DOM.
• The console is your friend.
downloadSpeed: “fast”Minimize your files:
!function(a,b){“object”==typeof module&&”object" ==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error( "jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this, function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf, h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m="2.1.1",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r= function(a,b){return throw new a.indexOf(“use
http://gpbmike.github.io/refresh-sf/https://github.com/mishoo/UglifyJS
downloadSpeed: “fast”gzip your downloads:
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html|js|css)$ </ifModule>
http://www.feedthebot.com/pagespeed/enable-compression.html
downloadSpeed: “fast”
Cache your data & code as close to the user as you possibly can….
downloadSpeed: “fast”
Use a good CDN and all thiswill be handled for you…
Use a CDN• Automatic minimization (js, css, html)
• Automatic compression.
• Automatic caching at a data center nearest your user.
• Automatic redundancy of servers.
• Basic level of service is FREE!
deviceCaching: “best”1. Browser cache.2. LocalStorage.3. App Cache (aka: Manifests)
• Cache your code, css, images.
• Updates are automatic’ish.
• Slow last modified checks with mobile latency + once per file.
1. Browser Cache
• Calculate: Code Update Frequency
• Because: Once in the users browser isn’t going to be updated without the user forcing it or expiration.
Browser Cache Tradeoff
Browser Cache Issues• Trade off: cache expiration vs
download frequency.• Need frequent updates: make it
small.• Result: more frequent downloads or
last modified checks.• Rule: You will always download
more often than you really need to.
Browser Cache Updates
• Unpredictable behavior.
• Browser makes the decisions.
• Don’t play the rename the file to update game.
window.location.reload()
window.location.reload();
window.location.href = window.location.pathname+ window.location.search;
Don’t use reload to refresh
last modified check for every reference
Unless you want to force a reload :-)
Instead set the href to yourself
Can store codelocalStorage.myCode = \ ‘function HelloWorld() \ { \ alert(“Hello, World”); \ }’;
Can store datalocalStorage.myData = \ ‘{Days: [“Sun”, “Mon”, “Tue”, “Wed”, \ “Thu”, “Fri”, “Sat”], \ Months: [31, 28, 31, 30, 31, 30, \ 31, 31, 30, 31, 30, 31]}’;
2. localStorage
• Store any arbitrary string.
• On a domain by domain basis.
• Updates under your own control.
localStorage
• Persistent between browser launches:
• JSON• CSS• JavaScript
• 5MB Limit: who writes 5M of minimized code or data?
localStorage
updates: localStorage
• You store and update only when you want to.
• Best for code/css and static data, not for images.
$('script[src]').map( function(idx, val) { var url, name;
url = $(val).attr('src'); name = url.replace(/[^a-zA-Z]/g,'-'); while (name[0] === ‘-') { name = name.slice(1); }
$.get(url, function (code) { localStorage[name] = code; }); });
Store JS in localStorage
• Store any resource:
• JavaScript
• CSS
• Images
• HTML
• Any file you like…
3. AppCache (Manifest)
• Single “last modified” check updates lots of files.
• Automatic fallback to the network.
• Can work totally offline.
AppCache
AppCache<html manifest="cache.manifest">
CACHE MANIFEST NETWORK: * CACHE: /favicon.ico /index.html /js/lib/jquery.min.js /js/lib/mylibs.js /css/mainStyles.css //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ...
You store any file you want…
AppCache Update Control• You - sort of - control this one.
• Can have different behaviors on different pages.
• You store and update only when you want to.
% touch cache.manifest
• Also programatic control & events.
AppCache References
• www.html5rocks.com/en/tutorials/appcache/beginner/
• alistapart.com/article/application-cache-is-a-douchebag
• www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#appcache
AppCache References
AppCache References
See Jeff Burtofts HTML 5 Session:
Behold the power of the“Web App Manifest”
Room E-133 @ 2:30pm on 10/20/14
HTML5 Session
Putting it all together
• CDN for quick access.
• localStorage for static data / code /css.
• sessionStorage for run-time data (instead of server sessions).
• app cache for every type of file.
workOffline: “true”• With localStorage, sessionStorage & app
cache (manifests).
• This is a reality.
• Plus: whenever there is a network connection you can get new content, resources and code.
• eg: Google Homepage(~250KB of App cache)
updates: “immediate”
• You should be in control your updates.
• Browser cache - hit and miss.
• LocalStorage - under your control.
• App Cache - mixed bag.
Q &Aslides: slidesha.re/1zdXBk6
about.me/yorickphoenix | @scribblings | github.com/yphoenix | [email protected]
Yorick Phoenix / ISSIO Solutions, Inc
Thank You