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

问题描述

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

I have updated my angular app into PWA, since I need to preload all of the assets on the first launch (application have a lots of images, which are used for UI).That's why I would like to show some kind of spinner/loading bar during service worker install event and hide it when it's done. So first question - is it possible to handle this event from the component?

我找到了这个示例，并尝试将其添加到第一个组件中，在应用启动时显示，但没有任何日志。

I have found this example and tried to add it inside first component, that loads on app launch, but didn't get any logs. So probably it doesn't work that way.

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中，我使用下一个设置：

Also I have a question about caching assets. In my ngsw-config.json I'm using next setup:

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

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

but when I'm opening first page, in cache it doesn't show all the images and folder from /assets. Not event half of them. Is it ok and it's not supposed to show all the images that are cached? Is it possible that the problem is because I'm using lazy loading modules and service worker start caching when each module is loaded?On other hand, when I'm switching pages, in Network tab it shows that each image is loaded from service worker...

谢谢

推荐答案

您可以使用上述技术来增强Angular服务工作者的行为此处（链接断开）：

You can enhance your Angular service worker behaviour using the technique described here (link broken):

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

It basically registers an intermediate script file as the service worker JavaScript file and in this, the Angular script besides own code is called.

编辑

详细过程：

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



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

1. Create two js files in your src folder (e.g. "sw-master.js" and "sw-custom.js"). The latter may contain your custom service worker code.

2. Add these two lines to your "sw-master.js" (import the custom script before the NGSW script):

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

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

Register the two new assets in the "angular.json" file of your project:

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

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

Register the master script instead of "ngsw-worker.js" in your "app.module.ts":

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

这篇关于从组件（角度）检查Service Worker的安装进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！