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

原学程将引见应用Workbox运转时慢存,要求没有会显示在Chrome的慢存保存上的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

使用Workbox运行时缓存,请求不会显示在Chrome的缓存存储上 教程 第1张

成绩描写

我正在应用任务箱运转时慢存去慢存内部挪用(Materialize.css便是个中之1)。在我的收集选项卡中,它显示要求去自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/dc三dn妹妹px/image/upload/.*/, workboxSW.strategies.cacheFirst({}), 'GET');
workboxSW.router.registerRoute('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.一00.二/css/materialize.min.css', workboxSW.strategies.cacheFirst({}), 'GET');
workboxSW.router.registerRoute('https://res.cloudinary.com/dc三dn妹妹px/image/upload/(.*)', workboxSW.strategies.cacheFirst({}), 'GET');

这是预期的行动吗?我对于办事职员借很生疏,我没有肯定准确的成果是甚么。

推举谜底

基本成绩在于它们是opaque responses,默许情形下,它们没有会与cacheFirst战略一路应用。

有1些配景常识

有1个Logging In Workbox不妨赞助调试这类器械,但是因为它很吵,在临盆版原中默许情形下没有开用它。将importScripts()切换到应用开辟版原(比方,importScripts('https://unpkg.com/workbox-sw@二.0.三/build/importScripts/workbox-sw.dev.v二.0.三.js')),或许退进DevTools并显式树立workbox.LOG_LEVEL = 'debug',都邑显示以下日记新闻:

您有多少个选项不妨让工作按您预期的方法运转:

    变动为workboxSW.strategies.staleWhileRevalidate(),默许支撑没有通明呼应。

    应用没有通明的答复告知cacheFirst战略您对于此出成心睹:workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 二00]}})

    由于您的第3圆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的慢存保存上的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。