标签: angular-service-worker

我指的是 Angular Service Worker 和调试（请参阅以下链接：https : //angular.io/guide/service-worker-devops#locating-and-analyzing-debugging-information）。

引用文档：

Angular Service Worker 在ngsw/虚拟目录下公开调试信息 。目前，单个公开的 URL 是 ngsw/state.

我一直无法ngsw/state在https://angular.io/progressive web app上找到调试信息：我尝试ngsw/state按如下方式附加：https : //angular.io/ngsw/state无济于事。我ngsw/state在源 devtools 选项卡中都找不到参考。更重要的是：什么是虚拟目录以及在哪里可以找到它？

有人可以建议吗？

我已经在我的测试服务器https://www.mytestserver.me/dev/pwa/ 上的“dev/pwa”文件夹下部署了 PWA 。该应用程序以 100% 的 PWA 分数通过了 Lighthouse。但是该应用程序仍然无法按预期运行。它根本不起作用。)) JS 控制台说：

无法加载“ https://www.mytestserver.me/dev/pwa ”。ServiceWorker 向 FetchEvent.respondWith() 传递了一个承诺，该承诺因“错误：响应不正确（fetchAndCacheOnce）：对https://www.mytestserver.me/index.html 的请求返回响应 404 未找到”而被拒绝 - ngsw-worker。 js:589:31

在我的 manifest.json 中，我有：“scope”：“/”和“start_url”：“/”。我试图将它们设置为https://www.mytestserver.me/dev/pwa/和只是 /dev/pwa/ 但结果是一样的。

我们正在创建一个 PWA Web 应用程序，目前，我们正在使用 sw-precache 库来生成服务工作者文件，它按预期工作。现在我们添加了 FCM 服务工作者，用于在离线时侦听传入消息，但它会覆盖我们现有的服务工作者。

那么我们如何将 Firebase Service Worker 与使用 sw-precache 生成的现有 Service Worker 集成？

我尝试了几种方法，当前代码：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then((registration) => {
        console.log('Service Worker registered');
    }).catch(function (err) {
        console.log('Service Worker registration failed: ', err);
    });

    navigator.serviceWorker.register('/firebase-messaging-sw.js', { scope: '/firebase-cloud-messaging-push-scope' }).then(function (registration) {
         console.log('f Service Worker registered');
     }).catch(function (err) {
         console.log('f Service Worker registration failed: ', err);
     });
}

更新 1：我也尝试useServiceWorker(registration)过，它注册了主服务工作者，但是当我在我的服务中初始化 firebase 时，它​​期望firebase-messaging-sw.js加载，所以它在控制台中抛出了一些错误。

服务代码：

import * as firebase from 'firebase';
import …

是否可以注册一个用 TypeScript 编写的 ServiceWorker @angular/service-worker？

当前在app.module.ts 中注册 service worker 如下所示：

ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production
})

是否有可能以某种方式注册一个ngsw-worker.ts？

至少这对于 Angular 中的网络工作者来说是可能的：

const worker = new Worker('../my-worker.worker', {
      type: 'module'
    });

我的worker.worker.ts

/// <reference lib="webworker" />

import {someMethod} from './some-method';

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
  someMethod();
});

任何帮助表示赞赏 - 谢谢

我有一个 Angular PWA，它无法离线启动（http 错误 504）。当我检查 /ngsw/state 时，出现此错误：

Error: Hash mismatch (cacheBustedFetchFromNetwork): https://example.com/favicon.ico: expected 566d8535a3adc2f7210a8a890bdc50ec4f91f0e3, got 8e076950c4c615772d8d5d753e07377bab9f2f27 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://example.com/ngsw-worker.js:734:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://example.com/ngsw-worker.js:174:62))
Latest manifest hash: 5952e5e67f8b4ee7115ef9d519a346712927b608

使用 Angular CLI：9.1.9 节点：12.16.1 Angular：9.1.11

PWA 上的灯塔检查没有给我任何错误，并且为了重定向 apache 服务器上的角度路由，我使用 .htaccess

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

有人有想法吗？谢谢！

有没有办法如何角服务人员可以用IE11上运行？根据 CanIuse的说法，不支持IE11，但似乎有针对旧版浏览器的Polyfill提供了Promises支持，据我所知，Service Worker是在其之上构建的。

有人让那个Polyfill在IE11上运行了Angular Service Workers吗？

感谢您的反馈意见 ：）

当前行为

我做了ng add @angular/pwa，我在生产版本中遇到了这个错误

    Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
        at Driver.<anonymous> (ngsw-worker.js:2297)
        at Generator.next (<anonymous>)
        at fulfilled (ngsw-worker.js:1752)

我做了一些研究，发现/ngsw.json?ngsw-cache-bust=0.08769372894975769GET 请求存在问题 。尽管 fetchLatestManifest 返回 200 状态代码，响应实际上不是 JSON ，而是它的无脚本版本index.html

您可以看到响应状态为 200 /ngsw.json?ngsw-cache-bust=0.08769372894975769

但实际响应不是所需的 JSON

我尝试复制作为 chrome 中的 fetch 选项实际 ```

fetch("https://officehawk.com/ngsw.json?ngsw-cache-bust=0.7927584506157848", {"credentials":"omit","headers":{},"referrer":"https://officehawk.com/ngsw-worker.js","referrerPolicy":"no-referrer-when-downgrade","body":null,"method":"GET","mode":"cors"});

``` 并且我?ngsw-cache-bust=0.7927584506157848从 fetch 的 URL 部分中删除，我可以看到响应是 JSON。

编辑了```

fetch("https://officehawk.com/ngsw.json", {"credentials":"omit","headers":{},"referrer":"https://officehawk.com/ngsw-worker.js","referrerPolicy":"no-referrer-when-downgrade","body":null,"method":"GET","mode":"cors"});

``` 这样你就可以看到 ngsw.json 的内容了

我怀疑它必须在这个函数中处理？ https://github.com/angular/angular/blob/0b4d85e9f19246af68a75140afc4db3d97f9ddfd/packages/service-worker/worker/src/driver.ts#L645

环境

角度版本：6.0.0

浏览器： - [x] Chrome（桌面）版本 67

我有一个Ionic (5) Angular应用程序，其 PWA packges 设置为ng add @angular/pwa --project app（在 angular.json 中它仍然命名为“app”，所以--project app应该是正确的）。

当我使用服务提供生产构建时，一切都在我的本地计算机上运行良好（我被要求安装pwa应用程序，离线模式工作等）。

但我想从子目录在我的服务器上托管 PWA，如https://example.com/www. 所以我调整了index.html<head>以包含<base href="/www/ />并将.htaccess放入我的服务器上的www文件夹中，其中包含

<IfModule mod_rewrite.c>
    RewriteEngine On

    # -- REDIRECTION to https (optional):
    # If you need this, uncomment the next two commands
    # RewriteCond %{HTTPS} !on
    # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
    # --

    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) index.html [NC,L]
</IfModule>

当我在浏览器中（Chrome、Firefox、Androd 上的 …