Modern web apps can work when the network is unreliable, or even non-existent. No more blank connectivity error pages or dinosaurs running through the desert. A clear separation between UI and content in addition to offline caches and service workers allow you to store the application's data and core assets for future use.
The basic ideas behind network independence are to be able to:
- Revisit a site and get its contents even if no network is available.
- Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.
- Control what is shown to the user in situations where there is no connectivity.
Core guides
- Using service workers
- A simple guide for those new to the Service Worker API.
- Using IndexedDB
- The basics of IndexedDB, explained in detail.
- Using the Web Storage API
- The Web storage API made simple.
- Instant Loading Web Apps with An Application Shell Architecture
- A guide to using the App Shell coding pattern to create apps that load quickly.
Technologies
| Technology | Description | Support summary | Latest spec |
|---|---|---|---|
| Service workers | JavaScript running in a special worker context that is run by the browser under certain circumstances such as fetch or push events. These allow the service worker to intercept responses and customise them in any way you want, for example caching assets for offline use before they are served. | Experimental: Chrome and Firefox (more detail) | Service Workers |
| IndexedDB | A transactional database system that allows complex client-side data storage to be controlled via JavaScript. | Widespread across modern browsers (more detail) | Indexed Database API |
| Web Storage | A simple API for storing name-value pairs on the client-side. | Widespread (more detail) | Web Storage (Second edition) |
Tools
- localForage
- A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default, and falls back to Web SQL/Web Storage if necessary.
- ServiceWorkerWare
- An Express-like microframework for easy Service Worker development.
- oghliner
- Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.
- sw-precache
- A node module to generate service worker code that will precache specific resources.
- upup
- A tiny script that makes sure your site is always there for your users.
See also
- The service worker cookbook
- A series of excellent service worker recipes, showing how to implement an offline app, but also much more.
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills
Last updated by:
chrisdavidmills,