首先确保网站在 http S 环境下，然后在html 中注册 Service Worker：通过 javaScript 检查支持性并注册 sw.js；接着在 sw.js 中实现安装时缓存资源和 fetch 时优先返回缓存；最后添加 manifest.json 使应用可安装。
要构建一个 PWA（渐进式 Web 应用），html5本身是基础结构，但核心功能如离线访问、后台同步和推送通知依赖于 Service Worker。下面说明如何通过 HTML5 配合 javascript 完成 PWA 中 Service Worker 的注册流程。
1. 确保网站运行在 https 环境下
Service Worker 要求安全上下文，开发时 localhost 除外：
- 生产环境必须使用 HTTPS 协议
- 本地测试可使用 http://localhost
2. 创建并注册 Service Worker
在主 HTML 文件中（如 index.html），添加 JavaScript 代码来注册 Service Worker：
<script> if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('Service Worker registered:', registration); }) .catch(error => { console.log('Service Worker registration failed:', error); }); }); } </script>
这段脚本检查 浏览器 是否支持 Service Worker，支持则在页面加载完成后注册根目录下的 sw.js 文件。
立即学习 “ 前端免费学习笔记（深入）”；
3. 编写 Service Worker 文件（sw.js）
在网站根目录创建sw.js，实现缓存逻辑：
const CACHE_NAME = 'my-pwa-cache-v1'; const urlsToCache = ['/', '/styles/main.css', '/scripts/app.js', '/images/logo.png' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { return response || fetch(event.request); }) ); });
上述代码在安装阶段预缓存资源，并在每次网络请求时优先返回缓存内容，实现离线访问。
4. 添加web app Manifest
在 HTML 中引入 manifest.json，使 PWA 可被添加到主屏幕：
<link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#000000">
manifest.json示例内容：
{"name": "My PWA", "short_name": "PWA", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [{ "src": "/images/icon-192x192.png", "sizes": "192x192", "type": "image/png"}] }
基本上就这些。通过 HTML5 提供页面结构，结合 Service Worker 实现离线能力，再配以 manifest 实现安装体验，即可构建一个基础 PWA 应用。关键点在于 Service Worker 的注册时机与缓存策略设计。
