Make ExtremeSetup a PWA part 3


Published 1 year ago

This part of the series is a little bit more advanced topic but we are going to cover the basics. As seen in the previous part of the series we've achieved 73 points in the Lighthouse, a tool from Google to measure PWA progress. Now to move forward we need to register a service worker to allow our application to work offline. So what are service workers and what they do?

A service worker is a script that your browser runs in the background, separate from a web page, providing features like push notifications and background sync. Service workers provide a lot of useful and complex functionalities and a lot are still in development, but we can take advantage of it already today. Service workers are a key component of a PWA but check the support of the major browser of this technology here. We are going to register a service worker for ExtremeSetup in order to provide offline access to our app.

With all this being said let's get to code. First of all, we are going to write a script which will register our service worker.


 <script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
            navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
                // Registration was successful
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }, function(err) {
                // registration failed :(
                console.log('ServiceWorker registration failed: ', err);
            });
        });
    }
</script>

In the example above we are checking if the browser supports service workers and if so we register service-worker.js when the page loads. Here we used a javascript promise to check if registration was successful. Our service worker itself looks like this:

 // cache files under the my-site-cache-v1 namespace
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
    '/',
    '/css/bulma.min.css',
    '/assets/css/styles.css',
    '/js/jquery.min.js',
    '/assets/js/typed.min.js'
];

self.addEventListener('install', function (event) {
    // Perform install steps — cache given URLs
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function (cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

// define proxy to return cached files when app requests them
self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                    // Cache hit - return response
                    if (response) {
                        return response;
                    }

                    return fetch(event.request);
                }
            )
    );
});

The service worker is basically caching all the files for later use in case of offline access of the ExtremeSetup PWA. Here is the demonstration of how it works on real devices.

ExtremeSetup Offline Demo

As you can see it works without internet connection. Now let's test it with Lighthouse.

ExtremeSetup with 100 score on Lighthouse

And here we have it. 100 score for the PWA. Even if we achieved 100 we still have a lot to do to achieve a true PWA for ExtremeSetup but for now, we are going to stop here. We still have to take care about add to home screen prompt, push notifications, leverage IndexedDb, and other new web goodies. Stay in touch to be on the edge of the modern web technologies.