html5使用service worker实现离线缓存 html5使用PWA技术的核心步骤-html教程-PHP中文网

html5使用service worker实现离线缓存 html5使用PWA技术的核心步骤

爱谁谁

发布： 2025-10-20 13:19:01

原创

804人浏览过

答案：通过注册Service Worker并缓存关键资源，结合Web App Manifest和HTTPS，实现PWA离线访问与原生体验。1. 在页面加载后注册sw.js；2. sw.js中定义install和fetch事件，预缓存资源并优先从缓存响应请求；3. 配置manifest.json支持添加到主屏幕；4. 确保站点运行在HTTPS安全环境中。

html5使用service worker实现离线缓存 html5使用pwa技术的核心步骤

使用 Service Worker 实现离线缓存是 PWA（Progressive Web App）的核心功能之一。它能让网页在无网络环境下依然可用，提升加载速度和用户体验。以下是实现这一目标的关键步骤。

1. 创建并注册 Service Worker

要在项目中启用离线缓存，第一步是在浏览器中注册一个 Service Worker 文件。

在主页面的 JavaScript 中添加注册逻辑：

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

登录后复制

这段代码确保浏览器支持 Service Worker，并在页面加载完成后注册 sw.js 文件。

立即学习“前端免费学习笔记（深入）”；

2. 编写 Service Worker 缓存策略

在根目录创建 sw.js 文件，定义安装和激活事件，控制资源缓存。

常用策略为“缓存优先，网络回退”：

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/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);
      })
  );
});

登录后复制

install 阶段预缓存关键资源；fetch 阶段优先从缓存返回内容，若未命中则请求网络。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

3. 添加 Web App Manifest 实现“添加到主屏幕”

PWA 要具备类原生应用体验，需配置 manifest.json 文件。

在 HTML 中引入：

<link rel="manifest" href="/manifest.json">

登录后复制

创建 manifest.json 文件：

{
  "name": "我的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"
    },
    {
      "src": "/images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

登录后复制

这将允许用户将网站以全屏模式添加到设备主屏幕。