Javascript 如何使用Webpack 5加载服务人员？

我使用的是Webpack 5，我希望有一个服务人员能够拦截获取请求并在本地返回响应，而不会影响网络。我还希望能够在服务人员中导入npm模块。我曾经使用一个名为serviceworker webpack plugin的库来实现这个目的，但是它不再被维护（当我使用它时会抛出错误）。Webpack文档建议使用Workbox，但据我所知，这似乎只是为了在Service Worker中缓存资产。

---

有人能告诉我2020年使用Webpack 5创建服务人员的正确方法是什么吗？

不要过于复杂化

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

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);
    });
  });
}

创建一个.js文件，如

sw.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;
      });
    }),
  );
});

这就是方法

现在注册它

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);
    });
  });
}

---

将服务工作者添加到webpack.config.js条目字段

条目：{
“app'：”/src/index.js“，
“服务工作者”：“/src/service worker.ts”，
},
输出：{
文件名：“[name].js”，
},

这将发出

dist/app.js

和

dist/service worker.js

，并且可以同时导入这两种格式的内容

---

serviceworker网页包插件

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

这是否允许我导入其他模块？@RichardHunter应使用

importScripts（）完成

这不起作用，因为服务人员必须在build文件夹中，如果Webpack不知道，则不会将其放在那里。