覆盖@ angular / pwa ngsw-worker.js

Question

我正在研究an app，并且希望与Firebase Messaging集成。为此，我需要在构建时将某些代码附加到ngsw-worker.js生成的@angular/pwa上。

我尝试在ngsw-worker.js中创建一个src/，但是在运行rm -rf dist/ && ng build --prod之后，dist/中的版本没有更改。

Answer 1

您可以这样做

首先您需要运行

ng build --prod 

因此，您可以从项目根目录的dist文件夹中复制文件ngsw-worker.js（与package.json处于同一级别）。在这里，您可以使用所需的内容修改该文件。

接下来创建一个文件名称replace-sw.sh并将此内容粘贴到该文件中

#!/bin/bash
cp ./ngsw-worker.js ./dist/

最后更新您的package.json

"build": "ng build --prod && replace-sw.sh"

然后，您只需运行npm run build

Answer 2

将服务工作程序模块导入app.module.ts时，其中包括工作程序的路径。

ServiceWorkerModule.register(
  '/ngsw-worker.js',
  { enabled: environment.production }
)

将该路径更改为其他路径，然后在该文件importScripts('/ngsw-worker.js)中。还将其包含在assets的{​​{1}}部分中，以便将其复制到生产环境中。