标签: angular-service-worker

我正在尝试使服务工作者能够与API请求一起工作。我希望该应用离线运行，并具有以下配置：

    {
        "name": "api",
        "urls": ["https://x.com/**"],
        "cacheConfig": {
            "strategy": "performance",
            "maxSize": 20,
            "maxAge": "365d",
            "timeout": "5s"
        }
    }

这是我离线时xhr标签的外观：

这是用户请求的内容：

如您所见，用户的API调用无法解析。

这是user在线时的响应：

我正在使用Firebase在Angular PWA中进行推送通知，并且正在跟踪链接。https://medium.com/@tariqueejaz/progressive-web-app-push-notifications-making-the-web-app-more-native-in-nature-a167af22e004

我正在使用Angular 6，并已为所有代码设置了代码。当我尝试运行它时，它显示了一个弹出窗口。

单击“允许”按钮后，它将在控制台上引发错误：

无法注册ServiceWorker：提取脚本时收到错误的HTTP响应代码（404）。“代码：” messaging / failed-serviceworker-registration“消息：”消息：我们无法注册默认服务工作者。无法注册ServiceWorker：获取脚本时收到错误的HTTP响应代码（404）。（消息传递/失败的serviceworker-registration）。”堆栈：“ FirebaseError：消息传递：我们无法注册默认服务工作者。无法注册ServiceWorker：获取脚本时收到错误的HTTP响应代码（404）。（消息/服务工作者注册失败）。在http：// localhost：4200 / vendor.js：106604：32吗？在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke（http：// localhost：4200 / polyfills.js：2710：26）？在Object.onInvoke（http：// localhost：4200 / vendor.js：35701：33）吗？在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke（http：// localhost：4200 / polyfills.js：2709：32）吗？在Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.run（http：// localhost：4200 / polyfills.js：2460：43）吗？在http：// localhost：4200 / polyfills.js：3194：34吗？在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（http：// localhost：4200 / polyfills.js：2743：31）吗？在Object.onInvokeTask（http：// …

版本

• "@angular/common": "~9.0.0"
• "@angular/service-worker": "~9.0.0"

描述

我使用 Service-Worker 实现了ng add @angular/pwa --project [app]，Lighthouse 会将 Web 应用程序识别为 PWA。突然，在部署到 Firebase 托管“安装”通知后没有弹出，所以我检查了开发控制台。

清单仍然像往常一样出现：

但没有缓存任何内容：

运行 Lighthouse-Audit 时，出现以下错误：

start_url does not respond with a 200 when offline

ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

manifest.webmanifest

{ …

首先，我对Angular 5+项目中此类文件的潜在存在一无所知。我有一个正在运行的Angular 5项目，其中没有此manifest.json文件。我决定添加服务工作者工具，以提高应用程序的性能。服务人员没有被激活，我对此问题进行了一些研究，发现以下开放的github问题，其中一些人提到他们使用manifest.json解决了该问题。这是什么文件 为什么它不能成为Angular CLI配置的一部分？在什么条件下您需要一个？潜在的文件在哪里？

有谁知道角度服务人员是否没有缓存帖子请求？我使用 @angular 5.2.5 将它集成到我的应用程序中，它缓存了一些请求，但其中一些是帖子，而那些他不会缓存的请求，即使它们与我指定的 url 模式匹配。这是我的 ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ],
        "urls": [
          "**/fonts.googleapis.com/**/*",
          "**/www.gstatic.com/**/*"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/api/attachments/*"
      ],
      "cacheConfig": {
        "maxSize": 200,
        "maxAge": "7d",
        "timeout": "10s",
        "strategy": "performance"
      }
    },
    {
      "name": "api-freshness",
      "urls": [
        "/api/*", …

我正在尝试创建新的角度PWA，但是当我执行ng new pwa --service-worker系统时，返回Unknown选项：'--service-worker'

知道有什么问题吗？

• 操作系统：ubuntu gnome 16.04
• 节点：v10.16.0
• Npm：6.9.0

ngsw-worker.js有很多关于安装 ServiceWorker 的分步指南；然而，甚至没有一个关于如何卸载 ServiceWorker 的分步指南safety-worker.js。

https://angular.io/guide/service-worker-devops#safety-worker中提到了 safety-worker.js

如何使用 safety-worker.js 卸载 Service Worker？我想卸载以前安装的 ngsw-worker.js。

我已经@angular/pwa使用命令将该包添加到了我的 Angular CLI 项目中，ng add @angular/pwa --project *project-name*因此它成为了一个渐进式 Web 应用程序，这增加了一个我认识的服务工作者。我想编辑该默认服务工作者以支持例如处理共享目标链接。我看到 Service Worker 已使用 Google Chrome 中的“Inspect”选项注册到名为ngsw-worker.js的文件中。编译时如何编辑由 Angular CLI 创建的service worker ( ngsw-worker.js ) ng build --prod？什么是最好的方法？

我正在开发一个有角度的 PWA 应用程序。所以我添加了一个 npm 包ng add @angular/pwa。它添加成功，没有错误。

生成的清单工作正常。但我正面临服务工作者的问题。当应用程序上线时，它会存储所有缓存（请参阅附件），但每当应用程序下线时，它会显示错误 - HTTP ERROR 504，而不是服务于来自 Service Worker 的请求

   {
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": ["assets/images/favicon.ico", "/index.html", "/*.css", "/*.js"]
        }
      },
      {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
          "files": [
            "/assets/**",
            "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
          ]
        }
      }
    ]
  }