UD5工具箱
Cache API 浏览器 - 查看与删除Service Worker缓存
枚举当前域下所有Cache Storage，查看条目详情，手动删除缓存，辅助PWA开发调试。
Service Worker生成器 - 基础缓存策略配置
Service Worker 缓存策略生成器
可视化配置缓存策略，一键生成生产可用的 Service Worker 代码
快速预设
默认缓存策略
Cache First
Network First
Stale While Revalidate
Network Only
Cache Only
📦 Cache First：优先从缓存读取，命中率最高，适合静态资源。
缓存基础配置
预缓存资源 (Install时缓存)
每行一个URL路径，将在 Service Worker 安装时自动缓存。
运行时缓存规则
为特定URL模式指定独立的缓存策略，优先级高于默认策略。
// 请配置左侧选项，代码将实时生成...
常见问题与知识点
Service Worker 是运行在浏览器后台的独立脚本，充当网页与网络之间的代理。它可以拦截网络请求、管理缓存、实现离线访问和推送通知，是 PWA（渐进式Web应用）的核心技术。Service Worker 拥有独立的生命周期，包括安装(install)、激活(activate)和运行(running)阶段。
Cache First 优先从缓存读取资源，缓存未命中时才请求网络。最适合不常变动的静态资源，如CSS样式表、JS库、字体文件、Logo图片等。优点：响应极快，节省带宽，支持完全离线。缺点：缓存更新不及时，适合版本化管理的资源。
Network First 优先尝试从网络获取最新资源，网络失败时才回退到缓存。适合需要新鲜数据但允许离线降级的场景，如API接口响应、用户数据、新闻内容等。优点：用户总能获得最新内容。缺点：网络慢时响应慢，依赖网络可用性。
Stale While Revalidate 立即返回缓存中的版本（可能稍旧），同时在后台发起网络请求更新缓存。下次请求时就能获得最新版本。这是用户体验与新鲜度之间的最佳平衡，广泛用于图片、用户头像、社交媒体内容等场景。优点：响应极快又能自动更新。
将生成的代码保存为
sw.js 文件放在网站根目录，然后在主页面JS中添加注册代码：if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW failed:', err));
}Service Worker 只能注册在同源路径下，且需要 HTTPS 环境（localhost 除外）。安装(Install) → 等待激活(Waiting) → 激活(Activate) → 运行(Running)。安装阶段通常用于预缓存关键资源；激活阶段清理旧缓存；运行阶段拦截fetch请求。当SW文件内容发生变化时，浏览器会安装新版本，但需等所有使用旧版本的页面关闭后才会激活。
预缓存在SW安装时就缓存指定的资源，确保关键资源（HTML、CSS、JS）离线可用，是"应用壳"的核心。运行时缓存在请求发生时动态缓存响应，适合数量不确定或动态变化的资源。两者结合使用：预缓存保证核心功能离线可用，运行时缓存优化重复访问体验。
修改SW文件内容（如更新缓存版本号）后，浏览器检测到变化会自动安装新版本。通过
self.skipWaiting()可让新SW立即激活，通过clients.claim()可让新SW立即控制所有页面。本工具生成的代码已包含skipWaiting()和clients.claim()，确保更新及时生效。Service Worker 已被所有现代浏览器广泛支持：Chrome 45+、Firefox 44+、Safari 11.1+、Edge 17+。全球覆盖率超过96%。移动端iOS Safari从11.3版本开始支持，覆盖绝大多数苹果设备。建议在注册前进行特性检测：
if ('serviceWorker' in navigator) { ... }。缓存存储空间有限（各浏览器通常为50MB-250MB），无限制缓存可能导致存储溢出或自动清理不可控。最大条目数限制缓存文件数量，超出时自动删除最旧的条目；最大缓存时间确保过期资源被清理。这两项配置让缓存管理更可控，避免用户设备存储被过度占用。
代码已复制到剪贴板
Storage Buckets API 实验室 - 分区存储策略
创建多个存储桶，分别设置持久化与配额策略，管理不同业务数据的存储优先级与驱逐顺序。
HTTP/2 Server Push 分析器 - 检查推送资源与缓存
模拟服务器推送资源，展示推送的资源和缓存行为，帮助优化 HTTP/2 策略。
Webpack 配置向导 - 问答式生成配置文件
通过交互式问答选择入口、输出、Loaders 和 Plugins，生成 webpack.config.js。
设备内存 (deviceMemory) 检测器 - 前端按需降级
显示navigator.deviceMemory数值，并给出基于内存的代码分割与功能降级建议。
浏览器存储配额估算器 - 检查剩余可用空间
调用 StorageManager API 获取当前源的总配额和使用量，显示剩余可用空间。
scheduler.postTask优先级演示 - 用户交互优先
使用scheduler.postTask API安排不同优先级的任务，并观察执行顺序。
Lorem Pixel 占位图生成器 - 指定尺寸类别
生成指定宽度和高度的占位图片，可选择类别（自然、人物、抽象）和灰度。
任务批处理计划表 - 按情境分组
将相似任务拖动到同一批次，安排连续的专注时段批量处理，减少切换成本。
文件大小单位换算 - Bytes/KB/MB/GB/TB互转
输入数值，即时在字节、千字节、兆字节等之间转换。
多设备同步预览框架 - iframe并排
输入URL，在同一个页面上并排显示手机/平板/桌面三种尺寸的实时预览。
LL(1) 分析表生成器 - 上下文无关文法解析
输入 CFG，计算 FIRST/FOLLOW 集并生成 LL(1) 分析表，标注冲突。
小费分配计算器 - 按工时/等级拆分
将总小费按照各员工工时或权重比例公平分配，适合餐饮服务行业。
局域网速度估测 - 文件传输时间模拟
根据已知带宽或手动输入，估算传输指定大小文件所需时间。
步骤进度条生成器 - 多步表单指示器
生成包含已完成、活跃、未完成状态的横向步骤进度指示器HTML/CSS。
表单错误摘要组件生成器 - 顶部汇总与聚焦
为表单设计全局错误摘要区，当提交出错时自动生成错误链接并聚焦，符合 WCAG 3.3.1。
语义版本范围测试器 - 检查版本是否满足约束
输入目标版本和范围表达式（如 ^1.2.3），判断是否匹配，帮助理解依赖解析规则。
文本去重工具 - 行重复检测与删除
在线文本去重工具，检测并删除重复行，支持保留首次出现或删除全部重复行，快速清理数据。
步骤进度指示器生成器 - 多步流程可视化
设置步骤数量和当前步骤，生成带连线的步骤进度条，常用于结账或表单引导。
网络速度测试 - 在线宽带测速工具
通过下载指定图片或数据包，估算当前网络的下载速度和延迟，纯前端测速。
文件下载时间计算器 - 网速与文件大小
输入文件大小和网络速度，计算预计下载时长。
原生懒加载标签生成 - loading=lazy批量
为图片/iframe列表自动添加loading='lazy'属性及fallback，优化页面性能。
CSS 级联层 (@layer) 优先级可视化 - 层叠顺序对比
将CSS规则分配到不同@layer，并可视化展示最终生效声明及其来源层级，深入理解级联。
轻量级网速测试 - 下载/上传速度与延迟
通过下载和上传小文件测量当前网络带宽与延迟，无需 Flash 或插件。
Dockerfile 在线检查器 - 最佳实践与优化建议
粘贴 Dockerfile 内容，检查常见问题如层数过多、未使用特定用户、标签缺失等。
文件传输时间计算器 - 带宽换算
输入文件大小和网络带宽，估算上传或下载所需的时间。
地理位置 API 演示 - 获取当前设备坐标
请求用户位置授权，获取经纬度、精度、海拔等信息，并在开放街道地图上标注位置。
设计评审模板 - 结构化反馈收集
上传设计稿，按喜欢、疑问、建议三区邀请评审回复，形成报告。
轻量库存管理 - localStorage物品出入库
记录物品名称、数量，执行入库出库操作，自动计算剩余量，数据保存在浏览器。
剪贴板历史记录 - 浏览器内保存复制文本
监听并自动保存您复制的文本，可随时回溯粘贴，仅本地存储保障隐私。