如何使用 Webpack 5 加载服务工作者？

Question

我正在使用 Webpack 5，我希望有一个 Service Worker，它可以拦截获取请求并在本地返回响应，而不会影响网络。我还希望能够在 Service Worker 中导入 npm 模块。为此，我曾经使用一个名为 serviceworker-webpack-plugin 的库，但它不再被维护（并且在我使用它时会引发错误）。 Webpack 文档推荐使用 Workbox，但据我所知，这似乎只是为了在 Service Worker 中缓存资产。 谁能告诉我 2020 年使用 Webpack 5 创建 Service Worker 的正确方法是什么？

Answer 1

将 service worker 添加到您的 webpack.config.js 条目字段

entry: {
    'app': "./src/index.js",
    'service-worker': "./src/service-worker.ts",
},
output: {
    filename: "[name].js",
},

这将发出dist/app.js 和dist/service-worker.js，并且可以在两者中导入内容。

serviceworker-webpack-plugin 还为 serviceworker 提供了一种查看它应该缓存的所有捆绑文件列表的方法，但该功能不能直接使用，需要制作 webpack 插件才能获取。

Answer 2

不要过于复杂。

您只需 2 个步骤即可使 sw 工作。创建一个软件并注册它。

创建一个类似sw.js 的 .js 文件并在其中写入：

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.open('mysite-dynamic').then(function (cache) {
      return cache.match(event.request).then(function (response) {
        var fetchPromise = fetch(event.request).then(function (networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return response || fetchPromise;
      });
    }),
  );
});

这就是stale-while-revalidate 方法

现在注册吧。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}