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 实验室 - 分区存储策略
创建多个存储桶，分别设置持久化与配额策略，管理不同业务数据的存储优先级与驱逐顺序。
设备内存 (deviceMemory) 检测器 - 前端按需降级
显示navigator.deviceMemory数值，并给出基于内存的代码分割与功能降级建议。
scheduler.postTask优先级演示 - 用户交互优先
使用scheduler.postTask API安排不同优先级的任务，并观察执行顺序。
Lorem Pixel 占位图生成器 - 指定尺寸类别
生成指定宽度和高度的占位图片，可选择类别（自然、人物、抽象）和灰度。
任务批处理计划表 - 按情境分组
将相似任务拖动到同一批次，安排连续的专注时段批量处理，减少切换成本。
文件大小单位换算 - Bytes/KB/MB/GB/TB互转
输入数值，即时在字节、千字节、兆字节等之间转换。
多设备同步预览框架 - iframe并排
输入URL，在同一个页面上并排显示手机/平板/桌面三种尺寸的实时预览。
小费分配计算器 - 按工时/等级拆分
将总小费按照各员工工时或权重比例公平分配，适合餐饮服务行业。
步骤进度条生成器 - 多步表单指示器
生成包含已完成、活跃、未完成状态的横向步骤进度指示器HTML/CSS。
表单错误摘要组件生成器 - 顶部汇总与聚焦
为表单设计全局错误摘要区，当提交出错时自动生成错误链接并聚焦，符合 WCAG 3.3.1。
文本去重工具 - 行重复检测与删除
在线文本去重工具，检测并删除重复行，支持保留首次出现或删除全部重复行，快速清理数据。
网络速度测试 - 在线宽带测速工具
通过下载指定图片或数据包，估算当前网络的下载速度和延迟，纯前端测速。
文件下载时间计算器 - 网速与文件大小
输入文件大小和网络速度，计算预计下载时长。
原生懒加载标签生成 - loading=lazy批量
为图片/iframe列表自动添加loading='lazy'属性及fallback，优化页面性能。
CSS 级联层 (@layer) 优先级可视化 - 层叠顺序对比
将CSS规则分配到不同@layer，并可视化展示最终生效声明及其来源层级，深入理解级联。
文件传输时间计算器 - 带宽换算
输入文件大小和网络带宽，估算上传或下载所需的时间。
设计评审模板 - 结构化反馈收集
上传设计稿，按喜欢、疑问、建议三区邀请评审回复，形成报告。
轻量库存管理 - localStorage物品出入库
记录物品名称、数量，执行入库出库操作，自动计算剩余量，数据保存在浏览器。
剪贴板历史记录 - 浏览器内保存复制文本
监听并自动保存您复制的文本，可随时回溯粘贴，仅本地存储保障隐私。
聚餐一人一菜协调表 - 避免重复自带
创建活动分享链接，每个参与者填写自己要带的菜，自动汇总显示。
安全响应头检测 - HSTS/CSP/X-Frame等
输入URL，检测其是否包含常见安全增强的HTTP响应头并给出评分。
CSS级联层演示 - @layer优先级可视化
交互式调整@layer顺序和选择器，实时观察CSS级联层如何影响样式应用，学习现代特性。
滚动进度条生成 - 页面阅读指示器
生成固定在页面顶部或底部的滚动进度条，显示当前阅读进度。
MIME类型查询工具 - 文件扩展名与MIME互查
输入文件扩展名或MIME类型，查询对应的标准媒体类型，涵盖常见文档、图片、音视频格式。
事前验尸分析 - 设想项目已失败找原因
引导团队想象项目已经惨败，列出所有可能原因，然后防范。
图标字体生成器 - SVG转自定义Webfont
上传SVG图标，生成包含这些图标的Web字体文件包及CSS使用代码。
收据/收条生成器 - 收款确认单
快速制作包含收款人、金额、事由的简易收款收据图片。
SVG环形进度条生成器 - 绘图进度圈
设定百分比、颜色和粗细，生成环形SVG进度条代码，可增加动画。
仓库/柜子容积计算器 - 输入货物尺寸看需要多大
添加计划存放的箱子尺寸，预估所需的最小存储空间或柜号。