Question

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

Answer 1

查看此插件https://github.com/oliviertassinari/serviceworker-webpack-plugin

它应该可以解决您的问题。

Answer 2

我只想在此处添加一些说明。

如here所述，您需要按照3个步骤正确注册for (int i = 0; i < img.Rows; i++) { for (int j = 0; j < img.Cols / 2; j++) { img[i, j] = new Rgb(255, 255 * 2 * (double)j / img.Cols, 0); } } for (int i = 0; i < img.Rows; i++) { for (int j = img.Cols / 2; j < img.Cols; j++) { img[i, j] = new Rgb(255 - (255 * 2 * (double)j / img.Cols), 255, 0); } }（服务人员）。

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

在您的主要JS线程中注册服务工作者。 只需将此代码块添加到脚本的开头。

import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

...

plugins: [
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, 'src/sw.js'),
    }),
],

编写您自己的sw.js。在import runtime from 'serviceworker-webpack-plugin/lib/runtime'; if ('serviceWorker' in navigator) { const registration = runtime.register(); }文件夹内创建文件sw.js，然后粘贴code from plugin example。文件名和密码可以通过插件选项配置。重要：在src内，您可以访问sw.js。因此，您可以管理所有已编译的文件（即使您现在不知道它们的最终名称）。如果您想从头开始创建sw.js，请查看google docs for more info。
```
global.serviceWorkerOption.assets
```

Webpack - 服务工作者

2 个答案: