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

Question

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

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

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

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

这是我的服务工作者的示例.js在我的 dist 文件夹中。

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 中的预期输出是，即使互联网连接不可用，我的应用程序的表单路由"/form"页面仍将由服务工作者加载。

Answer 1

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

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

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

如您所见，注册路由不言自明。在执行此操作之前，只需确保路由已经在联机中正常工作，以避免错误。