在学习过程中发现，想要弄明白WorkBox，有一点很关键，我们需要搞懂Service Worker。...更新的方式 了解浏览器何时更新service worker很重要，但“如何”也很重要。...缓存策略是service worker的fetch事件与Cache API之间的交互。如何编写缓存策略取决于不同情况。..."); }); } 考虑数据使用 无论时机如何，「预缓存都涉及发送网络请求」。...当这种情况发生时，浏览器将从缓存中驱逐它认为过时或值得牺牲以腾出空间以容纳新资产的项目。 处理存储配额应该是Service Worker开发的一部分，而 Workbox 使这个过程比自行管理更简单。
很多人，包括我自己，初看Service Worker多一个Cache Storage的时候，就感觉跟HTTP长缓存没什么区别。...例如大家讲的最多的Service Worker能让网页离线使用，但熟悉HTTP缓存的朋友，会发现，把整站所有资源设置为长缓存（不带校验），也可以实现离线使用。...那么，Service Worker在缓存方面和HTTP缓存比较，有什么好处呢？...Service worker除了针对PWA（推送和消息）以外，对普通web来说，在缓存方面，能比http缓存带来一些额外的好处。 可以理解为，SW就是浏览器把缓存管理开放一层接口给开发者。...每个资源都长缓存。而这个过程，就需要改变了项目结构，至少多一个js或者一段js控制版本号，发起请求时还需要url中注入冬天的文件名。使用了SW，就可以把这部分非业务逻辑整合到sw js中。
背景介绍 最近实战了 Service Worker（以下简称“sw”）来进行网站缓存，以实现离线状态下，网站仍然可以正常使用。...> body> html> 注册 Service Worker 我们通过script.js来判断浏览器是否支持 serviceWorker，并且加载对应的代码。...Service Worker 最佳实践 笔者爬了很久的坑，中途看了很多人的博客，包括张鑫旭老师的文章。但是实践的时候都出现了问题，直到读到了百度团队的文章才豁然开朗。.../image.png"]); }) ); }); 更新 Service Worker 代码 对于缓存的更新，可以通过定义版本号的方式来标识，例如上方代码中的 VERSION 变量...参考链接 本文全部代码地址 Service Worker 生命周期 百度团队：怎么使用 ServiceWorker Web Worker 开发模式
交代背景 前段时间升级了一波Google Chrome，发现我的JulyNovel站点Ctrl+F5也刷新不了，后来发现是新的Chrome已经支持Service Worker，而我的JulyNovel也满足...之前加载过的css和js都被缓存了。 所以这里是有点小问题的，毕竟我服务器更新了，你service worker 没给我更新缓存，就说不过去了。...Service Worker生命周期的意义 1.实现离线优先（这个不谈，没网也能搞事？这妥妥的Native的能力啊） 2.允许新服务工作线程自行做好运行准备，无需中断当前的服务工作线程。...install 根据我的理解，这个环节只在第一次打开网站时加载，一系列操作保证其原子性（要么可用，要么废弃） Activate service worker被激活，某些请求就会变成 from ServiceWorker...更新service worker 这里就是解决问题的关键了。
Service Worker 与 Web Worker 如果你查看 Service Workers 的 API，将会看到 Web Worker 和 Service Worker 有非常相似的接口。...Service Worker vs Web Worker Service Worker 可以拦截请求并将其替换为自己缓存中的项目，因此它们的行为就像是代理服务器。...如何与 Service Worker 通信 选择要向其发送消息的 Service Worker 对于任何来源，都可以有多个 Service Worker。...这不仅允许他们与JavaScript主线程交换数据，而且还可以将消息从一个Service Worker发送到另一个Service Worker。...在两侧设置事件侦听器以接收 'message' 事件 通过发送 port 并将其存储在 Service Worker 中，建立与 Service Worker 的连接。
对于缓存，我们并不陌生，但是我们想有主观意识的缓存，我想缓存什么，缓存多久，缓存和请求资源的策略是什么都有自己来定，service worker 能帮我们做到。...，通过以下代码就能完成应用中 service worker 的注册，后面关于 service worker 相关的处理，在 sw.js 文件中进行。...worker 注册成功 到这里完成了，完成了 service worker 的注册，关于其相关的配置和处理，我们一起去 sw.js 文件中定义吧！...Google推出的、标准统一api操作的、基于 service worker 的策略缓存库，它有以下几点让人称赞的特点 1.Precaching2.Runtime caching3.Strategies4...开始使用Workbox Workbox 定义了标准统一API，我们来看如何借助它提供的API逐步优化项目 路由请求定义缓存 在 Workbox 中，最核心的概念要数基于路由的策略缓存了，这里抓住两个关键词
目前常见的缓存方式有http缓存、memory cache、disk cahce、localstorage、Service worker缓存等方式，本文介绍的Workbox就是实现Service worker...那么问题来了，Service worker离线缓存和传统的缓存方式对比，有什么优势和劣势呢，service worker之所以越来越流行，是因为它让前端缓存脱离了服务端，不需要服务端再额外做些什么，前端工程师自己就可以实现缓存...和 workbox.core.cacheNames.runtime 获取当前定义的预缓存和动态缓存名称。...) 更多配置下信息请参考官方文配置文档 预缓存功能 预缓存功能可以在service worker安装前将一些静态文件提前缓存下来，这样就能保证service worker安装后可以直接存缓存中获取这些静态资源...如果正常引入，我们可以在控制台中看到下图： 总结 service worker实现缓存有非侵入、持久化、缓存内容可控等优点 Workbox可以理解为service worker的库，利用它可以快速进行
支持缓存，Service Worker。...3.1.1 什么是 Workbox Workbox 是一组库，可以帮助开发者编写 Service Worker，通过 CacheStorage API 缓存资源。...当一起使用 Service Worker 和 CacheStorage API 时，可以控制网站上使用的资源（HTML、CSS、JS、图像等）如何从网络或缓存中请求，甚至允许在离线时返回缓存的内容。...3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。...预缓存 除了在发出请求时进行缓存（运行时缓存）之外，Workbox 还支持预缓存，即在安装 Service Worker 时缓存资源。
支持缓存，Service Worker。...Worker A.3.1.1 什么是 Workbox Workbox 是一组库，可以帮助开发者编写 Service Worker，通过 CacheStorage API 缓存资源。...当一起使用 Service Worker 和 CacheStorage API 时，可以控制网站上使用的资源（HTML、CSS、JS、图像等）如何从网络或缓存中请求，甚至允许在离线时返回缓存的内容。...A.3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。...预缓存 除了在发出请求时进行缓存（运行时缓存）之外，Workbox 还支持预缓存，即在安装 Service Worker 时缓存资源。
Service Worker 介绍 Service Worker 是事件驱动的 worker，生命周期与页面无关，关联页面未关闭时，它也可以退出，没有关联页面时，它也可以启动. service worker...如何灵活地控制缓存，可以参考 Google 官方文章 《The Offline Cookbook》。 1.4....状态管理 Service worker 有两类状态，一类是 service worker 线程的运行状态，另一类是 service worker 脚本版本的状态。...worke 文件并且注入相应配置到 webpack pipline, 适合简单的配置需求 InjectManifest插件将生成一个预先缓存的URL列表，并将该预先缓存清单添加到现有的服务工作文件中，...__precacheManifest, {}); // html的缓存策略 workbox.routing.registerRoute( new RegExp('.*\.(?
Service Worker Service Worker本质上也是浏览器缓存资源用的，只不过他不仅仅是cache，也是通过worker的方式来进一步优化。...所以这里我列举了几个使用Service Worker的页面： 淘宝 网易新闻 考拉 所以说还是可以尝试下的。...调试方法 一个网站是否启用Service Worker，可以通过开发者工具中的Application来查看： ?...被Service Worker缓存的文件，可以在Network中看到Size项为 from ServiceWorker： ?...installing 我们注册后，浏览器就会开始安装sw，可以通过事件监听： //service worker安装成功后开始缓存所需的资源 var CACHE_PREFIX = 'cms-sw-cache
技术选型 使用 Google Workbox 构建 Service Worker 什么是 Workbox ？...Workbox 是一组库，可以帮助开发者编写 Service Worker，通过 CacheStorage API 缓存资源。...当一起使用 Service Worker 和 CacheStorage API 时，可以控制网站上使用的资源（HTML、CSS、JS、图像等）如何从网络或缓存中请求，甚至允许在离线时返回缓存的内容。...如何使用 Workbox？ Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。
此service worker文件实际上是一个“no op”，它将重置以前为其注册的任何service worker 服务host:port。...如果需要在本地测试service worker，请构建应用程序并从构建目录运行一个简单的HTTP服务器。为了避免浏览器缓存的复杂性，推荐新打开一个窗口。...基于workbox-webpack-plugin插件你有两种模式可以选择 ---- 'GenerateSW' (default), will lead to a new service worker...InjectManifest允许您从现有的service worker文件开始， 并创建该文件的副本，并将“预缓存清单”注入其中。...这个选项是用来为icons 和 mainfest 添加版本，用来针对浏览器缓存问题。它将会在icons和mainfest url上追加?
[image-20211227144006470.png] 5、离线缓存（Service Worker） 5.1、简介 除了上述说的手段，减小资源体积，提高资源传输速度之外，我们还可以有一些优化方式，那就是缓存...那么我们如何缓存呢？这里就不讲什么协商缓存和强缓存了，这种网上太多了，不再赘述，这次讲另一种缓存，使用Service Worker。...-- MDN SW（以下Service Worker都简称SW）是一个比较新的API，它主要是用来解决离线情况下，使用本地缓存的资源来加载web程序。...5.4、Service Worker小结 SW这个东西呢，我觉得属于是缓存方面功能的天花板，它可以灵活的定义缓存的项目，缓存的时机等，也可以操作缓存的内容而达到一些其他的目的。...参考文献 Web 字体简介: TTF, OTF, WOFF, EOT & SVG 按需引入element-ui Vue 3, PWA & service worker Workbox get started
在 Service Worker 中我们可以做很多事情，比如拦截客户端的请求、向客户端发送消息、向服务器发起请求等等，其中最重要的作用之一就是离线资源缓存。...推荐阅读《html5离线缓存manifest详解》、《HTML5离线存储实战之manifest的那些坑》 Service Worker本质上也是浏览器缓存资源用的，只不过他不仅仅是cache，也是通过...Service Worker 他基于h5的web worker，所以绝对不会阻碍当前js线程的执行，sw最重要的工作原理就是 后台线程：独立于当前网页线程； 网络代理：在网页发起请求时代理，来缓存文件—...如果注册成功，service worker就会被下载到客户端并尝试安装或激活（见下文），这将作用于整个域内用户可访问的URL，或者其特定子集。...workbox缓存策略 workbox.strategies，有如下属性：staleWhileRevalidate networkFirst cacheFirst networkOnly cacheOnly
(CDN Mode) 其实很简单, 项目根目录放置一段 service-worker 的入口: if ('serviceWorker' in navigator) { // Use the window...page load performant window.addEventListener('load', () => { navigator.serviceWorker.register('service-worker.js...'); }); } 然后新建一个文件 service-worker.js , 你们可以写上一个最简单的 registerRoute 方法: importScripts('https://storage.googleapis.com...}), ); Troubleshooting Uncaught ReferenceError: importScripts is not defined importScripts 方法只能放在 service-worker...需要将 importScripts 方法放置在 navigator.serviceWorker.register('xxx.js'); 这一行这里注册的 xxx.js 这个 service-worker
： 如果你只是想简单地将项目 PWA 化，选择GenerateSW，插件会自动帮你生成包含 precache manifest 的service-worker.js 如果你有较高的定制需求，需要在已有...Service Worker 的基础上将项目 PWA 化，则选择InjectManifest，插件会在你指定的service-worker.js的基础上加入 precache manifest workboxOptions...Worker 的等待阶段 添加离线 Google Analytics 支持 运行时缓存runtimeCaching，Workbox 的强大所在，阅读这些内容会使你更好地了解如何配置以及具体能做什么：...Worker 的更新 这是开发 PWA 应用时需要考虑的一个重要问题 由于 Service Worker 的更新机制（扩展阅读：【Service Worker】生命周期那些事儿），直接单纯的刷新页面并没有结束当前...注：以下方法中提到的registerServiceWorker.js是由 PWA 插件在src目录中自动生成的，其作用是注册 SW 以及提供其生命周期钩子，具体可以看该 npm 包 register-service-worker
简而言之的原理 Service Worker：用来取代 Vite 的 HTTP 服务器。 Web Worker：运行 browser-vite 来处理主线程。...Service Worker - 浏览器内的 Web 服务器 Service Worker 会捕获到来自 iframe 的特定 url 请求。...一个使用 workbox 的例子： workbox.routing.registerRoute( /^https?...:\/\/HOST/BASE_URL\/(\/.*)$/, async ({ request, params, url, }: import('workbox-routing...Vite Worker - 处理请求 Vite Worker是一个 Web Worker，它会处理 Service Worker 捕获的请求。
PWA 如何保证网页在离线时仍然能正常展示呢？...serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js...') .then(registration => { console.log('service-worker registered'); }).catch(err...=> { console.log('service-worker register error') }); }); } 打包后如下： ?...小结 本节只是简单介绍了如何利用 webpack 配置 PWA，引入了这样一个概念，更详细的 PWA 应用和配置，等有需要的时候可以详细了解。
官网上给出 PWA 的宣传是 ： Reliable （ 可靠的 ）、Fast（ 快速的 ）、Engaging（ 可参与的 ） Reliable ：当用户从手机主屏幕启动时，不用考虑网络的状态是如何，都可以立刻加载出...PWA关键技术 Service Worker （可以理解为服务工厂） Manifest （应用清单） Push Notification（推送通知） Service Worker 以下用SW来表示 SW...importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js"); var cacheStorageKey...cacheStorageKey) .then(cache => cache.addAll(cacheList)) .then(() => self.skipWaiting()) ) }) 处理动态缓存...更新静态资源，缓存的资源会跟随着版本的更新会过期的，所以会根据缓存的字符串名称清除旧缓存。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
