对于缓存，我们并不陌生，但是我们想有主观意识的缓存，我想缓存什么，缓存多久，缓存和请求资源的策略是什么都有自己来定，service worker 能帮我们做到。...相信大多人看到这些概念是蒙的，我们只需要围绕一个概念：缓存 ，并且是策略性的，存什么是可以控制的，也给我们开发离线应用提供了思路。 使用Workbox 还记得那个 sw.js 文件吗？...开始使用Workbox Workbox 定义了标准统一API，我们来看如何借助它提供的API逐步优化项目 路由请求定义缓存 在 Workbox 中，最核心的概念要数基于路由的策略缓存了，这里抓住两个关键词...就会有针对匹配该路由的资源定义不同的关于缓存的策略，比如，我们要求指定资源 网络请求优先 workbox.routing.registerRoute( /\.js$/, new workbox.strategies.NetworkFirst...() ); 此时如果在项目中引入了js文件，这个缓存便会生效，假设项目引入 hello.js console.log('hello js file') 在html中引入 <script src=".
目前常见的缓存方式有http缓存、memory cache、disk cahce、localstorage、Service worker缓存等方式，本文介绍的Workbox就是实现Service worker...和 workbox.core.cacheNames.runtime 获取当前定义的预缓存和动态缓存名称。...，可以用workbox封装的缓存策略处理函数，也可以自定义，上述示例就是使用的workbox内部封装的CacheFirst缓存策略。...workbox，通过配置来定制化我们的缓存。..., }); // 更新时自动生效 clientsClaim(); // 预缓存文件，self.
(CDN Mode) 其实很简单, 项目根目录放置一段 service-worker 的入口: if ('serviceWorker' in navigator) { // Use the window...navigator.serviceWorker.register('service-worker.js'); }); } 然后新建一个文件 service-worker.js , 你们可以写上一个最简单的...这个库会暴露几个方法, 其中主要关注以下几个方法: Stale While Revalidate 优先使用缓存, 如果缓存存在则使用, 并且同时请求网络, 在后台更新缓存....如果缓存不存在则要等待网络请求结束 Network First 先请求网如果网络成功则会加入缓存, 如果网络失败直接使用缓存 Cache First 先拦截请求, 并查看缓存, 如果返程存在则直接使用,...需要将 importScripts 方法放置在 navigator.serviceWorker.register('xxx.js'); 这一行这里注册的 xxx.js 这个 service-worker
Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...首先确定正在处理的请求是否符合条件，如果符合，则对其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略，也可以创建自己的策略。...采用缓存优先的策略来缓存图像，将缓存的图像存储在名为 images 的缓存中，30 天过期，并且一次只允许 50 个。...预缓存 除了在发出请求时进行缓存（运行时缓存）之外，Workbox 还支持预缓存，即在安装 Service Worker 时缓存资源。...离线回退 让 Web 应用在离线工作时感觉更健壮的常见模式是提供一个后退页面，而不是显示浏览器的默认错误页面。通过 Workbox 路由和预缓存，你可以在几行代码中设置这个模式。
然后基于google推出的第三方库workbox，在产品中进行运用实践，并对其原理进行简要剖析。 前端缓存简介 先简单介绍一下现有的前端缓存技术方案，主要分为http缓存和浏览器缓存。...应用缓存 应用缓存主要是通过manifest文件来注册被缓存的静态资源，已经被废弃，因为他的设计有些不合理的地方，他在缓存静态文件的同时，也会默认缓存html文件。...); precache workbox的缓存分为两种，一种的precache，一种的runtimecache。...缓存策略 workbox提供的缓存策划有以下几种，通过不同的配置可以针对自己的业务达到不同的效果： staleWhileRevalidate 这种策略的意思是当请求的路由有对应的 Cache 缓存结果就直接返回.../kg/workbox/3.3.0/' }); //直接激活跳过等待阶段 workbox.skipWaiting(); workbox.clientsClaim(); //定义要缓存的html var
管理资源缓存 浏览器提供了很多存储相关的 H5 API，比如 application cache、localStorage，但都不是非常好用，主要是给予页端的控制权太少，限制太多，页端不能完全控制每一个资源请求的存储逻辑...如何灵活地控制缓存，可以参考 Google 官方文章 《The Offline Cookbook》。 1.4....worke 文件并且注入相应配置到 webpack pipline, 适合简单的配置需求 InjectManifest插件将生成一个预先缓存的URL列表，并将该预先缓存清单添加到现有的服务工作文件中，...({modulePathPrefix: "/workbox-v3.6.2"}); 4.2 人工配置的文件部分 // continue // dist/service-worker.js workbox.core.setCacheNameDetails...__precacheManifest, {}); // html的缓存策略 workbox.routing.registerRoute( new RegExp('.*\.(?
装配了PWA以后，用户可以将网站作为WEB APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。本文讨论的是使用两种方案实现PWA。...使用workbox:这个插件需要配合gulp插件，所以配置较为繁琐，好处是可以自定义适配弹窗提示，适合对前端有一定了解的用户。如果你还有使用pjax，恭喜你，BUG御三家马上就可以集齐了。 ?...可以通过Chrome插件Lighthouse检查PWA配置是否生效以及配置是否正确。...butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache}改为{cache: true}: 将之前生成的图标包移入相应的目录，例如我是/...这里的theme_color建议改成你图标的主色调，包括manifest.json中的theme_color也是如此。 运行以下指令 运行hexo g之后必须运行gulp指令，不然PWA不会生效！
SW的API并不简单，从0开始去规划一个项目的本地资源缓存的SW代码是一个相当大的工程，好在Google已经有完善的解决方案，那就是workbox，它提供了很多工具来帮助我们对请求的资源进行管理和缓存。...5.3.1、workbox-routing 这是最重要的工具，是一定要安装的，它负责拦截我们发出去的请求，然后对这些个请求，进行相应的缓存处理。...这个更少用到了，它要求你提前缓存里就有对应的资源才行，需要配合workbox的另一个功能 precache 使用，这里不做展开。...5.3.3、workbox-expiration 这里面提供了一些供缓存策略实例使用的插件（就如上一节里提到的，缓存策略实例化的时候，传入的options里可以有plugins选项），使用例子如下： import...5.3.4、workbox-cacheable-response 这个里面提供的插件的使用已经在 5.3.2 那一节提到，就是帮助我们根据状态码，选择性的将网络请求的资源包塞到缓存里。
Workbox 由于直接写原生的sw.js，比较繁琐和复杂，所以一些工具就出现了，而workbox是其中的佼佼者，由google团队推出。...在 Workbox 之前，GoogleChrome 团队较早时间推出过 sw-precache 和 sw-toolbox 库，但是在 GoogleChrome 工程师们看来，workbox 才是真正能方便统一的处理离线能力的更完美的方案...workbox缓存策略 workbox.strategies，有如下属性：staleWhileRevalidate networkFirst cacheFirst networkOnly cacheOnly...workbox原理 通过Proxy按需依赖 熟悉了workbox后会得知，它是有很多个子模块的，各个子模块再通过用到的时候按需importScript到线程中。...做到按需依赖的原理就是通过Proxy对全局对象workbox进行代理： new Proxy(this, { get(t, s) { //如果workbox对象上不存在指定对象，就依赖注入该对象对应的脚本
建议不要在开发模式下启用ServiceWorker，因为这可能导致使用以前缓存的资源而不包括最新的本地更改的情况。...如果需要在本地测试service worker，请构建应用程序并从构建目录运行一个简单的HTTP服务器。为了避免浏览器缓存的复杂性，推荐新打开一个窗口。...InjectManifest允许您从现有的service worker文件开始， 并创建该文件的副本，并将“预缓存清单”注入其中。...这些配置都是 workbox-webpack-plugin的配置，更多关于值的信息需要点击查下面的文档指南。...swSrc: 'dev/sw.js', // ...other Workbox options... } } } 在已创建的项目中安装 vue add pwa 注入webpack-chain
Workbox 是一组库，可以帮助开发者编写 Service Worker，通过 CacheStorage API 缓存资源。...如何使用 Workbox？ Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...首先确定正在处理的请求是否符合条件，如果符合，则对其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略，也可以创建自己的策略。...采用缓存优先的策略来缓存图像，将缓存的图像存储在名为 images 的缓存中，30 天过期，并且一次只允许 50 个。 3.
配置模式 比如使用DNS进行切换，DNS生效存在延迟，但也没有更好的办法，因为需要切换DNS时通常是Region级别的故障。 还有一种情况是应用间交互是直连的方式，比如TDDL。...配置的更新被同步到Client，会很快生效。 探活（发现灾难） 多副本冗余是前提，故障转移是修复能力。在一切就绪后，什么时候进行故障转移呢？ 所以我们还需要探活，用于判断是否存在故障。...通常业务应用都是设计成无状态的，有状态的应用最典型的就是数据库和分布式存储。 那缓存系统属于哪种呢？缓存系统也属于无状态的应用。因为缓存系统并不保证数据准确。...无状态应用的容灾 因为是无状态的应用，所以它可以可以快速扩容(Scale Out)，在故障转移上也非常便捷。 它的关键在于: 1. 有足够的可用副本。 2. 故障转移简单，前置条减少。...有状态应用的容灾 首先，有状态系统需要具备无状态系统的能力。让可靠的副本承接流量是最优方案。 相比无状态应用，有状态应用的故障转移有前置条件，就是副本数据可靠。否则会影响数据质量。
支持 运行时缓存runtimeCaching，Workbox 的强大所在，阅读这些内容会使你更好地了解如何配置以及具体能做什么： Workbox Routing Workbox Strategies...Workbox Cache Expiration iconPaths 该设置项可以自定义在页面中添加的一些图标的或中指定的文件路径 public/icons中有安装插件时生成的默认图标...就会 skipWaiting 但实际情况是，最终生成的 SW 中并没有这一段代码（也并没有放置在其他 js 中），我猜测这可能是因为加入代码的这一特性是 Workbox 4 才加入的，而插件生成的 SW...引用的是 Workbox 3 的缘故…… 对于这个问题有两种可能的解决方法： 将workboxPluginMode设置为InjectManifest，然后自己指定一个 SW 里面加上该代码内容 从谷歌那里下载最新的...Workbox 放置在项目内，并配置workboxOptions中的importWorkboxFrom为disable，然后在importScripts中指定本地workbox-sw.js的路径 接着在
blog\source\sw.js目录下添加sw.js,键入以下内容 importScripts('https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js...'); if (workbox) { workbox.setConfig({ modulePathPrefix: 'https://g.alicdn.com/kg/workbox/3.3.0/...' }); workbox.precaching.precache(['/', '/index.html']); workbox.routing.registerRoute(new...$'), workbox.strategies.networkFirst()); workbox.routing.registerRoute(new RegExp('.*.html'), workbox.strategies.networkFirst...和 manifest.json 与之对应 推荐图片大小转换网站：iloveimg 最后输入以下内容即可 # 清理缓存/生成静态页面/本地预览 $ hexo clean && hexo g && hexo
在学习过程中发现，想要弄明白WorkBox，有一点很关键，我们需要搞懂Service Worker。...我们能所学到的知识点 ❝ 前置知识点 service workers 能为我们带来什么 Service worker 的生命周期 Service worker 缓存策略 Service Worker 预缓存的陷阱...前置知识点 ❝「前置知识点」，只是做一个概念的介绍，不会做深度解释。因为，这些概念在下面文章中会有出现，为了让行文更加的顺畅，所以将本该在文内的概念解释放到前面来。...处理存储配额应该是Service Worker开发的一部分，而 Workbox 使这个过程比自行管理更简单。不管是否使用 Workbox，模拟自定义存储配额以测试缓存管理逻辑可能是一个不错的主意。...一旦生效，Chrome 将执行自定义存储配额以进行测试。 这个子面板还包含一个清除站点数据按钮以及一整套相关的复选框，用于在单击按钮时清除哪些内容。
版本 vite 4.4.4 vite-plugin-pwa 0.16.4 原因 VITE+PWA默认缓存最大的文件大小为2 * 1024 * 1024字节 如果构建出来的某个文件大于2M则会告警，...export default defineConfig({ plugins: [ ..., VitePWA({ ..., workbox...: { ..., // 添加此项配置，增加需要缓存的最大文件大小 maximumFileSizeToCacheInBytes...: 4 * 1024 * 1024 }, ... }) ], ... }) 相关问题 由于部分文件没有预缓存，在更新站点的之后...原因是页面文件缓存了，但页面文件引用的资源文件没有预缓存，重新构建部署后，缓存的页面无法按照原资源文件地址下载对应资源文件，PWA更新完成后重新加载站点，更新的页面文件使用新的资源文件地址就能正确下载对应资源文件了
缓存使用：native app 主要是对 sqlite 缓存，以及文件读写操作，而 PWA 对缓存数据库操作支持的非常好，足以应对各种场景。 基本能力补齐，比如推送。...现在 PWA 已经支持的很好了，唯一麻烦的是缓存策略和发版比较麻烦，应用轻量化的趋势已经很明朗了。下面讲一下 PWA 的一些关键点。 1....通用本地存储的解决方案 Workbox Workbox 是 Google Chrome 团队推出的一套 Web App 静态资源和请求结果本地存储的解决方案，该解决方案包含一些 JS 库和构建工具，Workbox...在 Workbox 之前，Google Chrome 团队较早时间推出过 sw-precache 和 sw-toolbox 库，但骂声很多，直到 Workbox 才真正诞生了能方便统一的处理离线能力的更完美的方案...通过自建的可视化活动搭建平台，能够非常高效的完成开发，结合 App 内的缓存，整体效果比 H5 好的多。 ?
defineConfig({ plugins: [ vue(), VitePWA({ manifest: { // 安装应用后显示的应用名...: "image/png" }] }, registerType: "autoUpdate", workbox...: { // 对所有匹配的静态资源进行缓存 globPatterns: ["**/*.
这个是离线缓存文件。我们 PWA 技术使用的就是它！...和ngrok去调试，在这里为了照顾新手我是直接引用的sw 处理静态缓存，首先定义需要缓存的路径，以及需要缓存的静态文件的列表。...借助 SW 注册完成安装 SW 时，抓取资源写入缓存中。使用了一个方法那就是 self.skipWaiting( ) ，为了在页面更新的过程当中，新的 SW 脚本能够立刻激活和生效。...importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js"); var cacheStorageKey...更新静态资源，缓存的资源会跟随着版本的更新会过期的，所以会根据缓存的字符串名称清除旧缓存。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
