Workbox webpack 插件显示离线画面答案

【问题标题】：Workbox webpack plugin display offline screenWorkbox webpack 插件显示离线画面
【发布时间】：2019-01-03 11:29:25
【问题描述】：

我正在使用 workbox-webpack-plugin 来注册 service worker。我的前端应用是使用 webpack 配置的 react-redux 应用。如果您访问应用程序 url，您始终可以看到登录视图。

我在 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 URL 并在登录页面上请求）没有缓存，所以我认为在没有获取此文件时很容易捕获错误。所以我在我的服务人员中添加了以下内容：

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 插件的新手，很高兴看到一些建议。

【问题讨论】：

标签： javascript reactjs webpack plugins workbox

【解决方案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 请求。所以它不会像页面一样显示...

【讨论】：