晋江外贸网站开发淘宝客cms网站模板下载

晋江外贸网站开发,淘宝客cms网站模板下载,前端登陆页面设计模板,现在网站优化怎么做Service Worker 规范中明确定义的 6 种内部状态#xff08;internal states#xff09;这些状态描述了 Service Worker 线程在其生命周期中的不同阶段。以下是基于规范#xff08;如 W3C 和 WHATWG 标准#xff09;整理的表格#xff0c;准确对应这六种状态#xff1a;序…Service Worker 规范中明确定义的 6 种内部状态internal states这些状态描述了 Service Worker 线程在其生命周期中的不同阶段。以下是基于规范如 W3C 和 WHATWG 标准整理的表格准确对应这六种状态序号状态英文状态中文说明1parsed已解析浏览器成功解析注册的 Service Worker 脚本但尚未开始安装。这是注册后的初始状态。2installing安装中正在执行install事件。开发者通常在此阶段缓存静态资源。若脚本未改变此状态可能跳过。3installed已安装安装成功完成但尚未激活。此时 Service Worker 处于“等待”状态waiting尤其当已有旧版正在控制页面时。4activating激活中正在执行activate事件。通常用于清理旧缓存或迁移数据。5activated已激活Service Worker 已激活并开始控制其作用域内的页面仅对新导航或刷新后的页面生效可拦截fetch、处理推送等事件。6redundant已失效冗余Service Worker 被废弃。可能原因包括安装失败、被新版本取代、注册被注销unregister或脚本内容与已安装版本不一致导致回退。补充说明这些状态是Service Worker 内部状态internal state可通过ServiceWorker.state属性读取例如navigator.serviceWorker.controller?.state。状态转换是单向的除异常情况外parsed→installing→installed→activating→activated或在任一阶段失败/被取代 →redundant开发者可通过监听statechange事件跟踪状态变化此六状态模型是理解 Service Worker 生命周期和调试更新行为的核心依据。Service Worker 生命周期阶段状态说明1. 注册Registrationinstalling若首次注册通过navigator.serviceWorker.register()注册 Service Worker 脚本。浏览器下载脚本并准备安装。2. 安装Installinginstalling触发install事件。在此阶段可缓存静态资源如通过 Cache API。若安装成功进入“已安装”状态若失败如缓存失败则进入“冗余redundant”状态。3. 已安装 / 等待激活Installed / Waitingwaiting安装成功但尚未激活。如果已有旧版 Service Worker 正在控制客户端则新版本会等待除非调用skipWaiting()。4. 激活Activatingactivating触发activate事件。通常用于清理旧缓存或执行迁移逻辑。激活后Service Worker 开始控制页面仅对新打开/刷新的页面生效。5. 已激活ActivatedactiveService Worker 处于活跃状态可拦截fetch、push、sync等事件处理网络请求和后台任务。6. 冗余RedundantredundantService Worker 被废弃原因可能包括安装失败、被新版本取代、或注册被注销。此时不再接收事件。补充说明页面必须通过 HTTPS或 localhost才能使用 Service Worker。Service Worker 的作用域scope由注册时的路径决定。只有当所有受控页面关闭或新版本接管后旧 Service Worker 才会被替换。该生命周期确保了 Web 应用更新的平滑过渡与离线能力的可靠实现。完整的注册函数async function registerServiceWorker() { if (!(serviceWorker in navigator)) { console.warn(当前浏览器不支持 Service Worker); return; } try { const registration await navigator.serviceWorker.register(./js/serviceWorker.js, { //scope: /, // 控制范围 updateViaCache: none // 控制更新行为 }); console.log(Service Worker 注册成功作用域:, registration.scope); // 监听生命周期 trackServiceWorkerLifecycle(registration); // 监听控制器变化 navigator.serviceWorker.addEventListener(controllerchange, () { console.log(页面控制器已变更可能需要刷新页面); }); return registration; } catch (error) { console.error(Service Worker 注册失败:, error); throw error; } } function trackServiceWorkerLifecycle(registration) { const logState (worker, label Worker) { if (!worker) return; const log (message) console.log(${label}: ${message}); log(初始状态: ${worker.state}); worker.addEventListener(statechange, () { log(状态变为: ${worker.state}); switch (worker.state) { case installed: if (registration.waiting) { log(已安装等待激活); // 可以在这里提示用户刷新页面 } break; case activated: log(已激活可以控制页面); break; case redundant: log(已废弃被新版本替换); break; } }); }; // 监听现有 worker if (registration.installing) logState(registration.installing, Installing); if (registration.waiting) logState(registration.waiting, Waiting); if (registration.active) logState(registration.active, Active); // 监听新 worker 安装 registration.addEventListener(updatefound, () { console.log(开始安装新版本的 Service Worker); logState(registration.installing, New Installing); }); } // 使用示例 window.addEventListener(load, () { registerServiceWorker().then(registration { // 可以在这里添加更多逻辑 }); });更新检查// 检查 Service Worker 更新 function checkForUpdates() { if (!navigator.serviceWorker || !navigator.serviceWorker.controller) { return; } navigator.serviceWorker.ready.then((registration) { registration.update().then(() { if (registration.waiting) { console.log(有新的 Service Worker 等待激活); // 可以提示用户刷新页面 showUpdateNotification(); } }); }); } // 提示用户刷新 function showUpdateNotification() { if (confirm(有新的版本可用是否立即刷新)) { navigator.serviceWorker.controller.postMessage({ type: SKIP_WAITING }); window.location.reload(); } }