标签: angular-service-worker

我想知道是否有可能在开发模式下（而非生产阶段）测试pwa并注册serviceworker

当我进行ng build --prod然后在dist文件夹中启动http-server时，它可以正常工作，但是当我在没有构建的情况下进行ng服务时，会给我chrome错误：Service Worker无法注册

prod和dev上的程序是否相同？与灯塔一样，审核使我可以在产品上使用Serviceworker，但不能在同一项目的dev中使用

任何帮助或链接将不胜感激

谢谢

我使用Angular 6 CLI在应用程序中生成并注册服务工作者,当我手动启用离线模式时,服务工作者工作是正确的,但是一旦我尝试使用灯塔进行审核,它就会告诉我服务人员未注册.

我创建了一个新的角度项目.然后我补充说

ng add @angular/pwa我得到了这样的错误,即使我找不到ngsw-config.json文件

路径"/ngsw-config.json"已经存在.

角度CLI版本是6.1.1.

规则结果无效:Function().

在角度CLI版本是6.0.3

我正在尝试使用@ angular/pwa 链接 和使用SwPush 在Angular 7中进行推送通知.我无法获得实际推送通知.我目前正在使用localhost(通过在执行ng-build之后运行http-server)并且我的api服务器位于云中.我能够使用swPush.requestSubscription启用订阅,并且订阅已在服务器上成功注册.在Chrome中,所有api调用都被服务工作者本身阻止(失败:来自服务工作者),而在Firefox中,没有错误,但推送消息没有出现.

我在下面添加了相关的代码片段.由于没有报告具体错误,我无法继续进行.

请告知如何进行此项工作并显示通知.

app.module.ts

import {PushNotificationService} from 'core';
import { ServiceWorkerModule } from '@angular/service-worker';
@NgModule({
declarations: [
    AppComponent,

],
imports: [

    ServiceWorkerModule.register('ngsw-worker.js', { enabled: true })
],
providers: [
    PushNotificationService,
],
exports: [],
bootstrap: [AppComponent]
   })
 export class AppModule {
  }


   app.component.ts
export class AppComponent  {

constructor(private pushNotification :PushNotificationService,
private swPush : SwPush){
this.swPush.messages.subscribe(notification => {
          const notificationData: any = notification;
     const options = {
      body: notificationData.message,
      badgeUrl: notificationData.badgeUrl,
      icon: notificationData.iconUrl
    };
    navigator.serviceWorker.getRegistration().then(reg => { …

我们有一个使用 Angular Service Worker 的 Angular 应用程序。

正如我们所知，该服务工作者将缓存文件中的内容哈希与文件中的哈希进行比较ngsw.json。

现在，我们已经设置了持续集成和交付（使用 Azure DevOps，但应该无关紧要）并且在交付阶段，我们正在修改environment.json文件中的一些设置（如配色方案、API url...所有与部署目标）。问题是，通过修改该 json 文件，哈希不再与文件中该ngsw.json文件的哈希匹配。

我们绝对不想为专用的目标环境重建，因为这违背了 CI/CD 的目的。（一旦该软件包进入 QA 流程，您就不想为生产环境重建软件包）。

所以问题是：ngsw.json在我们修改我们的environment.json（或任何其他）文件后，有没有办法在文件中重新生成哈希？或者这个问题有其他解决方案吗？

我使用@angular/service-worker模块生成了一个 service-worker 来缓存我的 Angular 7 应用程序的所有静态资产，它运行良好（在 chrome 开发工具的网络选项卡中，这些文件被标记为from ServiceWorker）。

我想要做的是向从外部 API 获取的数据添加缓存支持（和后台同步）。我知道该@angular/service-worker模块支持dataGroups资产类型，但我想做一些更复杂的事情：首先提供缓存数据，然后通过网络获取数据，更新缓存，最后返回第二个更新鲜的响应。这个想法在离线食谱中有所描述：https : //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network 所以我需要添加一个与一个由 Angular 生成。问题是我的fetch事件侦听器从未被触发。

我注册了我的服务工作者： ServiceWorkerModule.register('../sw.js', { enabled: environment.production }),在 app.module.ts 中。

sw.js 文件导入 ngsw-worker.js（由 Angular 生成）：

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

然后，sw-custom.js在install和上添加两个事件侦听器fetch：

self.addEventListener('install', function(event) {
    try {
        console.log('typeof System in install', typeof System);
    } catch(e){}

    console.log('caching');
    event.waitUntil(
        caches.open(CACHE_VERSION).then(function(cache) {
            console.log('caching - getting');
            return;
        }).catch(function(error){ console.log('error', error) })
    );
  });

  self.addEventListener('fetch', event …

我有问题@angular/pwa。当我建立在生产模式下，我没有得到ngsw-worker.js，并ngsw.json在我的DIST夹中的文件。

我使用的 pwa 版本是：

@angular/pwa: ^0.13.8
@angular/service-worker: ~7.1.0
@angular version 7

提前致谢

当 chrome 在启用 angular service-worker 的情况下发出 HTTP 请求时，我会在 Chrome 网络选项卡中看到类似的内容：

• 为什么 chrome 网络选项卡为每个请求显示两个请求，一个获取，一个 xhr？（我在服务器上只看到一个请求）
• 为什么获取请求没有响应数据？
• 每个请求的持续时间和大小是否准确？

我正在关注官方服务人员指南，并且使用的是最新的 Angular 9。

在 Firefox 中，我没有看到重复的请求：

Chrome 版本：81.0.4044.129

火狐版本：76.0

我在 S3 + cloudfront 上部署了一个生产 Angular 9 应用程序。它运行良好，但每次我发布应用程序的新更新时都会遇到一些问题。我读了很多文章：

• https://medium.com/@sumn2u/react-progressive-web-app-s3-and-cloudfront-6c890fa873fb
• https://medium.com/driven-by-code/on-the-importance-of-correct-headers-and-metadata-in-s3-origins-for-aws-cloudfront-50da2f9370ae

我为 index.html 和 ngsw-worker.js 设置了正确的缓存，因此它们不会从 cloudFront 缓存。每个 Angular 部署都保存在 S3 上一个带有内部版本号的新文件夹中，如下所示：

执行此操作后，我更改 CloudFront 的目录名称以指向新位置。不幸的是，这会给使用该应用程序以前版本的客户带来一些问题。事实上，如果服务工作者在用户加载应用程序时没有得到更新，如果用户加载了之前没有缓存的应用程序的某些部分，我会收到一个错误加载块（因为它在 S3 上不再存在） ）。

所以我想知道在 AWS S3 + CloudFront 上持续部署 Angular 应用程序的最佳方法是什么。我应该将所有文件加载到同一个文件夹中吗？是不是效率太低了（很快我就会有数千个文件）？任何提示都非常感谢。

当我使用 Service Worker 构建 Angular 应用程序时，它会创建一个包含每个文件的哈希值的哈希表，以检测应用程序的新版本何时可用。该哈希表位于 ngsw.json 中。

这是哈希值的示例。

如果我想使用 PurifyCSS 清理未使用的 css，则 dist/styles.*.css 将更改文件内容及其哈希值，但 ngsw.json 具有旧哈希值。

在这种情况下，Angular Service Worker 将失败，因为存在哈希不匹配。

我怎样才能避免这种情况呢？运行 PurifyCSS 后是否应该在 ngsw.json 中手动更新哈希？是否有某种机制可以自动更新此值，或者可以在 angular-cli 为每个文件生成哈希之前执行 PurifyCSS 吗？

这个问题通常针对对服务工作者缓存的 dist 文件进行的任何类型的修改，因为哈希会改变，因此会出现哈希不匹配。这意味着 Service Worker 将无法工作。

先感谢您。