Vue PWA caching routes in advance

Question

I'm hoping someone can tell me if I'm barking up the wrong tree. I have built a basic web app using Vue CLI and included the PWA support. Everything seems to work fine, I get the install prompt etc.

What I want to do, is cache various pages (routes) that user hasn't visited before, but so that they can when offline.

The reason here is that I'm planning to build an app for an airline and part of that app will act as an in flight magazine, allowing users to read various articles, however the aircrafts do not have wifi so the users need to download the app in the boarding area and my goal is to then pre cache say the top 10 articles so they can read them during the flight.

Is this possible? and is PWA caching the right way to go about it? Has anyone does this sort of thing before?

Answer 1

To "convert" your website to an PWA, you just need few steps. You need to know that the service worker is not running on the main thread and you cant access for example the DOM inside him.

1. First create an serviceworker.

For example, go to your root directory of your project and add a javascript file called serviceworker.js this will be your service worker.

2. Register the service worker.

To register the service worker, you will need to check if its even possible in this browser, and then register him:

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

In vue.js you can put this inside mounted() or created() hook.

If you would run this code it will say that the service worker is successfully registered even if we havent wrote any code inside serviceworker.js

3. The fetch handler

Inside of serviceworker.js its good to create a variable for example CACHE_NAME. This will be the name of your cache where the cached content will be saved at.

var CACHE_NAME = "mycache_v1";
 self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open(CACHE_NAME).then(function(cache) {
      return cache.match(event.request).then(function (response) {
        return response || fetch(event.request).then(function(response) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

Everytime you make a network request your request runs through the service worker fetch handler here first. You need to response with event.respondWith()

Next step is you first open your cache called mycache_v1 and take a look inside if there is a match with your request.

Remember: cache.match() wont get rejected if there is no match, it just returns undefined because of that there is a || operator at the return statement.

If there is a match available return the match out of the cache, if not then fetch() the event request.

In the fetch() you save the response inside the cache AND return the response to the user.

This is called cache-first approach because you first take a look inside the cache and in case there is no match you make a fallback to the network.

Actually you could go a step further by adding a catch() at your fetch like this:

        return response || fetch(event.request).then(function(response) {
          cache.put(event.request, response.clone());
          return response;
        })
        .catch(err => {
           return fetch("/offline.html")
        });

In case there is nothing inside the cache AND you also have no network error you could response with a offline page.

You ask yourself maybe: "Ok, no cache available and no internet, how is the user supposed to see the offline page, it requires internet connection too to see it right?"

In case of that you can pre-cache some pages.

First you create a array with routes that you want to cache:

var PRE_CACHE = ["/offline.html"];

In our case its just the offline.html page. You are able to add css and js files aswell.

Now you need the install handler:

self.addEventListener('install', function(event) {
    event.waitUntil(
      caches.open(CACHE_NAME)
        .then(function(cache) {
          return cache.addAll(PRE_CACHE);
        })
    );
});

The install is just called 1x whenever a service worker gets registered.

This just means: Open your cache, add the routes inside the cache. Now if you register you SW your offline.html is pre-cached.

I suggest to read the "Web fundamentals" from the google guys: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook

There are other strategies like: network-first

To be honest i dont know exactly how the routing works with SPAs because SPA is just 1 index.html file that is shipped to the client and the routing is handled by javascript you will need to check it out witch is the best strategie for your app.