In his presentation at Breaking Development in Nashville TN, John Allsopp talked about making use of offline technologies to improve experiences on the Web. Here's my notes from his talk Offline First is the new Mobile First.
- We have to stop building apps with a desktop mindset where we have permanent, fast, connectivity.
- Most people think of offline experiences only in the client but servers go down as well. Offline techniques can help lighten the load on servers as well.
- Offline technologies don't just give us sites that work offline, they improve performance, and security by minimizing the need for cookies, http, and file uploads. It also opens up new possibilities for better user experiences.
Web Storage
- Web Storage: give you more sophisticated ways to keep data around in the browser. Session storage is data that only persists for a session. A session lasts in a tab or window, while it is open.
- We can keep sensitive information around during a transaction like checkout.
- Localstorage and Sessionstorage work mostly the same way. They store a set of key value pairs as strings. Use setItem to store data. Once you store that data, it is available until the window or tab is closed.
- To retrieve data use getItem this provides you the name and values you stored before. There's no need to set databases or tables. It's designed to be dead simple to use.
- To save between sessions, you can use localStorage. Because items here persist forever, you might want to delete these items yourself.
- You can message between windows using localStorage as there is an event fired when it is updated.
- This event is only sent if a key value changes, not if we send the same value. Only the other open windows have the event fire.
- LocalStorage can only hold 5MB per domain. If you exceed this, an error will be fired.
- Web Storage functionality is synchronous. All Javascript stops running while the storage function is performed. In most cases, this is not really an issue.
- Web Storage stores all data as strings. Parse things using JSON on the way in and out of local storage.
- Web Storage has a pretty restricted approach to domains. sub-domains, https, etc. are separate.
App Cache
- Browsers cache HTML, CSS, and Javascript files, images, etc. to speed up subsequent loading of pages.
- App Cache allows you to control all of this caching behavior. This lets you make sites & apps that work offline.
- Offline access allows you to create a CDN on people's devices. This creates dramatic improvements in performance.
- App Cache is painful to use but quite useful. It works as described but there's a lot of logic to understand. Once you understand it's quirks, you can use it anywhere.
- Create a manifest file, link to it from HTML documents, then be aware of all the gotchas.
- Your manifest file specifies all the elements you want to cache, the ones you never want to cache, and a set of fallbacks.
- In the CACHE section list all the resources you want to cache forever. You can use relative or absolute URLs. Everyone must be listed individually. You are not restricted to only the domain where the cache is stored.
- In the NETWORK section list all the files that are changing all the time. You can use a partial match to specify a group of resources. The * character turns of caching for all resources unless specified in the App Cache.
- In the fallback section, list the resources to be used for non-cached resources when offline. These entries have two parts: the resources to replace and how to replace them.
- Once a resource is cached, the browser will continue to use the cached assets. You must update the manifest file. To do this easily, add a date/time stamp as a comment on the top. This will create a new cache file. The user must reload the page twice to get the new app cache to load.
- Resources must be explicitly cached. Any images in stylesheets needs to be explicitly specified in the manifest.
- If you are using https domains, you have to cahce resources from the same domain.
- Any document with a manifest file attribute in the HTML element will be cached, even if it is listed in the NETWORK section of the manifest.
- Do not develop with App Cache enabled, use the wrong MIME-type during development.
- And the list of gotchas continues...
- We have other technologies like navigator.online, the File API, offline events, IndexDB, and more like Service Workers are coming soon.
- The tools for building offline experiences on the Web are here & work now. Offline is a reality today -design with it in mind.