- 综合排序
- 最热优先
- 最新优先
- 来自专栏szhshp 的第四边境中转站
Workbox-Getting Started
: importScripts is not defined Workbox-Getting Started 适用于 Workbox V5.1.2 Installation Installation /releases/5.1.2/workbox-sw.js'); const { registerRoute } = workbox.routing; const { CacheFirst } = workbox.strategies; const { CacheableResponse } = workbox.cacheableResponse; registerRoute( new /releases/5.1.2/workbox-sw.js'); const { registerRoute } = workbox.routing; const { StaleWhileRevalidate } = workbox.strategies; const { CacheableResponsePlugin } = workbox.cacheableResponse; const { ExpirationPlugin
83410编辑于 2022-09-21 - 来自专栏除除的专栏
PWA 实践应用（Google Workbox）
3.1.1 什么是 Workbox Workbox 是一组库，可以帮助开发者编写 Service Worker，通过 CacheStorage API 缓存资源。 3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。 Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。 4 技术实践（Service Worker） 4.1 使用 CLI 安装 Workbox： npm install workbox-cli -D npx workbox --help 按照引导配置 workbox-config.js ： npx workbox wizard 根据配置生成 Service Worker 程序： npx workbox generateSW workbox-config.js 由于实际静态资源是挂载在
1.9K40编辑于 2022-03-11 - 来自专栏网络日志
PWA 实践应用（Google Workbox）
3 技术选型（Service Worker） 3.1 使用 Google Workbox 构建 Service Worker 3.1.1 什么是 Workbox Workbox 是一组库，可以帮助开发者编写 3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。 Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。 4 技术实践（Service Worker） 4.1 使用 CLI 安装 Workbox： npm install workbox-cli -D npx workbox --help 按照引导配置 workbox-config.js ： npx workbox wizard 根据配置生成 Service Worker 程序： npx workbox generateSW workbox-config.js 由于实际静态资源是挂载在
2K10编辑于 2024-07-09 - 来自专栏柒八九技术收纳盒
WorkBox 之底层逻辑Service Worker
前言 在前几天师夷长技以制夷:跟着PS学前端技术文件中，我们提到了WorkBox，然后自己也对这块很感兴趣，所以就利用业余时间进行相关资源的查询学习和实践。 在学习过程中发现，想要弄明白WorkBox，有一点很关键，我们需要搞懂Service Worker。 处理存储配额应该是Service Worker开发的一部分，而 Workbox 使这个过程比自行管理更简单。不管是否使用 Workbox，模拟自定义存储配额以测试缓存管理逻辑可能是一个不错的主意。
1.7K20编辑于 2023-11-01 - 来自专栏随心分享
Workbox5+Webpack4构建离线应用
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js'); if (workbox Webpack+Workbox构建离线应用 目前大部分前端项目都离不开webpack，为了方便我们使用workbox，谷歌官方给我们提供了workbox的webpack插件，通过这个插件，我们能在项目中快速引入 workbox，通过配置来定制化我们的缓存。 第一步：使用workbox-webpack-plugin 安装 npm install workbox-webpack-plugin 在webpack 配置文件中引入并配置 workbox-webpack-plugin service worker开发 通过workbox-webpack-plugin可以将workbox引入到现有的用webpack构建的项目中 本文对workbox的接口的解释较少，需要各位去官网查阅api
1.7K10编辑于 2022-11-19 Workbox-webpack-plugin 使用指南与实践
Workbox-webpack-plugin 最新版使用全解1. 进阶配置6.1 缓存资源版本控制Workbox 通过为缓存的资源生成唯一的 hash 值来控制缓存的更新，每当资源内容变化时，Workbox 会生成新的缓存并更新 Service Worker。 例如，使用 workbox-window 来监听 Service Worker 的更新状态。 import { Workbox } from 'workbox-window';if ('serviceWorker' in navigator) { const wb = new Workbox( 在实际项目中，结合业务需求灵活使用 Workbox 的各项配置，将大大提升应用的用户体验和性能表现。
1.4K10编辑于 2024-09-14- 来自专栏JavaScript全栈
你的web应用支持离线访问和策略缓存吗？
###导入Workbox 首先在 sw.js 第一行导入 workbox.js 语法如下 importScripts('https://storage.googleapis.com/workbox-cdn if (workbox) { console.log(`Yay! Workbox is loaded ?`); } else { console.log(`Boo! 开始使用Workbox Workbox 定义了标准统一API，我们来看如何借助它提供的API逐步优化项目 路由请求定义缓存 在 Workbox 中，最核心的概念要数基于路由的策略缓存了，这里抓住两个关键词 ); js等相关文件可以适当选择网络优先 workbox.routing.registerRoute( /\.html$/, new workbox.strategies.NetworkFirst : 3, }) ); webpack中使用workbox 首先安装 workbox-webpack-plugin ，选择使用npm安装 npm install --save-dev workbox-webpack-plugin
1.3K20发布于 2020-07-20 - 来自专栏除除的专栏
Workbox v6 版本分布与升级建议 (基于 npm 发布数据)
版本数据总览已提供的数据依赖包版本下载量发布时间workbox-cacheable-response6.5.4980,3814 年前workbox-cli6.6.03,6773 年前workbox-cli6.5.46,4314 年前workbox-expiration6.6.03,249,5503 年前workbox-expiration6.5.4963,2494 年前workbox-precaching6.6.03,252,3093 年前workbox-precaching6.5.4966,4344 年前workbox-routing6.6.03,283,1393 年前workbox-routing6.5.4997,0954 年前 workbox-strategies6.6.03,268,9973 年前workbox-strategies6.5.4992,3094 年前workbox-webpack-plugin6.6.03,094,7893 考虑到 workbox-cacheable-response 未发布 6.6.0，建议版本如下:依赖包建议版本workbox-cacheable-response6.5.4workbox-cli6.6.0workbox-expiration6.6.0workbox-precaching6.6.0workbox-routing6.6.0workbox-strategies6.6.0workbox-webpack-plugin6.6.0
7010编辑于 2026-03-10 - 来自专栏程序员成长指北
Service Worker：让你的 Web 应用牛逼起来
Workbox 由于直接写原生的sw.js，比较繁琐和复杂，所以一些工具就出现了，而workbox是其中的佼佼者，由google团队推出。 引入workbox后，全局会挂载一个workbox对象 if (workbox) { console.log('workbox加载成功'); } else { console.log(' /kg/workbox/3.3.0/workbox-sw.js'); workbox.setConfig({ debug: false, modulePathPrefix: 'https://g.alicdn.com /kg/workbox/3.3.0/' }); //直接激活跳过等待阶段 workbox.skipWaiting(); workbox.clientsClaim(); //定义要缓存的html var 原理 目前分析serviceworker和workbox的文章不少，但是介绍workbox原理的文章却不多。这里简单介绍下workbox这个工具库的原理。 首先将几个我们产品用到的模块图奉上： ?
2.9K50发布于 2020-04-22 - 来自专栏前端|
【腾讯云前端性能优化大赛】前端首屏性能优化
from 'workbox-strategies' import { ExpirationPlugin } from 'workbox-expiration' import { CacheableResponsePlugin 这里我们需要安装一些workbox相关的工具，workbox提供了很多工具，可以根据需要多安装或者少安装，下面几个是我推荐的： npm i workbox-routing workbox-strategies workbox-expiration workbox-cacheable-response -D 5.3、workbox系列工具使用说明 下面先大致介绍一下刚刚安装的那些包，和里面用到的一些东西。 所以从 workbox-cacheable-response中导入一个插件，他可以帮我们过滤相应的状态码。 { registerRoute } from 'workbox-routing' import { CacheFirst } from 'workbox-strategies' import { ExpirationPlugin
2.2K41编辑于 2021-12-27 - 来自专栏用户8644135的专栏
为 vue 项目添加 PWA 支持
安装 PWA 插件 如果你已经在使用@vue/cli，那么可以直接在可视化界面中安装 PWA 插件 否则，可以通过vue add @vue/pwa命令来安装 该插件会使用谷歌的 PWA 框架 Workbox 的强大所在，阅读这些内容会使你更好地了解如何配置以及具体能做什么： Workbox Routing Workbox Strategies Workbox Cache Expiration iconPaths 4 才加入的，而插件生成的 SW 引用的是 Workbox 3 的缘故…… 对于这个问题有两种可能的解决方法： 将workboxPluginMode设置为InjectManifest，然后自己指定一个 SW 里面加上该代码内容 从谷歌那里下载最新的 Workbox 放置在项目内，并配置workboxOptions中的importWorkboxFrom为disable，然后在importScripts 中指定本地workbox-sw.js的路径 接着在registerServiceWorker.js中我们可以如下所示在updated()函数中加入一些内容，询问用户是否愿意重载页面以更新应用，若用户同意则向
4.3K00发布于 2021-06-09 - 来自专栏墨白的Java基地
hexo博客添加到桌面应用程序
/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 $'), workbox.strategies.networkFirst()); workbox.routing.registerRoute(new RegExp('.*.html'), workbox.strategies.networkFirst ()); workbox.routing.registerRoute(new RegExp('.*.(? :js|css|jpg|png|gif)'), workbox.strategies.staleWhileRevalidate()); } 修改主页域名 ^https?
1.2K30发布于 2021-03-08 - 来自专栏coding for love
5-2 PWA 的打包配置
我们可以使用 workbox-webpack-plugin 插件： npm install --save-dev workbox-webpack-plugin // webpack.prod.js .. . const WorkBoxPlugin = require('workbox-webpack-plugin') ... 参考 GitChat · 前端 | Webpack 工程的 PWA 实战 Workbox 3.0 – Web 站点轻松做到离线可访问 webpack 中使用 workbox 实现 PWA 2019
1.5K10发布于 2020-05-04 - 来自专栏大宇笔记
@vue/cli-plugin-pwa 中文翻译
基于workbox-webpack-plugin插件你有两种模式可以选择 ---- 'GenerateSW' (default), will lead to a new service worker guide can help you choose between the two modes. workbox插件指南 点击插件插件指南，可以帮助您在两种模式之间进行选择。 ---- pwa.workboxOptions These options are passed on through to the underlying workbox-webpack-plugin 这些配置都是 workbox-webpack-plugin的配置，更多关于值的信息需要点击查下面的文档指南。 规则 config.plugin('workbox')
1.6K30发布于 2020-12-21 - 来自专栏除除的专栏
【腾讯云前端性能优化大赛】前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）
Worker A.3.1.1 什么是 Workbox Workbox 是一组库，可以帮助开发者编写 Service Worker，通过 CacheStorage API 缓存资源。 A.3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它，然后导入项目 Service Worker 所需的模块。 Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。 A.4 技术实践（Service Worker） A.4.1 使用 CLI 安装 Workbox： npm install workbox-cli -D npx workbox --help 按照引导配置 workbox-config.js： npx workbox wizard 根据配置生成 Service Worker 程序： npx workbox generateSW workbox-config.js
3.5K121编辑于 2022-05-28 - 来自专栏YangAir的IT知识小阁楼
Hexo添加PWA支持
/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 $'), workbox.strategies.networkFirst()); workbox.routing.registerRoute(new RegExp('.*.html'), workbox.strategies.networkFirst ()); workbox.routing.registerRoute(new RegExp('.*.(? :js|css|jpg|png|gif)'), workbox.strategies.staleWhileRevalidate()); } 注意： 将其中域名改为你自己主页的域名：https?
1.5K10发布于 2020-02-08 - 来自专栏前端架构
ServiceWorker工作机制与生命周期：资源缓存与协作通信处理
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对象上不存在指定对象，就依赖注入该对象对应的脚本
2.1K20发布于 2021-07-03 - 来自专栏Web大前端
PWA离线优先策略：提升用户体验的关键步骤
集成WebSocket支持如果你的应用使用WebSocket进行实时通信，可以使用workbox-websocket库在Service Worker中处理WebSocket连接，确保在离线时能够接收和发送消息 ：importScripts('https://unpkg.com/workbox-sw@latest/runtime-caching/workbox-sw.prod.v2.js');importScripts ('https://unpkg.com/workbox-websocket@latest/workbox-websocket.prod.v2.js');workbox.webSocket.register
68300编辑于 2024-08-20 - 来自专栏前端框架
2025 年了，我不允许你还不知道 vite-plugin-pwa
prompt —— 手动提示用户更新 autoUpdate —— 后台自动更新 离线缓存（Cache Assets） 可以自动缓存： 页面路由 静态资源（js/css/png） 自定义指定的文件 支持 Workbox 的所有缓存策略，比如： CacheFirst NetworkFirst StaleWhileRevalidate 高级玩法 workbox: { runtimeCaching: [ { }, }, }, ] } 离线提示页面（Offline Fallback） 当网络断开时，访问 404 或请求资源失败，可以跳到自定义离线页面： VitePWA({ workbox
1.6K10编辑于 2025-04-28 - 来自专栏繁依Fanyi 的专栏
如何在 Vue 项目中缓存字体文件以提高性能
步骤： 安装 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
1.1K10编辑于 2024-09-05
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号