Offline first web applications
Now a days Offline First is the new revolution going on the web. First I heard about UpUp a library which helps you make your website offline available. I got curious how. Here what I found.
Offline First
Its the community which got together to support Offline First. According to them they want to make the Offline First the same thing as Mobile First. Some things defined on their website which may help you understand this movement:
- We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error - mobile network is not stable.
- A brief intro about offline first : Say hello to offline first
- This complete thing is very well defined in an article by A List Apart. Do read the Taking stock section.
UpUp
A tiny script that makes sure your site is always there for your users. An offline first library that hides the complexity of using Service Workers and the new Caching API, and lets developers easily create sites that are accessible both online and offline. Sample code you have to insert:
<script src="/upup.min.js"></script>
<script>
UpUp.start({
'content-url': 'offline.html' // show this page to offline users
});
</script>
How it works
As defined in their tutorial:
UpUp uses ServiceWorkers to determine when network requests fail. A ServiceWorker is a special script that runs in the browser in the background, and can see the status of network requests.
When the user first visits your site, UpUp registers a ServiceWorker with your browser, and gives it a list of files to cache for later.
The next time the user visits your site, the ServiceWorker listens for network errors. If a network request fails, and the ServiceWorker finds that file in the cache, it will return that file, as if it came from the network.
Online like version
The next best thing we can do is to keep the data also cached based on the user and keep updating this cache based on Caching Headers