Before you read on, be sure to check out my first blog post about the Service Worker API. Service workers require a secure connection, and that post will show you how to set your site up with CloudFlare in order to serve your site via https.
##First things First
app.js which is where the initial scripts for your site are housed. That is where this first snippet below will be housed.
Lets break this down and establish what is happening here.
The code above is not the service worker itself, rather it is registering our service worker within a scope. That being said, once a page within the scope is loaded, the service worker will run. This happens individually on each page load so long as it is within scope.
##Cache Rules Everything Around Me
Now we get to the juicy stuff. Now that we have registered a service worker, let’s look at how we can utilize the cache to grab the files you’d like to utilize for offline mode on your site. In our second file, which I’m calling
serviceworker.js place this next snippet.
Since we are within the the registered service worker the scope allows us to utilize
this. The first line of this snippet adds an install event listener. We then chain the
waitUntil method which delays the proceeding code from running until the ES6 promise has been fulfilled. Then, utilizing the
caches.open method, we open a new cache titled offline. This is where our cached files will be stored. This returns a promise for the cache, and once that is fulfilled we utilize the
addAll function which adds the specified files to the cache.
I’ve added myself the homepage of my site, along with the latest post.
Lastly we’re going to need to tell the browser that when it detects that it’s offline, to access the cache that we created with the service worker and utilize the files found there.
We do this by utilizing the fetch event listener which tells the browser to respond with the cache. The first
.catch function detects if the promise rejects, and returns the default server response. We then utilize the
.then method to open our offline cache and put the response onto the page.