标签: angular-service-worker

我正在尝试使用Angular Service Worker,除了dataGroups不适合我之外,一切正常.

这就是我的意思ngsw-config.json:

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/shipments/**"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]

在我的网络选项卡中,我看到服务工作者总是进行服务器调用然后回退到缓存.见附图.

dataGroups - 性能

请注意,我正在调用的API位于不同的服务器上,localhost vs some-server:8000,我尝试了不同的使用不同的URL: "/shipments/**" "/shipments" "http:some-server:8000/shipments/**"....等但没有一个工作.

我的环境:
- @angular 5.1.1
- Service-Worker 5.1.2
- Angular-Cli 1.6.0

谢谢

如何处理角度服务工作者中的推送通知单击.SWPush没有任何方法.

我已经尝试引用一个侦听"notificationclick"事件处理程序的js,但是在点击通知按钮时它从未被触发过.

任何指针都会有所帮助!

我无法让我的 angular5 Service Worker 工作。我有两个主要问题：

1. Service Worker 不会缓存用作背景图像的资产图像
2. 在模拟网络断开连接后，Service Worker 最初从缓存中提取文件（上述非缓存文件除外），但在第二次刷新后遇到错误。

下面是我的问题的更详细的报告。您可以通过克隆我为突出显示位于此处的问题而制作的存储库来跟进。

我使用提供的 --service-worker 标签创建了应用程序。然后我确保遵循此处Angular 文档中列出的 5 个步骤，即：

1. 添加了 Service Worker 包。
2. angular-cli.json 将 service-worker 设置为 true
3. Service Worker 在 app.module.ts 中导入并注册
4. ngsw-config.json 是按照文档中的描述生成和配置的。
5. 运行 ng build --prod 以在应用程序的 dist 文件夹中生成包。

我使用 node/express 和 server.js 文档为我的应用程序提供服务。当我在隐身窗口中打开应用程序时（如文档所建议的那样），我看到我的服务工作者已注册，并且缓存存储了我的包和索引文件。它还缓存在 img 标签中使用的图像，但它不缓存在我的 css background-image 中指定的图像。当我通过选中 Service Worker 上的离线框来模拟网络问题然后刷新我的页面时，除了需要背景图像的部分之外，该页面会正确显示所有内容。

但是当我第二次刷新应用程序或打开另一个选项卡（在同一个隐身窗口上，因此服务工作者仍然注册并且缓存仍然处于活动状态时）会出现最终/主要问题。在这一点上，我什么也没有显示。控制台给了我三个错误：

1. 获取http://localhost:3000/favicon.ico net::ERR_INTERNET_DISCONNECTED
2. 获取脚本时发生未知错误。
3. 无法加载资源：net::ERR_INTERNET_DISCONNECTED

最后一个错误来自 ngsw-worker.js。我不太确定如何处理这些错误。我想也许一个新的 service worker 正在尝试注册，但我不确定为什么会发生这种情况......

这是我要求的 ng-config.json 文件：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app", …

如何每分钟轮询服务器以检查 Service Worker 更新？

我使用了 SWUpdate angular 的可用方法，但它不轮询服务器，而是在页面刷新时获取更新和缓存，这不是必需的。

我遇到了 checkForUpdate() 方法，它非常相似，但不确定它是如何工作的？

任何帮助将不胜感激。

ngOnInit(){

   if(this.swUpdate.isEnabled){
     this.swUpdate.available.subscribe( () => {

       if(confirm("New Version available.. Load?")){
         window.location.reload();
       }


     })
   }

 }

上面的代码在第二次重新加载时从缓存中获取数据。

我使用以下版本使用 Angular CLI 新创建了一个 PWA：
Angular CLI：1.6.8
节点：8.8.1
Angular：5.2.5

我的问题：当我离线时，我只会看到一个空白页面。Service Worker 不会从缓存中加载任何资产。如果我手动停止并启动它，那么它将开始工作一小段时间。

没有改变任何东西，这是 cli 生成的。

我正在使用的配置：
ngsw.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/**" ] } 
  }] 
}

和 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { ServiceWorkerModule } from '@angular/service-worker';
import { AppComponent …

我将 Angular 5.2.7 与 Angular Service Worker 5.2.7 一起使用。

我想缓存网络服务调用。所以，我在我的 ngsw-config.json 中为 dataGroups 设置了这个配置：

"dataGroups": [{
  "name": "tasks-users-api",
  "urls": ["/api", "/rest"],
  "cacheConfig": {
    "strategy": "freshness",
    "maxSize": 20000,
    "maxAge": "1h",
    "timeout": "5s"
  }
}]

我尝试缓存这两个 URL：https : //randomuser.me/api/? results =20 ---> 没关系 https://test.moodlecloud.com/webservice/rest/server.php ---> 它是高

第一个按预期缓存。这是一个简单的 GET 服务。第二个不是。这是一个 POST 服务，表单数据作为有效负载发送。

知道有什么问题吗？

我已经开始使用 Workbox3 开发 PWA。到目前为止，它的效果非常惊人。我已将代码添加到“添加到主屏幕”按钮，以便用户可以将其添加到移动设备的主屏幕。但是在主屏幕上添加图标的提示框只显示一次。一旦我将该图标添加到主屏幕，然后如果我删除它并再次尝试相同，则它什么也不显示。

我正在从 Chrome 的 DevTool->Application->Mainfest sectoin->Add to Home Screen检查Desktop chrome。我的Service Worker安装正确并且工作正常。

它没有显示任何错误，没有任何控制台。所以我无法跟踪问题是什么。

这是我迄今为止为添加到主屏幕所做的代码。我在页脚添加了这个按钮。

<button name="addToHome" id="addToHome" class="addToHome">Add To Homescreen</button> 

var deferredPrompt;
var btnSave = document.querySelectorAll('.addToHome')[0];

    window.addEventListener('beforeinstallprompt', function(e) {
      console.log('beforeinstallprompt Event fired');
      //e.preventDefault();   //I even try with this uncommented no luck so far

      // Stash the event so it can be triggered later.
      deferredPrompt = e;

      return false;
    });

    btnSave.addEventListener('click', function() {
      if(deferredPrompt !== undefined) {
        // The …

我对 PWA 有疑问，如果有人帮助我，我会很高兴。在我的 PWA 中，存储 HTML、JS 和 CSS 等静态文件没有任何问题。但我面临动态数据的问题。即：我的self.addEventListener('fetch', function(e) { })没有被调用，但其他功能运行良好，即：“安装”和“活动”事件。

更具体地说，我正在使用@angular/service-worker它工作正常，但我创建了另一个名为sw.js. 在我的监听器中，sw-js我正在监听“安装”、“活动”和“获取”等事件。我的sw.jsfetch 没有被调用，而其他两种方法运行良好。但是在获取时，ngsw-worker.js会单独调用 的 fetch 方法。

我需要的是用 Angular 在 PWA 中进行 CRUD 操作。

提前致谢！

这个问题花了我一整天的时间，我不明白发生了什么

我可以看到我的 Service Worker 已注册，但是“有时”当我在开发人员工具中单击离线时，我的域的 ServiceWorker 就会消失！

但这是主要问题，当我重新加载应用程序时，我看到以下行为。

您可以看到 ngsw.json 加载了两次，main.js 加载了 3 次！main.d3ae2084xxxx && main.bbe5073dxxxx && 然后再次 main.d3ae2084xxxx ！

如果我检查两个 ngsw.json 请求的响应，您可以看到两者都显示 main.d3ae2084xxxx 作为 main.js 的正确版本，但它仍然加载 main.bbe5073dxxxx...

第一个 ngsw.json 请求

第二个 ngsw.json 请求

更令人沮丧的是，实际加载的版本是以前的main.bbe5073dxxxx...！！！！

如果有人有任何想法如何发生这种情况，请告诉我。

更新...所以发现了这个优秀的小端点

https://you-app-url/ngsw/state 

这将为您提供有关 Service Worker 的大量调试信息。

就我而言，这个

驱动程序状态：EXISTING_CLIENTS_ONLY（由于初始化失败而降级：哈希不匹配（cacheBustedFetchFromNetwork）： https://dev-xxxx.net/main.eb8468bb3ed28f02d7c2.js：预期b5601102b721e0cf777691d327dc965d40d1c96e，得到83c18fdb4a594 2c964a31c119a57e0b8e16fe46e（缓存清除后）

因此，在我的情况下，这似乎是某种 CDN 问题，当我确定时将更新答案。

我无法让 Angular Service Worker 缓存存储在 Firebase Storage 上的图像，以便它们在离线模式下可用。

我正在使用 angular 7.2.0，在 Windows 机器上的本地主机上运行。

要重现，请执行以下操作。

1. 将图像上传到 Firebase 存储并记下下载 URL。
2. 在 PowerShell 中运行以下命令

ng new my-project --service-worker
cd .\my-project\
ng add @angular/pwa --project my-project

3. 编辑src/app/app.component.html为

<img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg">
<img src="https://firebasestorage.googleapis.com/v0/b/{firebase project}.appspot.com/o/{image}.jpg?alt=media&token={token}">

4. 下面加入src/ngsw-config.json后

    "dataGroups": [
      {
        "name": "photos",
        "urls": [
          "https://firebasestorage.googleapis.com/**/*.jpg*",
          "https://upload.wikimedia.org/**/*.jpg"
        ],
        "version": 1,
        "cacheConfig": {
          "maxSize": 1000,
          "maxAge": "10d",
          "timeout": "3s",
          "strategy": "performance"
        }
      }
    ]

5. 回到powershell，运行：

ng build --prod
http-server -p 8080 -c-1 dist/my-project

6. http://localhost:8080/在 Chrome …