标签: service-worker

我读取服务工作者的离线缓存类似于浏览器缓存.那么为什么更喜欢服务工作者进行这种缓存.甚至浏览器缓存也会检查是否修改了文件,然后从缓存中提供服务,而服务工作者则从我们的代码中处理相同的事情.但默认情况下浏览器具有该功能,为什么更喜欢服务工作者？

我正在玩我的计算机中的服务工作者API,所以我可以掌握如何在我的真实应用程序中从中受益.

我遇到了一个奇怪的情况,我注册了一个拦截fetch事件的服务工作者,因此它可以在向源发送请求之前检查其缓存中是否有所请求的内容.问题是这段代码有一个错误,导致函数无法发出请求,因此我的页面留空; 什么都没发生.由于服务工作者已经注册,第二次加载页面时它会拦截第一个请求(加载HTML的请求).因为我有这个错误,那个fetch事件失败了,它从不会请求HTML,所有我都看到它是一个空白页面.

在这种情况下,我知道删除坏服务工作者脚本的唯一方法是通过chrome://serviceworker-internals/控制台.如果此错误进入实时网站,这是解决它的最佳方法吗？

谢谢!

我刚刚尝试实现服务工作者在静态站点上缓存一些JSON文件和其他资产(在localhost chrome版本47.0.2526.73(64位)上运行).使用cache.addAll()我已将文件添加到缓存中,当我打开chrome中的资源选项卡,然后单击缓存存储时,将列出所有文件.

我遇到的问题是我的服务工作者在chrome:// service-worker-internals中被列为"激活"和"正在运行"但是,我无法确定该工作者是否实际上正在拦截请求并提供缓存文件.我添加了事件监听器,即使我在服务工作者开发工具实例中控制日志事件,它也永远不会遇到断点:

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      console.log(cache);
      return cache.addAll([
        '/json/0.json',
        '/json/1.json',
        '/json/3.json',
        '/json/4.json',
        '/json/5.json',
      ]);
    })
  );
});

this.addEventListener('fetch', function(event) {
  console.log(event);
  var response;
  event.respondWith(caches.match(event.request).catch(function() {
    return fetch(event.request);
  }).then(function(r) {
    response = r;
    caches.open('v1').then(function(cache) {
      cache.put(event.request, response);
    });
    return response.clone();
  }).catch(function() {
  }));
});

基本上我正在完成HTML5摇滚服务工作者介绍中描述的事情,但我很确定我的资产不是从缓存中提供的.我已经注意到,服务工作者提供的资产在size列中的devtools的网络选项卡中通过指示"来自服务工作者"来注明.

看起来好像我的代码与示例没什么不同,但是由于某些原因它并没有达到fetch事件.我的代码的要点:https://gist.github.com/srhise/c2099b347f68b958884d

在我的Progressive Web App中,我应该在服务工作者中使用Cache API来获取我的静态资产,还是应该依赖浏览器的本机缓存控制？有什么不同？

我在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)？我必须在配置中更改任何内容吗？

在Chromium关于服务工作者的网页上,有人指出

iOS上的Chrome不支持服务工作者.

我假设它可以使用一些cordova插件传送到iOS.在iOS设备上有没有其他方法可以使用Service Workers？
我担心在iOS上发布新版本和新版本的cordova之间的时间.

有谁知道iOS上的Chrome是否会在未来支持服务工作者？:)

MDN建议您执行以下操作来创建和填充服务工作缓存:

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        ... etc ...
      ]);
    })
  );
});

我不明白那段代码.该waitUntil方法也被记录,似乎上面的代码是它目前存在的唯一目的:

ExtendableEvent.waitUntil()方法可延长事件的生命周期.当相关的安装事件的事件处理程序调用时,它会延迟治疗的安装工所安装,直到通过无极成功解析.这主要用于确保在填充所依赖的所有核心缓存之前不会考虑安装服务工作者.

我不明白的是:

• waitUntil一般如何影响代码流？是否会阻止事件传播直到它的承诺结算？
• 为什么在打开工作缓存的环境中需要它？

我问这个问题,因为我上面的代码有问题,我想了解它.

我成功注册了一个服务工作者,但接着是代码

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already have a push message subscription?
    ....

挂起 - 永远不会调用该函数.为什么？

我一直在阅读html5rocks服务工作者文章简介,并创建了一个基本的服务工作者来缓存页面,JS和CSS按预期工作:

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/'
];

// Set the callback for the install step
self.addEventListener('install', function (event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // IMPORTANT: Clone the request. A request is a stream and
        // can only be consumed once. Since …

我想在我的Cordova Android添加中使用服务工作者作为一种方便的方式来与服务器同步一些图像.我注意到这个问题表明这是不可能的,因为服务工作者必须通过加载https:,而Cordova将通过加载文件file:.

另一方面,似乎离子支持服务工作者.这意味着他们已经找到了一些方法来完成这项工作.但是,我不使用离子.对于iOS的服务工作者来说似乎有一个cordova插件,但正如我所说,我在Android上.

如果可能的话,在Cordova Android应用程序中使用服务工作者的当前最佳做法是什么？