标签: angular-service-worker

我在Angular 5.2.5应用程序中使用Angular-CLI 1.6.6和@ angular/service-worker 5.2.5.除了在我们的生产环境中弹出一条错误消息外,一切在本地lite-server和生产服务器上都能正常工作:

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

查看ngsw-worker.js脚本,我发现上面生成错误消息的行(2466):

async safeFetch(req) {
    try {
        return await this.scope.fetch(req);
    }
    catch (err) {
        this.debugger.log(err, `Driver.fetch(${req.url})`);
        return this.adapter.newResponse(null, {
            status: 504,
            statusText: 'Gateway Timeout',
        });
    }
} 

catch中的控制台日志记录错误会发出以下错误:

TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
    at Driver.safeFetch (ngsw-worker.js:2464)
    at Driver.handleFetch (ngsw-worker.js:1954)
    at <anonymous>

与此问题相关的错误:导致'ServiceWorkerGlobalScope'上执行'fetch'失败的原因:'only-if-cached'只能设置为'same-origin'模式错误？

生成此错误的req是应用程序的任何首次访问:

https://example.com/test/#/connect
https://example.com/test/#/map?token=[accestoken]
...

在应用程序重新加载时,错误不会重复.

有人可以帮帮我吗？服务工作者的safeFetch()中是否存在错误(可能支持HashLocationStrategy)？我必须在配置中更改任何内容吗？

我有一个Angular PWA.它的服务工作者一直在完美地工作,直到我从Angular 5.0升级到7.2

升级后,我在/ ngsw/state中看到以下错误

驱动程序状态:SAFE_MODE(由于错误而导致初始化失败:违反Invariant(初始化):最新散列null没有已知的清单初始化/ <@https:// {{domain}} .com/ngsw-worker.js:2227:27已完成@https:// {{domain}} .com/ngsw-worker.js:1772:52)最新清单哈希:无最后更新检查:从不

应用背景

• Angular版本是7.2.0
• 服务工作者版本是7.2.0
• 我使用SwUpdate服务手动检查更新.

用于检查更新的代码 /ngsw/state

到目前为止我的研究和故障排除步骤

在Chrome中

• 服务工作者注册时没有任何错误
• 我查看了网络选项卡,发现服务工作者永远不会下载'ngsw.json'.当应用程序在Angular 5.0中时,我看到'ngsw.json'被下载了

• 我看到这里报道了同样的问题.我在这里看不到任何适当的解决方案.
• 我试过选择'重新加载更新'来暂时解决问题.我取消选择后再次显示相同的错误.

在Microsoft边缘

• 令人惊讶的是,升级后一切正常.

我的想法和期望

• 由于应用程序在MS边缘工作正常,我怀疑服务工作者配置或我轮询更新的方式有什么问题
• 我的期望是在/ ngsw/state中看到Drive状态为Normal

在以前版本的Angular服务工作者实现中,其中一个配置选项是"routing".这可以从这个未解决的SO问题中看出,在这个Angular CLI问题中被引用,最好的剩余文档似乎是Stephen Fluin(Angular团队)的博客文章,以及Alex Rickabaugh 的I/O演讲(来自谷歌).

使用Angular 5,ServiceWorkerModule已经很好地构建了,现在可以使用该ngsw-config.json文件处理大部分配置.但是,在angular.io指南或文档中的任何位置都不再提及如何处理路由的重定向.所以我最终遇到了以下问题:当我访问我的应用程序并离线时,我仍然可以直接访问该应用程序:https://jackkoppa.github.io/cityaq-sw-issue.但是,在加载时,应用程序重定向到search路由,并且大多数用户将尝试从https://jackkoppa.github.io/cityaq-sw-issue/search?cities=Shanghai这样的URL加载(为简单起见,我'我现在只谈论Chrome桌面和移动设备,并在可能的情况下使用Incognito.

当您尝试在离线时访问该URL时,您会立即获得504 - Gateway Timeout.发生这种情况是因为服务工作者只缓存了索引,并且不知道其他路由应该重定向到索引以便它可以加载.我相信Angular服务工作者实现的先前迭代可以通过设置重定向到给定路由的索引来处理这种情况.有没有办法在当前的Angular 5+ ngsw-config.json或生成的ngsw.json文件中处理此重定向？除此之外,如何在单独的服务工作者JS文件中处理变通方法？

我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/**"
      ]
    }
  }]
}

在我的网站上有一个指向RSS源的链接,该链接/api/rss应该在新的浏览器选项卡中打开而不加载Angular应用程序.如何将其从请求重定向到的资源列表中排除index.html？

UPD:我试过但没有使用以下配置(请参阅参考资料!/api/rss):

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "patterns": ["!/api/rss"],
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "!/api/rss"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    } …

我尝试在更新为angular 5之后将service worker添加到我的项目中并遇到一些问题.我将导入添加到app.module.ts:

import {ServiceWorkerModule} from '@angular/service-worker';
import {environment} from '../environments/environment';
...
environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [],

执行$ ng set apps.0.serviceWorker=true以允许项目中的服务工作者

生成配置:

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/",
        "/main",
        "/login",
        "/select-content"
      ],
      "cacheConfig": {
        "strategy": "performance", …

我有一个有角度的应用程序,只要我按照以下步骤添加serviceWorker:

https://github.com/angular/angular-cli/blob/master/docs/documentation/build.md#service-worker https://angular.io/guide/service-worker-getting-started

...我的API请求不再有Origin请求标头,这似乎导致我的API服务器不返回Access-Control-Allow-Origin响应标头,导致浏览器错误:

请求的资源上不存在"Access-Control-Allow-Origin"标头.

只需删除serviceWorker并取消注册即可将该行为恢复正常.

如何在继续使用我的restful API的同时实现serviceWorker？

所有的要求都受到了影响,但有些是"引擎盖下"的oidc-client; 所有其他人看起来像:

public getBook(bookId: number): Observable<Book> {
  const request = new HttpRequest(
    'get',
    `https://some-server.asurewebsites.net/api/book/${bookId}`,
    {
      reportProgress: true,
      responseType: 'json'
    }
  );
  return this.httpClient.request<any>(request).do(event => {
    this.progressService.processEvent(event);
  }).filter(event => event instanceof HttpResponse)
  .map((response: HttpResponse<any>) => deserializeBook(response.body)).catch(error => {
    if (error instanceof HttpErrorResponse) {
      if (error.status === 404) {
        return Observable.of(null);
      }
    }
    return Observable.throw(error);
  });
}
// note: other constraints require listening to progress from per-request level …

我正在尝试将服务工作者添加到我们现有的angular(5.2,CLI 1.7.1)应用程序中.我做了我想做的一切:

1. 我创建了ngsw-config.json
2. 我运行ng set apps.0.serviceWorker=true命令,所以我"serviceWorker": true,在angular-cli.json中.
3. 我安装了 "@angular/service-worker": "5.2.9"

4. 我添加到app.module.ts:

   import { ServiceWorkerModule } from '@angular/service-worker';
   imports: [
       ...
       ServiceWorkerModule.register('/ngsw-worker.js', 
           { enabled: environment.production }),
   ]
   

   Run Code Online (Sandbox Code Playgroud)

我甚至试图将这段代码(我在某处找到解决方案)添加到main.ts中

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    if ('serviceWorker' in navigator && environment.production) {
        navigator.serviceWorker.register('/ngsw-worker.js');
    }
}).catch(err => console.log(err));

但我得到了这个错误:

未捕获(在promise中)DOMException:无法注册ServiceWorker:脚本具有不受支持的MIME类型('text/html').

错误:未捕获(在承诺中):SecurityError:无法注册ServiceWorker:脚本具有不受支持的MIME类型('text/html').at resolvePromise(polyfills.3e9ea997ddae46e16c09.bundle.js:1)

在我自己的个人小应用程序中,我做了同样的工作,没有任何错误.我们遇到此错误的应用程序非常庞大.有很多第三方库.我读过它们可能有问题.

你能帮我吗？

此外,我正在检查我自己的应用程序以找到可能的差异,我没有,但我查看了devtools中的网络选项卡,我注意到应该由服务工作者缓存的文件总是被加载.请问这是正确的行为吗？

我有一个使用 Angular Service Worker（7.2.12 版）的 Angular 应用程序（7.2.2 版）。

Service Worker 会间歇性地提供旧版本的应用程序。刷新时显示新版本，但如果用户关闭并重新打开浏览器选项卡，它会恢复到旧版本，直到下一个页面重新加载。'/ngsw/state' 页面在显示旧版本时也没有错误。

我一直没有成功地重现这个问题。部分原因是我不确定原因。我经常几周没有让 service worker 提供旧版本的代码。

我尝试过的一些看起来很有希望的潜在解决方案包括：

• 将 angular 和 service worker 更新到最新版本（当时）。
• 从 ngsw-config.json 中删除缓存以防止哈希不匹配。
• 在多个代码位置添加更新检查。
• 每隔一段时间检查更新。
• 当有更新可用时强制重新加载——有时会发生这种情况，但有时需要手动重新加载才能获得新版本。

我有一个 Angular 11 应用程序，正在使用以下命令构建用于在生产中部署：

npm install
npm run build -- --prod --outputHashing=all

我遇到的问题是，部署后，当我使用浏览器访问应用程序的 URL 时，我仍然看到该应用程序的旧版本。

我最初认为这是一个缓存问题，即使我使用该--outputHashing=all选项进行编译（据我所知，该选项似乎正在工作，dist文件夹中的输出文件似乎具有随机文件名）。情况似乎是这样：如果我在 Chrome 开发选项中禁用缓存后刷新页面，它现在会显示更新的应用程序。

然而，问题是：如果我关闭浏览器并再次打开它......我会回到旧的应用程序！因此，清除缓存似乎是一种临时解决方案。

经过进一步调查，我怀疑它与 Angular 相关service workers，因为当我打开 Chrome 的开发工具加载页面时，我可以看到很多网络调用被标记为Served from service worker.

然而，我还不够 Angular 专家，不知道如何进一步诊断。我已经阅读了 Angular 网站上有关 Service Worker 的文档，但它并没有帮助我弄清楚问题到底出在哪里。有人能指出我正确的方向吗？这是我的服务工作线程配置文件，它是在创建应用程序时自动生成的。如果我还需要提供其他文件，请告诉我：

{
  "$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/**", …

我正努力让我的服务器端渲染和服务工作者在服务器端合作.

有关localhost的信息 - >工作

这是按预期工作的.服务工作人员在每次更新时都会工作并更新我的应用.此外; 一个curl localhost:8082送我回我的信息.

我用以下命令启动我的应用程序: npm run ssr

 "ssr": "npm run build:ssr && npm run serve:ssr",
 "build:ssr": "npm run build:client-and-server-bundles",
 "serve:ssr": "node dist/server.js",
 "build:client-and-server-bundles": "ng build --prod && npm run webpack:server",
 "webpack:server": "webpack --config webpack.server.config.js --progress --colors"

有关生产的信息: - >不工作

网站是通过HTTPS:https: //airdropers.io网站进程在关闭端口上运行,并且HAPROXY将流量从443重定向到网络服务器的端口

Webserver日志上显示问题:无法订阅通知错误:此浏览器禁用或不支持服务工作者

额外信息:

localhost和production上的节点js是相同的:v9.0.0我使用以下过程构建生产:

1. git pull
2. npm run build:ssr
3. pm2 start dist/server.js

更新23/02/2019

我现在有了更深刻的理解.我的问题是我使用节点命令启动我的SSR/PWA服务器,例如"node dist/server.js".

从我的理解"node dist/server.js"不适用于服务工作者(PWA)我引用(https://angular.io/guide/service-worker-getting-started)

由于ng服务不适用于服务工作者,因此必须使用单独的HTTP服务器在本地测试项目.您可以使用任何HTTP服务器.以下示例使用来自npm的http-server软件包.要减少冲突的可能性并避免提供过时的内容,请在专用端口上进行测试并禁用缓存.

我无法启动是http-server dist/browser因为我将失去SSR能力.

如何启动PWA/SSR服务器？我应该使用什么命令？
我应该做什么？

更新24/02/2019

正如@GökhanKurt提到的那样,服务工作者无法正常使用我的SSR服务器.我需要SSR用于搜索引擎优化,我需要一个服务工作者来进行浏览器推送通知.我有什么解决方案来处理浏览器用户推送通知？One Signals等第三方lib？

我们欢迎任何想法建议,以帮助我完成这项工作.感谢您的支持,Alex