service worker缓存的优缺点： 优点： 非侵入式缓存 缓存内容开发者完全可控 持续性缓存 独立于主线程之外，不堵塞进程 缺点： 权限太大，能拦截所有fetch请求，需要控制一下 发版更新处理比较麻烦...详细介绍请查阅官方文档 配置 Workbox可以修改缓存名称，可以用setCacheNameDetails设置预缓存和运行时缓存的名称，还可以通过workbox.core.cacheNames.precache...，第一个参数是一个正则表达式，用来匹配路径，第二个参数是对匹配路径进行的处理函数，可以用workbox封装的缓存策略处理函数，也可以自定义，上述示例就是使用的workbox内部封装的CacheFirst...如果第二个参数使用自定义函数，那么这个函数有三个默认参数，示例如下： import {registerRoute} from 'workbox-routing'; const handler = async...只简单的应用运行时的缓存功能 不适用： 需要使用service worker 其他功能的场景，如push等 需要在service worker中导入其他脚本或添加其他逻辑 具体的配置文件可查阅官方文档
，关于其相关的配置和处理，我们一起去 sw.js 文件中定义吧！.../hello.js"> 来到浏览器首先update一下service worker，方法上面介绍过这里不赘述。...// 如果请求路由匹配了就返回 true，也可以返回一个参数对象以供 handler 接收处理 return false; }; workbox.routing.registerRoute...}; }, ({url, event, params}) => { // 返回的结果是：A guide on workbox return...{html,js,css}'], }) ] // ... }); 使用 workbox 提供的 Webpack 插件必须在 app/sw.js 中包含以下代码才能完成预缓存内容列表注入工作
他基于h5的web worker，所以绝对不会阻碍当前js线程的执行，sw最重要的工作原理就是 1、后台线程：独立于当前网页线程； 2、网络代理：在网页发起请求时代理，来缓存文件； 兼容性 ?...var shouldRespond; // 对url进行一些处理,移除一些不必要的参数 var url = stripIgnoredUrlParameters...precache对应的是在installing阶段进行读取缓存的操作。它让开发人员可以确定缓存文件的时间和长度，以及在不进入网络的情况下将其提供给浏览器，这意味着它可以用于创建Web离线工作的应用。...工作原理 首次加载Web应用程序时，workbox会下载指定的资源，并存储具体内容和相关修订的信息在indexedDB中。...runtimecache 运行时缓存是在install之后，activated和fetch阶段做的事情。
当一起使用 Service Worker 和 CacheStorage API 时，可以控制网站上使用的资源（HTML、CSS、JS、图像等）如何从网络或缓存中请求，甚至允许在离线时返回缓存的内容。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...预缓存 除了在发出请求时进行缓存（运行时缓存）之外，Workbox 还支持预缓存，即在安装 Service Worker 时缓存资源。...有许多资源是非常适合预缓存的：Web 应用程序的起始 URL、离线回退页面以及关键的 JavaScript 和 CSS 文件。...离线回退 让 Web 应用在离线工作时感觉更健壮的常见模式是提供一个后退页面，而不是显示浏览器的默认错误页面。通过 Workbox 路由和预缓存，你可以在几行代码中设置这个模式。
我们的资源不总是在更新，所以我们没必要让用户每次访问都重新去拉取一遍资源，我们可以让这些资源缓存在用户本地，等待用户再次访问的时候，可以直接拿出来用。从本地读取肯定是要比网络请求快的。...// registerRoute 是最重要的方法，用来拦截请求，第一个参数可以是正则也可以是一个函数 // 是正则的话，当请求的URL匹配的时候，就会对这个请求执行对应得 CacheHandler registerRoute...：这个策略的工作路线如下图，它会优先从缓存中读取数据，同时每次请求也会在后台去服务器请求来更新数据。...image-20211227184911526.png Cache First：这个策略工作路线如下图，它同样优先去读取缓存中的内容，但是如果能读到，就不会发起网络请求，只有在读不到缓存的时候，才会发起网络请求...因为CacheFirst策略在有缓存的时候会始终读取缓存，虽然这里存的是不常变化的内容，但是我们仍然不希望无限的增加缓存的内容并且无限期的保留缓存，这个插件就可以很好的帮我们实现这些功能。
当一起使用 Service Worker 和 CacheStorage API 时，可以控制网站上使用的资源（HTML、CSS、JS、图像等）如何从网络或缓存中请求，甚至允许在离线时返回缓存的内容。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...预缓存 除了在发出请求时进行缓存（运行时缓存）之外，Workbox 还支持预缓存，即在安装 Service Worker 时缓存资源。...离线回退 让 Web 应用在离线工作时感觉更健壮的常见模式是提供一个后退页面，而不是显示浏览器的默认错误页面。通过 Workbox 路由和预缓存，你可以在几行代码中设置这个模式。...JavaScript 对内存的占用受代码的影响，如果在运行时缓存和计算大量的数据、处理巨量字符串等耗费空间的行为，那么内存就会极速飙升，极端情况下会导致承载网页的应用闪退。
当一起使用 Service Worker 和 CacheStorage API 时，可以控制网站上使用的资源（HTML、CSS、JS、图像等）如何从网络或缓存中请求，甚至允许在离线时返回缓存的内容。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...首先确定正在处理的请求是否符合条件，如果符合，则对其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略，也可以创建自己的策略。...解决办法是拉上后端一起梳理下哪些数据才是首屏所需要的，用一个接口把首屏数据输送给前端。 5....JavaScript 对内存的占用受代码的影响，如果在运行时缓存和计算大量的数据、处理巨量字符串等耗费空间的行为，那么内存就会极速飙升，极端情况下会导致承载网页的应用闪退。
支持 运行时缓存runtimeCaching，Workbox 的强大所在，阅读这些内容会使你更好地了解如何配置以及具体能做什么： Workbox Routing Workbox Strategies...SW 在接管页面，新的 SW 仍旧是 waiting 状态 想要实现在不结束 session 的情况下更新 SW，必须使用 skipWaiting，目前有两种常见的处理方法 注：以下方法中提到的registerServiceWorker.js...之类的运行时操作的行为而用户又没有刷新页面，就有可能会出现问题 即除非你能保证同一个页面在两个版本的 SW 相继处理的情况下依然能够正常工作，否则不要使用这个方法 方法二：等待用户同意再 skipWaiting...（好的下面我就开始云了） 我们需要在workboxOptions中将skipWaiting设置为false，或者不设置，因为默认值为false 此处，官方文档中提到，当skipWaiting为false...Workbox 放置在项目内，并配置workboxOptions中的importWorkboxFrom为disable，然后在importScripts中指定本地workbox-sw.js的路径 接着在
前言 在前几天师夷长技以制夷:跟着PS学前端技术文件中，我们提到了WorkBox，然后自己也对这块很感兴趣，所以就利用业余时间进行相关资源的查询学习和实践。...预缓存和运行时缓存 Service worker与Cache实例之间的交互涉及两个不同的缓存概念： 「预缓存」(Precaching caching) 「运行时缓存」(Runtime caching)...运行时缓存是指在运行时从网络请求资源时应用缓存策略。这种类型的缓存非常有用，因为它保证了用户已经访问过的页面和资源的离线访问。...在我们的主JavaScript文件中，使用Worker构造函数创建一个新的Worker对象。此构造函数接受一个参数，即我们在第1步中创建的JavaScript文件的URL。...，或者在用户会话不持续很长时间的任何情况下，手动更新可能不是必要的。
Service Worker 他基于h5的web worker，所以绝对不会阻碍当前js线程的执行，sw最重要的工作原理就是 后台线程：独立于当前网页线程； 网络代理：在网页发起请求时代理，来缓存文件—...如果注册成功，service worker就会被下载到客户端并尝试安装或激活（见下文），这将作用于整个域内用户可访问的URL，或者其特定子集。...self.skipWaiting(); // Perform install steps //首先 event.waitUntil 你可以理解为 new Promise， //它接受的实际参数只能是一个...流程如下： 首先老的sw为A，新的sw版本为B。 B进入install阶段，而A还处于工作状态，所以B进入waiting阶段。只有等到A被terminated后，B才能正常替换A的工作。...workbox缓存策略 workbox.strategies，有如下属性：staleWhileRevalidate networkFirst cacheFirst networkOnly cacheOnly
工作内容还可跨设备实现无缝衔接。 通过链接形式共享工作流程。Photoshop 文档可以通过 URL 访问，而不再隐藏于文件系统之内。如此一来，创作者可以轻松将链接发送给其他协作伙伴。...作为运行时，Web 抽象掉了底层操作系统，使得 Photoshop 能够覆盖用户手中的多种不同平台。...这种本地高性能文件系统，让 Photoshop 具备了在浏览器端严格处理文件工作流程的能力。...在首次访问之后，后续加载往往非常快（以 M1 Macbook 平台为例）： Adobe 还使用 Workbox 库，轻松将 Service Worker 缓存集成至整个构建过程当中。...Chrome DevTool 能够分析 WASM 代码、设置断点并检查各种变量，由此体现 JavaScript 自身的可调试性优势： 将设备上的机器学习功能与 TensorFlow.js 相集成 Web
浏览器支持 顺便带一句：目前只能在 HTTPS 环境下才能使用SW，因为SW 的权利比较大，能够直接截取和返回用户的请求，所以要考虑一下安全性问题。...importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js"); var cacheStorageKey...更新静态资源，缓存的资源会跟随着版本的更新会过期的，所以会根据缓存的字符串名称清除旧缓存。...] 通过存放到 Cache Storage 中，我们下次访问的时候如果是弱网或者断网的情况下，就可以不走网络请求，而直接就能将本地缓存的内容展示给用户，优化用户的弱网及断网体验。...如果不绑定则注意下文件请求路径即可。
issue 或者其他文档中可以发现线索，当然，如果被你发现了一些“待解决”的问题，不也正是你向开源社区贡献力量的机会嘛～ 基本上完成了上面这些依赖的升级，你的项目就能通过 Webpack5 跑起来了。...如前面准备工作介绍的 process 等。...process 的详细配置可参考准备工作。 ?...对于一些复杂且固定的计算逻辑而言，这种“预计算”能力，既能减小我们包的体积，又能加快运行时的速度。如官方示例[20]所示： ?...，当我们遇到问题时也都能够很快找到明确的解决方案，所以，赶快一起体验起来吧。
相同资源和参数下分别使用默认的MEMORY_ONLY和带压缩的MEMORY_ONLY_SER测试3次迭代的性能，下图是使用默认的MEMORY_ONLY方式缓存时，links在内存中的大小，可以看到links...改用带压缩的MEMORY_ONLY_SER的缓存方式后，links缓存后只占用了861.8M内存，仅为之前6.6G的12%。...使用带压缩的MEMORY_ONLY_SER缓存方式时，如下图所示，links仅占用549.5M，相比为String类型时的861.8M，也缩小了近一半。...分别测试runV3和runV5版本，迭代3次，在没有数据倾斜的情况下，相同数据、资源和参数下runV3运行时间306s，runV5运行时间311s，但是在有数据倾斜的情况下，相同数据、资源和参数下runV3...原始测试数据(使用带压缩的MEMORY_ONLY_SER缓存方式)情况如下表: 磁盘中大小 links缓存大小 分区数 1.5G 549.5M 20 运行3次迭代，一开始大概估计使用如下资源，使用5个
相同资源和参数下分别使用默认的MEMORY_ONLY和带压缩的MEMORY_ONLY_SER测试3次迭代的性能，下图是使用默认的MEMORY_ONLY方式缓存时，links在内存中的大小，可以看到links...改用带压缩的MEMORY_ONLY_SER的缓存方式后，links缓存后只占用了861.8M内存，仅为之前6.6G的12%。 ?...使用带压缩的MEMORY_ONLY_SER缓存方式时，如下图所示，links仅占用549.5M，相比为String类型时的861.8M，也缩小了近一半。...分别测试runV3和runV5版本，迭代3次，在没有数据倾斜的情况下，相同数据、资源和参数下runV3运行时间306s，runV5运行时间311s，但是在有数据倾斜的情况下，相同数据、资源和参数下runV3...原始测试数据(使用带压缩的MEMORY_ONLY_SER缓存方式)情况如下表: 磁盘中大小 links缓存大小 分区数 1.5G 549.5M 20 运行3次迭代，一开始大概估计使用如下资源，使用5个
SW可以完全脱离PWA存在，当然，PWA可离不开SW ：） And WorkBox ? WorkBox是谷歌开发的一款基于SW的缓存控制器，其主要目的是方便维护PWA。...同时，WorkBox只能简单的缓存数据，并不能做到拦截篡改请求的功能，尤其不能精准把握每一个资源的缓存情况，自定义程度并不高。...fetch只能传递Requset对象,而Requset对象有两个参数(url,[option]),第一个参数是网址,第二个参数为Request的内容,例如body或header。...，它就立刻把Response丢给了下一个管道函数，而此时status正确，abort打断了包括这一个fetch的所有请求，fetch就直接工作不正常。...此时如果fetch失败将直接报错，不写入缓存。 在下一次获取同一个URL的时候，缓存匹配到的将不再是空白值，此时fetch不执行，直接返回缓存，大大提升了速度。
url-loader 把资源文件转换为 URL，file-loader 也是一样的功能。...css 样式应用到 html importLoaders 用于指定在 css-loader 前应用的 loader 的数量 查询参数 modules 会启用 CSS 模块规范 module: { rules...loader 的数量 // modules: true // 查询参数 modules 会启用 CSS 模块规范 } },...它允许在运行时更新各种模块，而无需进行完全刷新。...库”，针对编译的代码中新的 API 进行处理，并且在代码中插入一些帮助函数 babel-polyfill 解决了 Babel 不转换新 API 的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境
这与“普通”书签的工作方式不同，即你在书签上的任何页面URL都是你获得的URL。即使用户从一篇文章中添加它，也允许CNN PWA始终从根路经开始加载。...它存在于自己的线程中，独立于代码执行和运行时环境中的其他网络应用程序，甚至可以在网页未打开时运行代码。这是你编写缓存策略并设置推送通知的地方。...服务工作线程只能缓存它所在的同一文件夹中的或者是子文件夹下的资源。为了获得最大的缓存能力，我建议尽可能地将其放置在根目录中。 务必注意，服务工作线程运行时生命周期与网络应用程序的其余部分完全分离。...上面所提到的Workbox库已经建立了解决这个问题的方式，并确保在应用程序更改时重新生成有有效缓存。 推送通知 我也特别想提一提推送通知。...应用 应用程序选项卡是一个你可以在其中找到制作应用程序的部分概述的地方。它会读取你的应用程序清单，并为缺少的或不工作的部分提供提示和线索。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
