Service Worker在首次加载时未缓存API内容

詹姆斯·艾夫斯

我创建了一个启用了Service Worker的应用程序,该应用程序旨在缓存来自AJAX调用的响应,以便可以脱机查看。我遇到的问题是服务工作者会缓存页面,但第一次加载页面时不会缓存AJAX响应。

如果您访问http://ivesjames.github.io/pwa并在SW祝酒后切换到飞行模式,则该API将不会显示API内容。如果您返回在线并加载页面并再次执行,它将在第二次加载时离线加载API内容。

这就是我用来缓存API响应的内容(通过Polymer文档获取):

(function(global) {

  global.untappdFetchHandler = function(request) {
    // Attempt to fetch(request). This will always make a network request, and will include the
    // full request URL, including the search parameters.
    return global.fetch(request).then(function(response) {
      if (response.ok) {
        // If we got back a successful response, great!
        return global.caches.open(global.toolbox.options.cacheName).then(function(cache) {
          // First, store the response in the cache, stripping away the search parameters to
          // normalize the URL key.
          return cache.put(stripSearchParameters(request.url), response.clone()).then(function() {
            // Once that entry is written to the cache, return the response to the controlled page.
            return response;
          });
        });
      }

      // If we got back an error response, raise a new Error, which will trigger the catch().
      throw new Error('A response with an error status code was returned.');
    }).catch(function(error) {
      // This code is executed when there's either a network error or a response with an error
      // status code was returned.
      return global.caches.open(global.toolbox.options.cacheName).then(function(cache) {
        // Normalize the request URL by stripping the search parameters, and then return a
        // previously cached response as a fallback.
        return cache.match(stripSearchParameters(request.url));
      });
    });
  }
})(self);

然后在sw-import中定义处理程序:

  <platinum-sw-import-script href="scripts/untappd-fetch-handler.js">

  <platinum-sw-fetch handler="untappdFetchHandler"
                     path="/v4/user/checkins/jimouk?client_id=(apikey)&client_secret=(clientsecret)"
                     origin="https://api.untappd.com">
  </platinum-sw-fetch>

    <paper-toast id="caching-complete"
                 duration="6000"
                 text="Caching complete! This app will work offline.">
    </paper-toast>

    <platinum-sw-register auto-register
                          clients-claim
                          skip-waiting
                          base-uri="bower_components/platinum-sw/bootstrap"
                          on-service-worker-installed="displayInstalledToast">
      <platinum-sw-cache default-cache-strategy="fastest"
                         cache-config-file="cache-config.json">
      </platinum-sw-cache>
    </platinum-sw-register>

我哪里出问题了?我不太确定为什么它能在负载#2而不是负载#1上工作。

任何帮助,将不胜感激。

杰夫·波斯尼克

尽管skip-waiting+clients-claim属性应该使您的服务工作者尽快进行控制,但它仍然是一个异步过程,只有在您发出AJAX请求之后才能启动。如果要保证服务人员可以控制页面,那么您需要将AJAX请求延迟到服务人员获得控制权之后(例如,采用这种方法),或者可以使用的reload-on-install属性

同样重要的是,请确保您的<platinum-sw-import-script><platinum-sw-fetch>元素是元素的子<platinum-sw-register>元素,否则它们将不会达到预期的效果。这在文档中已提及,但不幸的是,这只是运行时的无提示故障。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Service Worker在首次加载时未缓存API内容

来自分类Dev

首次加载后,Service Worker缓存会中断PDF

来自分类Dev

Service Worker 缓存太多

来自分类Dev

如何在使用Service Worker时缓存Google Maps之类的API

来自分类Dev

Polymer Service Worker 预缓存

来自分类Dev

在删除Workbox Service Worker中的其他缓存时保留预缓存

来自分类Dev

Service Worker和透明缓存更新

来自分类Dev

使用Service Worker预缓存静态文件

来自分类Dev

更改预缓存URL的/ Service Worker范围

来自分类Dev

Service Worker更新,但旧文件仍被缓存

来自分类Dev

如何告诉Service Worker缓存哪些文件

来自分类Dev

不支持 Service Worker 的缓存破坏

来自分类Dev

Workbox Service Worker 重复加载还是不从缓存中读取?

来自分类Dev

有什么方法可以让 Service Worker 在每次网站更新时删除设备上的缓存?

来自分类Dev

Service Worker 实现架构?

来自分类Dev

GAE 上的 Service Worker

来自分类Dev

Angular Service矩形缓存

来自分类Dev

在Service Worker中获取API错误

来自分类Dev

在域下导航时如何停止添加未在 Service Worker 中声明的内容

来自分类Dev

无法播放来自Service Worker的缓存的音频

来自分类Dev

Angular Service Worker和index.html缓存

来自分类Dev

Service Worker:检查缓存的资源是最新的还是最新的

来自分类Dev

如何使用 Service Worker 缓存虚拟文件?

来自分类Dev

Service Worker 可以访问浏览器缓存吗?

来自分类Dev

未调用Angular Service

来自分类Dev

Service Worker html 响应未显示在浏览器上

来自分类Dev

Vaadin 14 - 未创建 Service Worker 和清单

来自分类Dev

如何屏蔽 Google Service Worker?

来自分类Dev

.NET Core 3.1 Worker Service-在发布时设置EnvironmentName

Related 相关文章

热门标签

归档