new GenerateSW({swDest: 'custom-service-worker.js',});exclude: 用于排除不需要缓存的文件，常用于忽略 .map 文件等。...缓存策略详解Workbox 支持多种缓存策略，每种策略适用于不同的资源类型和场景。CacheFirst：优先使用缓存，只有在缓存中没有找到资源时才会从网络获取。...{html,js,css}'],});6.2 调试与监控开发过程中可以通过 Workbox 提供的调试工具监控缓存的情况。...完整项目示例以下是一个完整的 Webpack 项目示例，结合 GenerateSW 模式配置静态资源预缓存和运行时缓存：const { GenerateSW } = require('workbox-webpack-plugin...通过它，我们可以轻松实现静态资源的预缓存、运行时缓存、自动缓存更新等功能，从而提升应用的离线能力和加载性能。
离线缓存优化 将应用中的静态资源缓存是目前最主流的性能优化方法，甚至能让应用秒开！...详细介绍请查阅官方文档 配置 Workbox可以修改缓存名称，可以用setCacheNameDetails设置预缓存和运行时缓存的名称，还可以通过workbox.core.cacheNames.precache...: '383676' }, {url: '/styles/app.0c9a31.css', revision: null}, {url: '/scripts/app.0d5770.js...： NetworkFirst：网络优先 CacheFirst：缓存优先 NetworkOnly：仅使用正常的网络请求 CacheOnly：仅使用缓存中的资源 StaleWhileRevalidate：从缓存中读取资源的同时发送网络请求更新本地缓存...只简单的应用运行时的缓存功能 不适用： 需要使用service worker 其他功能的场景，如push等 需要在service worker中导入其他脚本或添加其他逻辑 具体的配置文件可查阅官方文档
url不在当前cache中,则添加到cache if (!...cache中找对应的url的值 return cache.match(urlsToCacheKeys.get(url)).then(function(response...使用者 有很多团队也是启用该工具来实现serviceworker的缓存，比如说： 淘宝首页 网易新闻wap文章页 百度的Lavas 基本配置 首先，需要在项目的sw.js文件中，引入workbox的官方...runtimecache 运行时缓存是在install之后，activated和fetch阶段做的事情。...缓存中没有结果，那就会发起网络请求，拿到网络请求结果并将结果更新至 Cache 缓存，并将结果返回给客户端。
（用于新的 HTML 页面），当它状态码为 200 时，该策略将缓存的页面存储在一个名为 pages 的缓存中。...使用 Stale While Revalidate strategy 缓存 CSS、JavaScript 和 Web Worker，将缓存的资源存储在一个名为 assets 的缓存中。...采用缓存优先的策略来缓存图像，将缓存的图像存储在名为 images 的缓存中，30 天过期，并且一次只允许 50 个。...预缓存 除了在发出请求时进行缓存（运行时缓存）之外，Workbox 还支持预缓存，即在安装 Service Worker 时缓存资源。...通过 Workbox 路由和预缓存，你可以在几行代码中设置这个模式。
但是上述的压缩场景对于SPA项目来说不太可能实现，因为字蛛是通过扫描HTML来获取页面需要哪些字的，SPA项目的HTML没有经过加载空空如也，啥也没有；而且对于含有输入场景的网页，由于用户的输入有不确定性...5.2、项目引入（vue-cli项目例子） 下面使用vue-cli项目进行示范，如何在项目中接入SW和workbox： // vue.config.js // 首先需要安装 serviceworker-webpack-plugin...当缓存中没有数据的时候，就会把服务器的请求返回给客户端使用，并且更新缓存。...也就是说这种策略，只要缓存中有对应数据，就不会发起网络请求去更新缓存中的内容，这适合一些不常变化的资源缓存。比如图片，字体资源。...使用方法就是把 workbox-routing 那一节例子中的 CacheHandler 占位，改成对应策略的实例即可。
3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。...（用于新的 HTML 页面），当它状态码为 200 时，该策略将缓存的页面存储在一个名为 pages 的缓存中。...采用缓存优先的策略来缓存图像，将缓存的图像存储在名为 images 的缓存中，30 天过期，并且一次只允许 50 个。...预缓存 除了在发出请求时进行缓存（运行时缓存）之外，Workbox 还支持预缓存，即在安装 Service Worker 时缓存资源。...通过 Workbox 路由和预缓存，你可以在几行代码中设置这个模式。
本文将详细探讨如何在 Vue.js 项目中优化字体文件的加载和缓存，以提高页面性能。 一、为什么要缓存字体文件？...在 CSS 文件中，使用相对路径引用这些字体文件： @font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format...步骤： 安装 Workbox：Workbox 是 Google 提供的一个工具库，简化了 Service Worker 的创建。...首先安装 workbox-webpack-plugin： npm install workbox-webpack-plugin --save-dev 配置 Workbox：在 vue.config.js...中添加如下配置： const WorkboxPlugin = require('workbox-webpack-plugin'); module.exports = { configureWebpack
开始使用Workbox Workbox 定义了标准统一API，我们来看如何借助它提供的API逐步优化项目 路由请求定义缓存 在 Workbox 中，最核心的概念要数基于路由的策略缓存了，这里抓住两个关键词...networkFirst 网络优先的策略 cacheFirst 直接从 Cache 缓存中取得结果，如果 Cache 缓存中没有结果，那就会发起网络请求，拿到网络请求结果并将结果更新至 Cache 缓存...workbox.routing.registerRoute( ({url, event}) => { return { name: 'workbox'...}; }, ({url, event, params}) => { // 返回的结果是：A guide on workbox return...{html,js,css}'], }) ] // ... }); 使用 workbox 提供的 Webpack 插件必须在 app/sw.js 中包含以下代码才能完成预缓存内容列表注入工作
安装 PWA 插件 如果你已经在使用@vue/cli，那么可以直接在可视化界面中安装 PWA 插件 否则，可以通过vue add @vue/pwa命令来安装 该插件会使用谷歌的 PWA 框架 Workbox...）文件添加到 precache manifest 中，或从中排除，支持使用正则表达式 自动跳过 Service Worker 的等待阶段 添加离线 Google Analytics 支持 运行时缓存runtimeCaching...，Workbox 的强大所在，阅读这些内容会使你更好地了解如何配置以及具体能做什么： Workbox Routing Workbox Strategies Workbox Cache Expiration...（也并没有放置在其他 js 中），我猜测这可能是因为加入代码的这一特性是 Workbox 4 才加入的，而插件生成的 SW 引用的是 Workbox 3 的缘故…… 对于这个问题有两种可能的解决方法：...中的importWorkboxFrom为disable，然后在importScripts中指定本地workbox-sw.js的路径 接着在registerServiceWorker.js中我们可以如下所示在
Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...采用缓存优先的策略来缓存图像，将缓存的图像存储在名为 images 的缓存中，30 天过期，并且一次只允许 50 个。...预缓存 除了在发出请求时进行缓存（运行时缓存）之外，Workbox 还支持预缓存，即在安装 Service Worker 时缓存资源。...通过 Workbox 路由和预缓存，你可以在几行代码中设置这个模式。...JavaScript 对内存的占用受代码的影响，如果在运行时缓存和计算大量的数据、处理巨量字符串等耗费空间的行为，那么内存就会极速飙升，极端情况下会导致承载网页的应用闪退。
更新缓存策略有时你可能希望缓存特定版本的资源，而不是始终使用最新的。...首先，创建一个App Shell HTML文件（如app-shell.html），包含基本的布局和样式。...然后，在Service Worker中预缓存App Shell：const appShellUrls = [ '/app-shell.html', '/app-style.css', // 其他App...优先从缓存中获取App Shell资源：self.addEventListener('fetch', (event) => { if (event.request.mode === 'navigate...集成WebSocket支持如果你的应用使用WebSocket进行实时通信，可以使用workbox-websocket库在Service Worker中处理WebSocket连接，确保在离线时能够接收和发送消息
比如 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色，会被 theme_color 所影响。 background_color: {Color} css色值 可以指定启动画面的背景颜色。...display: {string} 显示类型 fullscreen 应用的显示界面将占满整个屏幕 standalone 浏览器相关UI（如导航栏、工具栏等）将会被隐藏 minimal-ui 显示形式与...应遵循如下规则： 如果没有在 manifest 中设置 scope，则默认的作用域为 manifest.json 所在文件夹； scope 可以设置为 ../ 或者更高层级的路径来扩大PWA的作用域；...start_url 必须在作用域范围内； 如果 start_url 为相对地址，其根路径受 scope 所影响； 如果 start_url 为绝对地址（以 / 开头），则该地址将永远以 / 作为根地址...如你想要添加所有的格式,按照以上格式复制即可 将上述图片放到对应的目录下，并修改 _config.yml 和 manifest.json 与之对应 推荐图片大小转换网站：iloveimg 最后输入以下内容即可 # 清理缓存
Service worker 线程的运行状态, 一般对应 service worker 线程的状态，这类状态只保存在内存中。...URL列表，并将该预先缓存清单添加到现有的服务工作文件中，之后开发者可以注入自己的配置 3.1.1 以下为 GenerateSW 样例文件 // Inside of webpack.config.js:...}; 3.1.2 以下为 InjectManifest 样例文件 必须在下方 {option: 'value'} 处指定 swSrc字段， 即为开发者手动注入的 service worker 文件 如：...__precacheManifest, {}); // html的缓存策略 workbox.routing.registerRoute( new RegExp('.*\.(?..., icon: '/img/icons/icon-128x128.png', renotify: true, actions: [], url
建议不要在开发模式下启用ServiceWorker，因为这可能导致使用以前缓存的资源而不包括最新的本地更改的情况。...相反，在开发模式中noopServiceWorker.js会包括在内。...为了避免浏览器缓存的复杂性，推荐新打开一个窗口。...这个选项是用来为icons 和 mainfest 添加版本，用来针对浏览器缓存问题。它将会在icons和mainfest url上追加?...在生成的HTML中的manifest链接标记中为’ crossorigin '属性的值。如果您的PWA位于经过身份验证的代理之后，您可能需要设置此选项。请参阅跨源值了解更多细节。
如何使用 Workbox？ Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...（用于新的 HTML 页面），当它状态码为 200 时，该策略将缓存的页面存储在一个名为 pages 的缓存中。...采用缓存优先的策略来缓存图像，将缓存的图像存储在名为 images 的缓存中，30 天过期，并且一次只允许 50 个。 3. ...JavaScript 对内存的占用受代码的影响，如果在运行时缓存和计算大量的数据、处理巨量字符串等耗费空间的行为，那么内存就会极速飙升，极端情况下会导致承载网页的应用闪退。
装配了PWA以后，用户可以将网站作为WEB APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。本文讨论的是使用两种方案实现PWA。...其实还有个离线博客，但是视方案不同会有很多BUG，而且离线博客意义何在啊！ 图标设计 在使用PWA之前，我们最好先行设计一个符合网站主题的图标。...使用hexo-offline-popup以后，如果还开启了pjax，可能遇到页面URL带着长长的后缀。形似index.html?...安装必要插件 既然要使用gulp配合workbox实现PWA，自然少不了安装这两个插件。...butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache}改为{cache: true}: 将之前生成的图标包移入相应的目录，例如我是/
manifest 缓存 已经被废弃，因为他的设计有些不合理的地方，他在缓存静态文件的同时，也会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。...相对于驱动应用的主JavaScript线程，它运行在其他线程中，所以不会造成阻塞。它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用。...如果注册成功，service worker就会被下载到客户端并尝试安装或激活（见下文），这将作用于整个域内用户可访问的URL，或者其特定子集。...可以像如下方式使用 Network First 策略： cacheFirst 这个策略的意思就是当匹配到请求之后直接从 Cache 缓存中取得结果，如果 Cache 缓存中没有结果，那就会发起网络请求，...workbox原理 通过Proxy按需依赖 熟悉了workbox后会得知，它是有很多个子模块的，各个子模块再通过用到的时候按需importScript到线程中。
display: {string} 显示类型 fullscreen 应用的显示界面将占满整个屏幕 standalone 浏览器相关UI（如导航栏、工具栏等）将会被隐藏 minimal-ui 显示形式与...start_url 必须在作用域范围内； 如果 start_url 为相对地址，其根路径受 scope 所影响； 如果 start_url 为绝对地址（以 / 开头），则该地址将永远以 / 作为根地址...； start_url: {string} 应用启动地址 icons: {Array.}...如果需要填写多个尺寸，则使用空格进行间隔，如”48x48 96x96 128x128” type {string} 图标的 mime 类型，非必填项，该字段可让浏览器快速忽略掉不支持的图标类型 sw.js...'); if (workbox) { workbox.setConfig({ modulePathPrefix: 'https://g.alicdn.com/kg/workbox/3.3.0
前言 在前几天师夷长技以制夷:跟着PS学前端技术文件中，我们提到了WorkBox，然后自己也对这块很感兴趣，所以就利用业余时间进行相关资源的查询学习和实践。...预缓存和运行时缓存 Service worker与Cache实例之间的交互涉及两个不同的缓存概念： 「预缓存」(Precaching caching) 「运行时缓存」(Runtime caching)...运行时缓存是指在运行时从网络请求资源时应用缓存策略。这种类型的缓存非常有用，因为它保证了用户已经访问过的页面和资源的离线访问。...模拟存储配额 在拥有大量大型静态资产（如高分辨率图像）的网站中，可能会触及存储配额。当这种情况发生时，浏览器将从缓存中驱逐它认为过时或值得牺牲以腾出空间以容纳新资产的项目。...处理存储配额应该是Service Worker开发的一部分，而 Workbox 使这个过程比自行管理更简单。不管是否使用 Workbox，模拟自定义存储配额以测试缓存管理逻辑可能是一个不错的主意。
,'node_modules')] //排除外部modules } 局部配置 { test: new RegExp(`^(.*\\.global)....,'node_modules')] //排除外部modules } WebWorks 创建一个worker const worker = new Worker(new URL(’....i http-server -D 配置 packages.json "scripts": { "start": "http-server dist" }, 使webpack serve 运行时变动打包而不是内存...在webpack配置中使用cache选项 使用package.json中的 “postinstall” 清除缓存目录 将cache类型设置为内存或者文件系统 memory 选项很简单 它告诉webpack...在内存中存储缓存 cache: { type: ‘memory’ } 自定义plugin/loader 对它们概要分析 以免在此处引入性能问题 权衡progress plugin的利弊 通用构建优化
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
