Persistent Mobile JSTips & Tricks

Yorick Phoenix / ISSIO Solutions, Incslides: slidesha.re/1zdXBk6

about.me/yorickphoenix | @scribblings | github.com/yphoenix | yorick@issio.net

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 | yorick@issio.net

Yorick Phoenix / ISSIO Solutions, Inc

Thank You