Vue Service Worker offline not working in all pages

user_3740930 0
Viewed 1637

I have installed PWA in my Vue single page app but when I turn off my internet connection only the home page works. Other routes don't seem to work. Google Chrome just shows dinosaur and "No Internet".

I have tried adjusting the deployment settings in Netlify but it doesn't seem to be the issue I guessed.

I have already added the _redirects file in my dist folder

# Netlify settings for single-page application
/* /index.html 200

Here is a sample of my service-worker.js on my dist folder.

importScripts("/precache-manifest.randomstrings123.js", "https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

workbox.core.setCacheNameDetails({ prefix: "app-name" });

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

const bgSyncPlugin = new workbox.backgroundSync.Plugin('queueExample', {
    maxRetentionTime: 48 * 60 // Retry for max of 24 Hours
});
workbox.routing.registerRoute(
    'https:/api.herokuapp.com/api/v1/add/item',
    workbox.strategies.networkOnly({
        plugins: [bgSyncPlugin]
    }),
    'POST'
);

My expected output in Netlify was that even internet connection is unavailable the form route '/form' page of my app would still be loaded by the service worker.

progressive-web-apps netlify vue.js
1 Answers

I have found a solution to this problem. One mistake is that as a single page app by default the PWA/Workbox will only cache the home page '/index.html'. It does not include any other pages unless you explicitly specify it.

Now, by adding the code below in ./src/service-worker.js I made my router-view available for offline:

workbox.routing.registerRoute(
 '/form',
 'GET'
);

as you can see registerRoute just speaks for itself. Just make sure that the routes is already working properly in online before you do this to avoid errors.

user_37409300
Related