Make ExtremeSetup a PWA part 4


Published 1 year ago

In this article, we are going to talk about improvements we can do to our PWA by updating the service worker, but before this let's see what changes we've made to ExtremeSetup. 

So the idea is that the term Progressive Web App is really related to the application type of service and we have to differentiate websites from web applications. In our opinion, a website is a piece of software that is meant to provide some descriptive information about a product, a service or a company to the visitors. The same idea applies to landing pages. On the other hand, a web application is similar to a desktop application where users, not visitors can interact with it. Now the idea is that you can make a progressive web app a part of your website by splitting it into two parts. This is what we decided to do. In the previous part, we build a PWA from our homepage https://extremesetup.com. Now our homepage is more of a landing page than an app. That is why we decided to split apart our blog and make it a PWA. Because our users having an icon of our application on their home screen, need to have some dynamic updates about our activity. So when they will tap on the icon they are going to see our latest blog posts with the newest insights on the technology related to PWA. So now you can visit our blog page https://extremesetup.com/blog and test our new PWA which now makes more sense. And it is now separate from our main website.

Do achieve this we did next steps:

Build the blog page

Update manifest file: "start_url": "/blog" and renamed the name into "name" : "ExtremeSetup Blog"

Update service worker: sw.js

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

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;
                }

                // IMPORTANT: Clone the request. A request is a stream and
                // can only be consumed once. Since we are consuming this
                // once by cache and once by the browser for fetch, we need
                // to clone the response.
                var fetchRequest = event.request.clone();

                return fetch(fetchRequest).then(
                    function(response) {
                        // Check if we received a valid response
                        if(!response || response.status !== 200 || response.type !== 'basic') {
                            return response;
                        }

                        // IMPORTANT: Clone the response. A response is a stream
                        // and because we want the browser to consume the response
                        // as well as the cache consuming the response, we need
                        // to clone it so we have two streams.
                        var responseToCache = response.clone();

                        caches.open(CACHE_NAME)
                            .then(function(cache) {
                                cache.put(event.request, responseToCache);
                            });

                        return response;
                    }
                );
            })
    );
});

Here we changed the URL in the urlsToCache array to be /blog because now this is the scope of our application. Also, we removed some unnecessary js files from this array because it is not needed for the blog. 

Also, we've made some improvements to fetch event listener and now it will always cache the latest version of the app for offline use. The previous version was caching it once and after fetching it once making impossible to update the content.

Another important moment is the PWA Install Banner. If the PWA is implemented correctly the browser will automatically show the app install banner. But this happens after the visitor of your web app show interest, whether it is a returning visitor or the visitor navigate through your website by clicking on other links. You can see how the browser proposed me to install the app on the home screen bellow.

ExtremeSetup app banner 

Again the browser decides automatically when to show it, so if you test your PWA be patient and it will show up. The rest of the process remains the same, check previous part for screenshots.

So the conclusion of this part is that you can make a PWA from your existent application or create a new one or make a part of your website a PWA or create a separate app inside your website and make it a PWA while having it as a part of your website where users can visit it also through any browser. The possibilities are limitless and this is the beauty of the web platform.