4 Simple steps to get your website working offline using Service Workers
Google’s new service workers are replacing the HTML 5 App cache for website offline usage. Service workers are based on JavaScript workers API and are most powerful in modern browsers.
With HTML 5, introduction to App cache was one of the most useful feature added to the browser for offline usage by simply adding a manifest file and manifest meta tag to index file which caches the desired files.
Example for App cache:
Index file:
<html manifest="example.manifest">
...
</html>Manifest file will look something like this:
CACHE MANIFEST
# VERSION 1
# SOME META INFO
https:www.example.com/index.html
https:www.example.com/images/image1
https:www.example.com/contact.htmlApp cache API was great until there were static files to be loaded and provide no interaction. Service workers come with more advanced features like routing, fetching, loading data on users requests, push notifications and background syncs.
Service workers are based on JavaScript workers API, they are non-blocking and run parallel to the normal executable context. They can communicate with a web page and manipulate DOM via the postMessage interface. These can allow you to control how network requests are handled which makes them so powerful.
Prerequisites:
Secure connection — you need HTTPS over HTTP to avoid data fabrication and hijack connections. Initial development can be done using localhost but need HTTPS protocol on end website to implement.
Let’s get started — these are very simple to learn and easy to use them in your own websites
- Register a Service Worker
- Install a Service Worker
- Request Data
- Update a Service Worker
Register a Service Worker
This includes checking if the host browser supports service workers and load the sw.js file to register it
Add below lines in index.html or base file and add a JavaScript file in root path with the registered name(in this example — sw.js)
When you run this code you should see a message in the browser console — ‘Service worker registered’
Note: Make sure you add the sw.js file in the root path of the project directory since it’s scoped where defined and have control over the same.
Install a Service Worker
In SW.js file that we created, add files that need to be cached using Cache API. For this, we will add an event listener to open caches and add files to a given cache name
If any of the files fail to download and cache, SW will fail and won’t be installed but it keeps trying until it gets the desired data
Request Data
Now that we have installed service worker and added files to cache, we will retrieve files from the cache by adding these lines below to the same SW.js file
While retrieving data, it tries to load data from memory that’s already cached by matching the event request. If it didn’t find the matching request, it will make a network call to fetch data. Once the response is fetched, it serves the response back to the request and clones the response for caching to serve next time when a request has made.
Update a Service Worker
Any byte size change will make an existing worker update with the latest changes considering it as new. The old worker is still active and is not terminated until existing pages are closed.
Once the existing pages are closed, the newly updated worker will take control over the old one and fires an ‘activate’ event. At this moment, the old workers are going to stay on memory unless we delete them explicitly. So, we need to delete them on activate event call back.
Success ✔️ now your website can work offline!
These can be greatly used to improve the performance of an app with network bypassing for navigation and better user interactions.
Demo link
Additional reads
Browser Support
Thanks for reading !! 👍
