如何为Angular CLI项目编辑Service Worker文件 [英] How to edit your service worker file for an Angular CLI project

问题描述

我已经使用命令 ng add @ angular/pwa --project * project-name * 将 @ angular/pwa 包添加到了Angular CLI项目中.成为渐进式Web应用程序，这增加了我认识的服务人员.我想编辑该默认服务工作者以支持例如处理共享目标" 链接.我看到使用Google Chrome中的检查"选项，服务工作者已注册到名为 ngsw-worker.js 的文件中.当使用 ng build --prod 进行编译时，如何编辑由Angular CLI创建的服务工作程序( ngsw-worker.js )?最好的方法是什么?

I have added the @angular/pwa package to my Angular CLI project with the command ng add @angular/pwa --project *project-name* so it becomes a progressive web applicaiton, and this adds a service worker I know. I want to edit that default service worker to support e.g. handling Shared Targets links. I see that the service worker is registered to a file calleded ngsw-worker.js using the "Inspect" option in Google Chrome. How can I edit that service worker (ngsw-worker.js) created by the Angular CLI when compiled with ng build --prod? What is the best way?

推荐答案

获取当前的服务工作者:

1. 有两种方法可以执行此操作.从 node_modules 文件夹中获取 ngsw-worker.js ，或在使用 ng build --prod 构建应用程序后，将其获取到输出文件夹中.

1. There are two ways you could do this. Get the ngsw-worker.js from the node_modules folder, or get it in your output folder after building your app with ng build --prod.

将 ngsw-worker.js 的内容复制到新的JavaScript文件中，例如: * MyProject */src/service-worker.js .

Copy the contents of the ngsw-worker.js into a new JavaScript file under e.g.: *MyProject*/src/service-worker.js.

使Angular CLI在编译时包含您的文件:

1. 进入 * MyProject */src/angular.json .搜索资产" 键.应该有两个.在每个键的数组底部，添加您的自定义服务工作者文件；例如: src/service-worker.js ，因此angular将包含它.

1. Go into *MyProject*/src/angular.json. Search for the "assets" key. There should be two. At the bottom of the array for each key, add your custom service worker file; e.g.: src/service-worker.js so angular will include it.

编辑服务人员:

1. 现在，您可以根据需要编辑自定义服务工作者文件.例如:在顶部添加 self.addEventLister('fetch'，event => {...}).该代码添加了一个新事件(可能是几个相同的事件)，因此它不会覆盖任何内容...它可能会干扰 ngsw-worker.js .

1. Now you can edit your custom service worker file as you want. E.g.: add self.addEventLister('fetch', event => { ... }) at the top. That code adds a new event (it could be several of the same), so it won't overwrite anything... It could interfere with something else tho from the copied content of ngsw-worker.js.

最后一步-添加 Service Worker :

1. 首先使用 ng build --prod 构建您的应用.

现在找到输出文件夹的位置( angular.json 中的"outputPath" ).在此示例中，它将是" ../public" .

Now locate the location of the output folder ("outputPath" in angular.json). In this example, it will be "../public".

打开终端以编辑文件.我喜欢使用VS Code；相对于我通过扩展名安装的项目文件夹而言，那里有一个终端.

Open a terminal to edit the file. I like to use VS Code; there is a terminal in there relative to my project folder installed through an extension.

使用以下命令覆盖文件: cp public/service-worker.js public/ngsw-worker.js .

就这样！

有关更多信息的文档:

Thats it!

Documents to learn more:

• 自动渐进式Web应用

注意:您应该考虑使用由 @ angular/service-worker 分配给您的最终服务人员，并在您的自定义代码上方，添加 @ angular/pwa时会自动安装该自定义代码到您的项目，并使用 ng build --prod 进行编译.

Note: You should consider using the finished service worker given to you by @angular/service-worker, with your custom code on top, which will be installed automatically when adding @angular/pwa to your project and compiled with ng build --prod.

这篇关于如何为Angular CLI项目编辑Service Worker文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！