Vue Service Worker 离线无法在所有页面中工作

Question

我已经在我的 Vue 单页应用程序中安装了 PWA，但是当我关闭我的互联网连接时，只有主页可以工作。其他路线似乎不起作用。谷歌浏览器只显示恐龙和“没有互联网”。

我已经尝试在 Netlify 中调整部署设置，但这似乎不是我猜测的问题。

我已经在我的 dist 文件夹中添加了 _redirects 文件

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

这是我的 dist 文件夹中的 service-worker.js 示例。

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

我在 Netlify 中的预期输出是，即使互联网连接不可用，我的应用程序的表单路由“/表单”页面仍将由服务人员加载。

Answer 1

我已经找到了解决这个问题的方法。一个错误是，默认情况下，作为单页应用程序，PWA/Workbox 只会缓存主页“/index.html”。除非您明确指定，否则它不包括任何其他页面。

现在，通过在 ./src/service-worker.js 中添加以下代码，我使我的路由器视图可离线使用：

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

如您所见， registerRoute 不言自明。在执行此操作之前，请确保路线​​已经在线正常运行以避免错误。