My Slides for my Talk about being Always On is a lie and how developers could add improvements to their web site to deliver a great experience even when the network is flaky!
10. „HTML5 provides an application caching mechanism
that lets web-based applications run offline.
Developers can use the Application Cache (AppCache)
interface to specify resources that the browser should
cache and make available to offline users.“
-MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
15. • FILES ALWAYS COME FROM THE APPLICATIONCACHE, EVEN IF YOU’RE
ONLINE
• THE APPLICATIONCACHE ONLY UPDATES IF THE CONTENT OF THE
MANIFEST ITSELF HAS CHANGED
• THE APPLICATIONCACHE IS AN ADDITIONAL CACHE, NOT AT ALTERNATIVE
ONE
• NEVER EVER EVER FAR-FUTURE CACHE THE MANIFEST
• NON-CACHED RESOURCES WILL NOT LOAD ON A CACHED PAGE
• WE DON’T KNOW HOW WE GOT TO THE FALLBACK PAGE
• …
30. „localForage is a JavaScript library that improves the
offline experience of your web app by using an
asynchronous data store with a simple, localStorage-
like API. It allows developers to store many types of
data instead of just strings.“
–https://localforage.github.io
31. „localForage includes a localStorage-backed fallback
store for browsers with no IndexedDB or WebSQL
support. Asynchronous storage is available in the
current versions of all major browsers: Chrome,
Firefox, IE, and Safari (including Safari Mobile).“
–https://localforage.github.io
32. „localForage offers a callback API as well as support
for the ES6 Promises API, so you can use
whichever you prefer.“
–https://localforage.github.io
35. — https://github.com/w3c/ServiceWorker
„Service workers are a new browser feature that
provide event-driven scripts that run independently of
web pages. Unlike other workers, service workers
can be shut down at the end of events, note the lack
of retained references from documents, and they
have access to domain-wide events such as
network fetches.“
36. — https://github.com/w3c/ServiceWorker
„Service workers also have scriptable caches. Along
with the ability to respond to network requests from
certain web pages via script, this provides a way for
applications to “go offline”.“
63. –Slightly modified by me…
„An ideal web page is a web page that has the best
aspects of both the web and native apps. It should
be fast and quick to interact with, fit the device’s
viewport and remain usable offline and be able to
have an icon on the home screen.“
64. Cache Data from APIs
• localStorage
• sessionStorage
• IndexedDB
65. Are you online?
var online = navigator.onLine;
if (!online) {
// Fallback -> Get Data from Storage!
}
else {
// Use network....
}
73. Considerations
• Don't abuse offline caches.
• How to deal with sensitive information?
• Are my assets permanently stored?
• Think about your use case!
74. Always on
is a lie.
Carsten Sandtner
@casarock
sandtner@mediaman.de
https://github.com/casarock
¯_(ツ)_/¯