Webpack-服务 worker

Question

我对 PWA 的开发有疑问。 我使用 webpack 并且看到了几个框架来生成服务 worker 。 但我希望能够自己创建它，以便了解它是如何工作的。 但是我无法在我的 src 文件和 webpack 中创建的服务 worker 之间建立链接。 有人知道该怎么做吗？ 谢谢

Answer 1

凯伦说得对! It is the proper plugin解决你的问题。

我只是想在这里添加一点描述。

您需要完成 3 个步骤才能正确注册您的 sw.js(service worker)，如所述 here .

1. 将插件添加到您的 webpack 配置中，执行 npm i -D serviceworker-webpack-plugin。并将此代码添加到您的 webpack.config.js

   import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';
   
   ...
   
   plugins: [
       new ServiceWorkerWebpackPlugin({
         entry: path.join(__dirname, 'src/sw.js'),
       }),
   ],
   

2. 在您的 JS 主线程中注册服务 worker 。 只需在脚本开头的某处添加此代码块。

   import runtime from 'serviceworker-webpack-plugin/lib/runtime';
   
   if ('serviceWorker' in navigator) {
     const registration = runtime.register();
   }
   

3. 编写您自己的 sw.js。 在src floder 中创建文件sw.js，然后粘贴code from plugin example .文件名和密码可使用插件选项进行配置。 重要:在 sw.js 中，您可以访问 global.serviceWorkerOption.assets。因此，您可以管理所有已编译的文件(即使您现在不知道它们的最终名称)。如果您想从头开始创建 sw.js，请查看 google docs for more info .

   ...
   const { assets } = global.serviceWorkerOption;
   ...