从组件检查 Service Worker 安装进度（角度）

Question

我已将我的 Angular 应用程序更新为 PWA，因为我需要在第一次启动时预加载所有资产（应用程序有很多用于 UI 的图像）。 这就是为什么我想在服务工作者安装事件期间显示某种微调器/加载栏并在完成后隐藏它。 那么第一个问题 - 是否可以从组件处理此事件？

我找到了这个示例并尝试将其添加到第一个组件中，该组件在应用启动时加载，但没有得到任何日志。所以可能它不会那样工作。

ngOnInit() {
self.addEventListener('install', event => {
    this.log("INSTALLING ");
    const installCompleted = Promise.resolve()
                        .then(() => this.log("INSTALLED"));

    event.waitUntil(installCompleted);
});

self.addEventListener('activate', event => {
    this.log("ACTIVATING");
    const activationCompleted = Promise.resolve()
        .then((activationCompleted) => this.log("ACTIVATED"));
        event.waitUntil(activationCompleted);
});

self.addEventListener('fetch', event => {
    this.log("HTTP call intercepted - " + event.request.url);
        return event.respondWith(fetch(event.request.url));
    });
}

log(message) {
    console.log(message);
}

我还有一个关于缓存资产的问题。在我的 ngsw-config.json 中，我正在使用下一个设置：

  "name": "assets",
  "installMode": "prefetch",
  "updateMode": "prefetch",
  "resources": {
    "files": [
      "/assets/**"
    ]
  }

但是当我打开第一页时，在缓存中它不会显示 /assets 中的所有图像和文件夹。不是事件的一半。可以吗？它不应该显示所有缓存的图像吗？问题是否可能是因为我正在使用延迟加载模块并且服务工作者在加载每个模块时开始缓存？ 另一方面，当我切换页面时，在网络选项卡中显示每个图像都是从服务人员加载的......

谢谢

Answer 1

您可以使用此处描述的技术（链接断开）来增强您的 Angular Service Worker 行为：

http://jakubcodes.pl/2018/06/13/enhancing-angular-ngsw/

它基本上将一个中间脚本文件注册为服务工作者 JavaScript 文件，并在其中调用除自己的代码之外的 Angular 脚本。

编辑

详细过程：

1. 在您的 src 文件夹中创建两个 js 文件（例如“sw-master.js”和“sw-custom.js”）。后者可能包含您的自定义服务工作者代码。

2. 将这两行添加到您的“sw-master.js”（在 NGSW 脚本之前导入自定义脚本）：

   importScripts('./sw-custom.js');
   importScripts('./ngsw-worker.js');
   

3. 在项目的“angular.json”文件中注册两个新资产：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/manifest.json",
     "src/sw-master.js",
     "src/sw-custom.js"
   ],
   

4. 在“app.module.ts”中注册主脚本而不是“ngsw-worker.js”：

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