企业H5站点升级PWA (三)

如何测试和调试 Service Worker 的功能？

可以直接在你现在这个 sw.js 和 index.html 基础上，用浏览器和（如果有）WebView 来测试。分几步说最实用的操作。

---

1. 基本前提检查

1. 通过 HTTP/HTTPS 访问

   • PWA/Service Worker 只能在：
     • https://...
     • 或 http://localhost:xxxx
   • 不能用 file:// 直接打开 index.html。
   • 如果你是 WinForms + WebView2，要确认是访问一个本地起的服务（例如 http://127.0.0.1:5000），而不是直接加载本地文件路径。

2. 确认 index.html 已经注册 SW

   index.html 中要有类似代码（你可以再检查下是否已加）：

<script>if ('serviceWorker' in navigator) {window.addEventListener('load', function () {navigator.serviceWorker.register('./sw.js').then(function (registration) {console.log('Service Worker 注册成功:', registration.scope);}).catch(function (error) {console.error('Service Worker 注册失败:', error);});});}</script>

---

2. 在浏览器里调试 Service Worker（推荐用 Chrome/Edge）

2.1 查看 SW 是否成功安装

1. 打开你的站点，例如：http://localhost:5000/。
2. 打开开发者工具：
   • Chrome/Edge：F12 或 Ctrl+Shift+I。
3. 切到 Application 面板：
   • 左侧选择 Service Workers：
     • 应该能看到一条 sw.js 记录；
     • 状态是 activated and is running 或类似文字；
     • Scope 一般是 / 或你的子路径。
4. 如果看不到：
   • 看 Console 是否有 Service Worker 注册失败 的日志；
   • 确认访问协议是 http(s) 而不是 file://；
   • 确认 sw.js 路径没有 404。

2.2 强制更新/重新加载 Service Worker

在 Application > Service Workers 面板：

• 勾选 Update on reload：
  • 每次刷新页面时都会强制检查并安装新的 sw.js。
• 可以点击：
  • Unregister：注销当前 SW；
  • Stop：临时停止 SW 运行。

修改 sw.js 后，建议操作：

1. Unregister 旧的；
2. 刷新页面，让新版本安装/激活；
3. 再测试缓存行为。

---

3. 测试缓存是否生效（静态资源 cache-first）

你的 sw.js 使用的是 cache-first 策略，对静态资源进行缓存。

3.1 首次访问行为

1. 打开 Network 面板，勾选 Disable cache（浏览器自身缓存），方便看 Service Worker 的效果。
2. 首次加载站点：
   • index.html、index.js、index.css 等会走真实网络。
   • sw.js 的 install 事件会把 PRECACHE_URLS 里列的静态资源缓存到 densenapp-static-v1。

可以在 Console 里加一点日志辅助调试（可选）：

self.addEventListener('install', (event) => {console.log('[SW] Install');event.waitUntil(caches.open(CACHE_NAME).then((cache) => {console.log('[SW] Precaching:', PRECACHE_URLS);return cache.addAll(PRECACHE_URLS);}));self.skipWaiting();
});

3.2 第二次访问行为

1. 刷新页面（仍勾选 Disable cache）；
2. 在 Network 面板观察：
   • 对于 index.html、index.js、index.css 等：
     • Size 一栏应显示 (from ServiceWorker)；
     • 或者在 Initiator 里能看到 Service Worker。
3. 如果你在 sw.js 的 fetch 里加日志：

self.addEventListener('fetch', (event) => {const { request } = event;if (request.method !== 'GET') {return;}const url = new URL(request.url);console.log('[SW] Fetch:', url.href);// ...原有逻辑...
});

就可以在 Console 里看到 SW 正在接管哪些请求。

---

4. 测试离线场景（PWA 关键）

4.1 使用 DevTools 模拟离线

在 Network 面板：

1. 有一个下拉框（Online / Offline / Fast 3G 等），选择 Offline；
2. 刷新页面；
3. 预期行为（结合你当前 sw.js）：
   • 对于已经缓存的静态资源：
     • 仍能正常加载（index.html, index.js, index.css 等）；
   • 如果访问的是未缓存的静态资源：
     • 进入 catch 分支：
       • 如果是 HTML：返回缓存的 ./index.html；
       • 其他类型：返回 503 文本 网络不可用，且本资源未被缓存。

可以刻意添加一个新静态资源（比如 test-offline.js 不加到 PRECACHE_URLS），然后离线访问它，看是否走兜底逻辑。

4.2 手机真机测试（可选，但更贴近现场）

1. 把站点部署到内网/公网一个 HTTPS 地址；
2. 手机上用 Chrome/Edge 打开；
3. 打开开发者工具远程调试（Chrome DevTools 的 Remote Devices）；
4. 关闭 Wi-Fi / 移动网络，看能否仍然打开首页壳。

---

5. 调试缓存内容（Cache Storage）

在 Application 面板里：

1. 左侧选择 Cache Storage > densenapp-static-v1；
2. 右侧会列出当前所有缓存的请求 URL：
   • ./index.html
   • ./index.js
   • ./pda.js
   • 等等（来自你 PRECACHE_URLS 和运行时 cache.put 的资源）。
3. 你可以：
   • 右键单条记录 Delete；
   • 或在 Application 左侧 Clear storage 里勾选 Cache storage 然后点击 Clear site data 一键清空。

---

6. 常见调试坑和定位思路

1. sw.js 修改了但行为还是旧的

   • 先在 Application > Service Workers 里 Unregister；
   • 或勾上 Update on reload；
   • 或强刷：Ctrl+F5 再刷新几次。

2. 请求没有被 SW 接管

   • 确认：
     • fetch 事件里没有提前 return；
     • url.pathname 排除规则没写错，是否误把某路径当作 API 过滤掉了；
   • 在 fetch 回调最前面打 console.log('[SW] Fetch:', request.url);。

3. 和浏览器自带缓存搞混

   • 调试时勾 Disable cache，让浏览器不要再用 HTTP 缓存，只看 Service Worker 的行为；
   • 结合 Network 的 Size / Initiator 列来判断来源。

4. WebView 中调试

   • 如果是 WebView2，可以通过附加调试（Edge DevTools）来看到和浏览器类似的 Application > Service Workers 面板；
   • 如果是老 WebBrowser 控件（IE 内核），Service Worker 不支持，调试只在浏览器里进行。

---