Question

我已将我的角度应用程序更新为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中的所有图像和文件夹。不是事件的一半。可以，并且不应该显示所有已缓存的图像吗？问题是否可能是因为我正在使用延迟加载模块，并且在加载每个模块时服务工作者开始缓存？另一方面，当我切换页面时，在“网络”选项卡中，它显示每个图像都是从Service Worker加载的...

谢谢

Answer 1

您可以使用此处介绍的技术来增强Angular服务工作者的行为：

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

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

修改

详细过程：

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

将这两行添加到“ sw-master.js”中：

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

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

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

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

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

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

1 个答案: