标签: service-worker

所以,我有一个带有服务工作者的HTML页面,服务工作者缓存index.html和我的JS文件.

问题是当我更改JS时,更改不会直接显示在客户端浏览器上.当然在chrome dev-tools中,我可以禁用缓存.但在Chrome手机中,我该怎么做？

我尝试访问网站设置并点击CLEAR%RESET按钮.但它仍然从缓存加载旧页面/加载.我尝试使用其他浏览器或Chrome隐身,它会加载新页面.

然后,我尝试清除我的浏览数据(只是缓存),它的工作原理.

我想这不是它应该如何正常工作？我的用户在不清除Chrome浏览器缓存的情况下不知道页面是否更新.

将@angular/pwa 添加到我的应用程序后

ng add @angular/pwa --project appName

我得到错误

core.js:34469 未捕获的类型错误：无法读取 registerNgModuleType 处未定义的属性“id”

如果我appName.module.ts从进口中移除

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

应用程序再次运行。

添加了 Angular.json

"serviceWorker": true,
"ngswConfigPath": "projects/tol5-admin-app/ngsw-config.json"

这是我的 package.json

 "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/cdk": "~8.2.2",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.2.5",
    "@angular/material": "^8.2.2",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "@angular/service-worker": "~8.2.5",
    "@ngrx/effects": "^8.3.0",
    "@ngrx/schematics": "^8.4.0",
    "@ngrx/store": "^8.3.0",
    "@ngrx/store-devtools": "^8.3.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": { …

我正在尝试将我的浏览器扩展（我希望在 Chrome 和 Firefox 上运行）从清单 v2 迁移到 v3。

但是，我收到有关该background部分的相互矛盾的信息。我对谷歌和堆栈溢出做了很多研究，但似乎没有人在任何事情上达成一致。此外，大多数信息似乎已经过时。在我找到的最好的来源中，很多地方都提到它应该迁移到service_worker（example），但 Firefox 似乎仍然应该使用scripts（source）。

但无论我做什么，我都会遇到错误。如果我只使用 Service Worker：

"background": {\n    "type": "module", // tried both with and without this option\n    "service_worker": "background.ts"\n}\n

来自的构建命令parcel很高兴（似乎在下面使用parcel/transformer-webextension），但web-ext灾难性地失败了：

WebExtError: installTemporaryAddon: Error:\nError: Could not install add-on at \'...\':\nError: background.service_worker is currently disabled\n

即使我提供了--firefox-preview应该解决此问题的标志。

这有点有道理，这篇写得很好的教程声称 Firefox 继续使用scriptsV3，只是弃用了该persisent标志（您可以删除该标志或将其设置为 false）。没关系，因为无论如何我都没有使用它。

"background": …

我熟悉http状态代码,但最近我在chrome调试器中看到了一个奇怪的行.而不是普通的,Status Code:200 OK我看到了以下内容:Status Code:200 OK (from ServiceWorker).

我的猜测是,这只是告诉我ServiceWorker以某种方式负责访问这个文档,但这只是随机猜测.任何人都可以权威地(没有猜测,链接到受尊重的资源)告诉我这是什么意思和含义是什么？

我正在尝试Service Worker在测试页面中实现一个.我的最终目标是离线操作的应用程序.文件夹结构如下

/myApp
  ...
  /static
    /mod
      /practice
        service-worker.js
        worker-directives.js
        foopage.js
  /templates
    /practice
      foopage.html

我正在注册服务工作者,如下所示(内service-worker.js):

navigator.serviceWorker.register('../static/mod/practice/service-worker.js').then(function(reg) {
    console.log('Registration succeeded. Scope is ' + reg.scope);
    ...
}

在控制台中,我看到了

Registration succeeded. Scope is https://example.com/static/mod/practice/

如果我的页面位于https://example.com/practice/foopage,我是否需要确保我的service worker范围是https://example.com/practice/foopage？

如果我尝试在register函数调用中定义范围,如

navigator.serviceWorker.register('../static/mod/practice/service-worker.js', { scope: '/practice/foopage/' }).then(function(reg) {
    ...
}

我收到了错误

Registration failed with SecurityError: Failed to register a ServiceWorker: The path of the provided scope ('/practice/foopage/') is not under the max scope allowed ('/static/mod/practice/'). Adjust …

Service Worker和Shared Worker有什么区别？

什么时候应该使用Service Worker而不是Shared Worker,反之亦然？

我正在尝试使用Firebase消息传递(Web).Firebase默认搜索保存服务工作者的文件"firebase-messaging-sw.js".

服务工作者脚本应该位于应用程序的绝对路径上!例如:http://localhost/firebase-messaging-sw.js

如何更改此默认位置？!搜索官方文档我发现这个方法:useServiceWorker接受服务工作者注册,但尝试使用它我得到一个错误,该方法甚至不存在!

那么,如何更改服务工作者的位置以进行firebase消息传递？

升级到Chrome 64后,我意识到当我在新标签页上加载页面时会出现此错误.

我无法确定它在服务工作者身上的位置.这是我运行fetch的代码:

self.addEventListener('fetch', function(event) {
   if (event.request.url.startsWith(self.location.origin)) {
       event.respondWith(
           caches.match(event.request).then(function(response) {
              return response || fetch(event.request).then(function(fetch_resp){
                  return fetch_resp;
              });
           })
       );
   }
});

在这里,对服务工作者有更多了解的人能帮助我解决这个错误吗？

在以前版本的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文件中处理变通方法？

在我的第一个vue项目试图与官方PWA插件(https://github.com/yyx990803/register-service-worker)搏斗.我的具体问题:捕获已注册的服务工作者并将其用于任何事情.github自述文件显示了生成的确切文件,并且在实例化后,似乎没有关于如何使用此服务工作者的文档(我是否捕获了注册实例？如果是,如何？)

我发现了这个问题:https://github.com/vuejs/vue-cli/issues/1481 并提供了一个更好的讨论这个问题的地方,因为我找不到任何示例代码或明确的文档如何与此合作.

如果有人有一些示例代码,请分享.Vue和新的cli是令人难以置信的工具,记录这样的事情是增加平台采用的必要步骤