Progressive Web App - Page does not work offline error

Question

Regardless of what I do, working to eliminate all external resources, I cannot shake the error of "Page does not work offline".

This is for a PWA that uses firebase realtime database to fetch data, and the service worker activated once data in the database is changed. I have the app working, so connection to Firebase is not my issue, rather it is that I cannot install the app to unlock its functionality. I have even taken the firebase file from the server and downloaded it to eliminate that external resource.

When the main page loads:

function onLoad() {
      Notification.requestPermission();
      navigator.serviceWorker.register('sw.js');
      console.log("Registered!")
        }

Service Worker:

importScripts('firebase.js');
// Initialize Firebase
    var config = {Some data here};
firebase.initializeApp(config);
var database = firebase.database().ref('notification/');
database.on("child_changed", function(snapshot) {
    console.log("Activated!")
    var notificationInfo = snapshot.val();
    self.registration.showNotification(notificationInfo);
});

I expect the app to be able to install by going into the menu and clicking on "Install App". I get the error in the Chrome Developers Console of "Page does not work offline" instead.

Answer 1

Simply adding your scripts to the service worker will not make it work offline. Service workers are a different kind of script called a web worker. They do not have the same level of access to the actual web page that a script that you use with a <script> tag would. Service workers are mainly used to listen for requests that the web app makes and alters the logic involved in serving assets. To pass the Chrome "works offline" audit, you need to write a service worker that intercepts network requests and returns an HTML file even when the request fails.

You should do some additional research on what a service worker can do: https://developers.google.com/web/ilt/pwa/introduction-to-service-worker