vue.jsservice-workeroffline-caching

How does vue PWA use the precache? I still get "Page does not work offline"


I have a vue application that I updated to have PWA capability. It uses the firebase messaging service that has overridden the service worker with its own firebase-messaging-sw.js file. The service worker is registered, active and working, I have added the pwa in the vue.config.js file so that it generates the manifest.json. When you build the production version of the app the following code gets added to the top of the service worker.

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

From what I see the percache works fine.

Should this be enough to get the site to work in offline mode?

Do I need to add some cache management myself?

What am I missing because I still get the "Page does not work offline" error message in Chrome's dev tools under the App manifest tab.


Solution

  • You need to add this line in the serviceworker. It fools the browser into thinking that the page will work offline:

    self.addEventListener('fetch', function(event) {}) // add this to fool it into thinking its offline ready