Progressive Web App - 页面无法离线工作错误

Question

无论我做什么，努力消除所有外部资源，我都无法摆脱“页面无法离线工作”的错误。

这适用于使用 firebase 实时数据库获取数据的 PWA，并且一旦数据库中的数据发生更改，就会激活 service worker。我的应用程序正在运行，因此与 Firebase 的连接不是我的问题，而是我无法安装该应用程序来解锁其功能。我什至从服务器获取了 firebase 文件并下载它以消除该外部资源。

主页加载时：

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

服务工作者：

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

我希望能够通过进入菜单并单击“安装应用程序”来安装该应用程序。我在 Chrome 开发者控制台中收到“页面无法脱机工作”的错误。

Answer 1

仅将脚本添加到 service worker 不会使其脱机工作。 Service Worker 是一种不同的脚本，称为 Web Worker。它们对实际网页的访问级别与您使用带有<script> 标记的脚本的访问级别不同。 Service Worker 主要用于侦听 Web 应用程序发出的请求并更改服务资产所涉及的逻辑。要通过 Chrome“脱机工作”审核，您需要编写一个 service worker 来拦截网络请求并在请求失败时返回一个 HTML 文件。

您应该对 Service Worker 可以做什么做一些额外的研究：https://developers.google.com/web/ilt/pwa/introduction-to-service-worker