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

Question

我已经在我的 Vue 单页应用程序中安装了 PWA，但是当我关闭我的互联网连接时，只有主页可以使用。其他路线好像不行。 Google Chrome 只显示恐龙和 "No Internet"。

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

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

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

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

Answer 1

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

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

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

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

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

Vue Service Worker offline not working in all pages

vue.js

progressive-web-apps

netlify