HTML5代码如何构建PWA应用 HTML5代码Service Worker的注册流程

雪夜 2025-10-22 00:00:00 次阅读

首先确保网站在HTTPS环境下，然后在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：

这段脚本检查浏览器是否支持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可被添加到主屏幕：

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"
  }]
}