Angular6 Service Worker 和后台同步 [英] Angular6 Service Worker and background sync

问题描述

似乎 angular6 不支持与 Service Worker 的后台同步.在 Angular 服务中没有任何库的情况下需要执行哪些步骤?

it seems that angular6 does not support background syncing with service worker. What are the steps required to do this without any library in an angular service?

https://developers.google.com/web/updates/2015/12/背景同步

我如何以及在哪里可以直接访问 angular6 应用程序中的 WorkerGlobalScope，以便可以完成后台同步.:

How and where can I access WorkerGlobalScope in an angular6 application directly so that background sync can be done.:

self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

问题在于 Angular CLI 生成了 servicworker 文件 (ngsw-worker.js).有没有办法注入/修改/扩展这个文件?是的，我可以手动编辑文件 ngsw-worker.js 或使用其他花哨的技巧.有官方的方法吗?

The problem is that the angular CLI generates the servicworker file (ngsw-worker.js). Is there a way to inject / modify / extend this file? Yes, i can edit the file ngsw-worker.js by hand or with another fancy trick. Is there an official way to do this?

推荐答案

是的，您可以使用自定义脚本来扩展 Angular Service Worker 的功能.

Yes you can use your custom script to extend the capabilities of Angular's service worker.

只需按照以下步骤操作:

Just follow below steps:

1. 使用您的自定义脚本创建一个 js 文件，例如 sw-custom.js在项目的 src 目录下.
2. 在 sw-custom.js 文件顶部添加importScripts('./ngsw-worker.js')".
3. 将 sw-custom.js 文件添加到脚本部分下的 angular.json 文件中.
4. 现在在应用模块中注册您的 sw-custom.js 文件而不是

1. Create a js file with your custom script let's say sw-custom.js under src directory of your project.
2. Add "importScripts('./ngsw-worker.js')" at top of sw-custom.js file.
3. Add sw-custom.js file to angular.json file under scripts section.
4. Now register your sw-custom.js file in app module instead of

ngsw-worker.js

ngsw-worker.js

就是这样，您现在可以根据需要在此处编写脚本了.

That's it now you can write your script here as per your need.

也许这不是正确的方法，但它有效.

Maybe it is not correct approach but it works.

这是相同的 博客.

这篇关于Angular6 Service Worker 和后台同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！