Question

我正在使用workbox-webpack-plugin注册服务工作者。我的前端应用程序是配置了webpack的react-redux应用程序。如果您访问应用程序网址，则始终可以看到登录视图。

我的webpack.config.js插件：

new InjectManifest({
  swSrc: path.join('src', 'service-worker.js')
})

服务人员：

workbox.skipWaiting();
workbox.clientsClaim();

workbox.precaching.precacheAndRoute(self.__precacheManifest);

我的服务人员缓存了我所有分割的路由。但这没关系-即使所有内容都已缓存，当没有连接的用户访问我的应用程序时，他也无法登录。这就是为什么我需要一种方法来检查用户是否处于脱机模式，而不是返回登录名，而是返回“ offline.html”页面。

我发现我的env.config.js文件（包含API URLS，并在登录页面上请求）未缓存，因此我认为在不获取此文件的情况下很容易捕获错误。因此，我在服务工作者中添加了以下内容：

workbox.routing.registerRoute(
  new RegExp('/env.config.js'),
  ({event}) => {
    return networkFirstHandler.handle({event})
      .catch(() => caches.match('/offline.html'));
  }
);

但它不会在浏览器中返回offline.html。似乎返回了“ offline.html”文件而不是“ env.config.js”文件。

如何做到这一点？我是Workbox插件的新手，很高兴看到一些建议。

Answer 1

importScripts("/precache-manifest.81b400bbc7dc89de30f4854961b64d1d.js", "https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js");

workbox.skipWaiting();
workbox.clientsClaim();

const STATIC_FILES = [
  '/env.config.js',
];


self.__precacheManifest = STATIC_FILES.concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest);

更新-由于我决定缓存env.config.js文件，因此在离线使用应用程序时我只会遇到API错误。也许此API调用（由于没有连接而返回错误）是触发显示脱机页面的好触发器吗？我认为是，但是我仍然不知道。

当我尝试这样的事情时：

workbox.routing.registerRoute(
  new RegExp(API_REGEX_GOES_HERE),
  ({event}) => {
    return networkFirstHandler.handle({event})
      .catch(() => caches.match('/offline.html'));
  }
);

将返回“ offline.html”页面，而不是API请求。因此它不会像页面一样显示...

Workbox Webpack插件显示脱机屏幕

1 个答案: