Workbox脱机模式仅适用于根路径

Question

我正在研究我的PWA应用程序。所以我有一个问题，我找不到任何信息如何修复。

我使用webpack InjectManifest工作箱（但也试过webpack offline-plugin）。

当我在根目录访问我的网页并离线时，我发现它工作正常。但是，当我将路线更改为“/授权”或基本上任何其他路线并离线时，它不起作用。

是否有任何要求仅在我们处于根路径的情况下才会起作用？除了这个之外，我找不到任何关于它的信息：https://github.com/quasarframework/quasar-cli/issues/131

Answer 1

好的发现了。所以基本上都是路由。

https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_navigation_route https://developers.google.com/web/tools/workbox/modules/workbox-strategies

在我的情况下，我想总是提供SPA的内容，所以我不得不将workbox.routing.registerNavigationRoute('/index.html');添加到我的工作箱配置。

最后它看起来像这样：

1）Webpack插件：

const commonPlugins = [
  new workboxPlugin.InjectManifest({
    swSrc: './src/workbox-sw.js',
    swDest: 'workbox-sw.js',
  }),
];

2）workbox-sw的内容

/* globals workbox, self */

workbox.setConfig({
  debug: true
});

workbox.core.setCacheNameDetails({
  prefix: 'sneak-client',
  suffix: 'v1',
  precache: 'sneak-precache',
  runtime: 'sneak-runtime-cache',
});

workbox.routing.registerNavigationRoute('/index.html');

workbox.precaching.precacheAndRoute(self.__precacheManifest);