The document discusses techniques for achieving persistence of mobile JavaScript applications. It addresses issues with slow speeds and unreliable connectivity on mobile browsers. It recommends using local storage, app caching, and content delivery networks to cache code and data locally, control updates, and improve download speeds. The document provides details on how to implement local storage, app caching, and other strategies to optimize the performance and user experience of mobile JavaScript applications when offline or on slow connections.

1. Persistent Mobile JS
Tips & Tricks
Yorick Phoenix / ISSIO Solutions, Inc
slides: slidesha.re/1zdXBk6
about.me/yorickphoenix | @scribblings | github.com/yphoenix | yorick@issio.net

2. Achieving Persistence
1. Downloading to a
mobile device.
2. Keeping it cached.
3. Timely updating.

3. Mobile Browser Issues
Slow networking speeds.

4. Mobile Browser Issues
Bad latency problems.

5. Mobile Browser Issues
Code & data not (always) persistent across
browser reloads.
Causes re-downloads from your web server.

6. Mobile Browser Issues
HTTP/1.1 200 OK
Date: Fri, 03 Oct 2014 07:08:21 GMT
Last-Modified: Fri, 26 Sep 2014 02:13:19 GMT
Cache-Control: max-age=43200
Expires: Fri, 03 Oct 2014 19:08:21 GMT
Content-Encoding: gzip
Content-Length: 622
Content-Type: application/x-javascript
Cache / Freshness tradeoff.

7. Easy #1 Solution…
•Use PhoneGap / Cordova.
Wrap your code in an app.
•Download once.
•Code & data are always
available.

8. Easy #1 Solution Flaws
•Multiple builds: iOS, Android,
etc.
•iOS WebView doesn’t use JIT.
•Android WebView !== Chrome.
•Different from Desktop version.

9. Easy #1 More Flaws
•Slow app store updates.
•Users don’t always update.
•Sometimes never.

10. new Better(Solution);
{ nativeBrowser: true,
downloadSpeed: “fast”,
deviceCaching: “best”,
updates: “immediate”,
workOffline: true }

11. 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.

12. 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=/
^[suFEFFxA0]+|[suFEFFxA0]+$/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

13. 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

14. downloadSpeed: “fast”
Cache your data & code as close
to the user as you possibly can….

15. downloadSpeed: “fast”
Use a good CDN and all this
will be handled for you…

16. 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!

17. deviceCaching: “best”
1. Browser cache.
2. LocalStorage.
3. App Cache
(aka: Manifests)

18. 1. Browser Cache
• Cache your code, css, images.
• Updates are automatic’ish.
• Slow last modified checks with
mobile latency + once per file.

19. Browser Cache Tradeoff
• Calculate: Code Update Frequency
• Because: Once in the users
browser isn’t going to be updated
without the user forcing it or
expiration.

20. 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.

21. Browser Cache Updates
• Unpredictable behavior.
• Browser makes the decisions.
• Don’t play the rename the file to
update game.

22. window.location.reload()
Don’t use reload to refresh
window.location.reload();
last modified check for every reference
Instead set the href to yourself
window.location.href =
window.location.pathname+
window.location.search;
Unless you want to force a reload :-)

23. 2. localStorage
Can store code
localStorage.myCode =
‘function HelloWorld()
{
alert(“Hello, World”);
}’;
Can store data
localStorage.myData =
‘{Days: [“Sun”, “Mon”, “Tue”, “Wed”,
“Thu”, “Fri”, “Sat”],
Months: [31, 28, 31, 30, 31, 30,
31, 31, 30, 31, 30, 31]}’;

24. localStorage
• Store any arbitrary string.
• On a domain by domain basis.
• Updates under your own control.

25. localStorage
• Persistent between browser launches:
• JSON
• CSS
• JavaScript
• 5MB Limit: who writes 5M of
minimized code or data?

26. updates: localStorage
• You store and update only when
you want to.
• Best for code/css and static data,
not for images.

27. Store JS in localStorage
$('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;
});
});

28. 3. AppCache (Manifest)
• Store any resource:
• JavaScript
• CSS
• Images
• HTML
• Any file you like…

29. AppCache
• Single “last modified” check
updates lots of files.
• Automatic fallback to the network.
• Can work totally offline.

30. 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…

31. 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.

32. 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

33. AppCache HTML5 Session
References
See Jeff Burtofts HTML 5 Session:
Behold the power of the
“Web App Manifest”
Room E-133 @ 2:30pm on 10/20/14

34. 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.

35. 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)

36. updates: “immediate”
• You should be in control your updates.
• Browser cache - hit and miss.
• LocalStorage - under your control.
• App Cache - mixed bag.

37. Thank You
Q &A
Yorick Phoenix / ISSIO Solutions, Inc
slides: slidesha.re/1zdXBk6
about.me/yorickphoenix | @scribblings | github.com/yphoenix | yorick@issio.net