使用Workbox运行时缓存,请求不会显示在Chrome的缓

Using workbox runtime caching, requests are not showing on cache storage on chrome(使用Workbox运行时缓存,请求不会显示在Chrome的缓存存储上)

本文介绍了使用Workbox运行时缓存,请求不会显示在Chrome的缓存存储上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用工作箱运行时缓存来缓存外部调用(Materialize.css就是其中之一)。在我的网络选项卡中,它显示请求来自serviceWorker(看起来很好):

但在缓存存储上,我的运行时缓存看起来是空的:

您可以在chromes的应用程序选项卡上看到我的服务人员,这是网站:https://quack.surge.sh/

服务人员编码:

const workboxSW = new self.WorkboxSW();
workboxSW.precache(fileManifest);
workboxSW.router.registerNavigationRoute("/index.html");workboxSW.router.registerRoute(/^https://res.cloudinary.com/dc3dnmmpx/image/upload/.*/, workboxSW.strategies.cacheFirst({}), 'GET');
workboxSW.router.registerRoute('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css', workboxSW.strategies.cacheFirst({}), 'GET');
workboxSW.router.registerRoute('https://res.cloudinary.com/dc3dnmmpx/image/upload/(.*)', workboxSW.strategies.cacheFirst({}), 'GET');

这是预期的行为吗?我对服务人员还很陌生,我不确定正确的结果是什么。

推荐答案

根本问题在于它们是opaque responses,默认情况下,它们不会与cacheFirst策略一起使用。

https://workboxjs.org/how_tos/cdn-caching.html

有一些背景知识 有一个Logging In Workbox可以帮助调试这类东西,但由于它很吵,在生产版本中默认情况下不启用它。将importScripts()切换到使用开发版本(例如,importScripts('https://unpkg.com/workbox-sw@2.0.3/build/importScripts/workbox-sw.dev.v2.0.3.js')),或者进入DevTools并显式设置workbox.LOG_LEVEL = 'debug',都会显示如下日志消息:

您有几个选项可以让事情按您预期的方式运行:

  • 更改为workboxSW.strategies.staleWhileRevalidate(),默认支持不透明响应。
  • 使用不透明的回复告诉cacheFirst策略您对此没有意见:workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}})
  • 因为您的第三方CDN似乎都支持CORS,您可以通过crossorigin属性为您的css和图片请求选择CORS模式,响应将不再是不透明的:<img src='https://cors.example.com/path/to/image.jpg' crossorigin='anonymous'><link rel='stylesheet' href='https://cors.example.com/path/to/styles.css' crossorigin='anonymous'>

这篇关于使用Workbox运行时缓存,请求不会显示在Chrome的缓存存储上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:使用Workbox运行时缓存,请求不会显示在Chrome的缓

基础教程推荐