How to make a website that works offline with HTML5?

要使网站支持离线运行，必须使用Service Worker而非已弃用的AppCache，具体步骤为：1. 注册Service Worker脚本以控制网络请求；2. 在install事件中缓存核心静态资源如HTML、CSS、JS和图片；3. 通过fetch事件拦截请求并优先返回缓存内容，实现离线访问；4. 可选地缓存API响应以支持动态内容；5. 添加manifest.json使网站可安装并具备PWA特性；6. 确保网站通过HTTPS部署以满足Service Worker安全要求。综上，离线功能依赖HTML5、JavaScript与Service Worker结合的现代方案，而非仅靠HTML5。

To make a website work offline using HTML5, you need to use the Application Cache (AppCache) or, preferably, Service Workers—a more modern and flexible approach. While AppCache is deprecated and no longer recommended, Service Workers are the standard way to enable offline functionality today.

Here’s how to build an offline-capable website using modern HTML5 and JavaScript techniques:

1. Use a Service Worker for Caching

A Service Worker is a script that runs in the background, separate from the web page, and controls how network requests are handled. It allows you to cache assets and serve them when the user is offline.

Steps to register a Service Worker:

• Create a service-worker.js file.
• Register it in your main JavaScript or inline script.

// main.js or inline script
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(reg => console.log('Service Worker registered', reg))
    .catch(err => console.log('Service Worker registration failed', err));
}

2. Cache Static Assets

In your service-worker.js, use the Cache API to store essential files like HTML, CSS, JS, and images.

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/script.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

This caches the listed files when the service worker is installed.

3. Serve Cached Content When Offline

Intercept fetch requests and return cached responses if available.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Return cached response if found
        if (response) {
          return response;
        }
        // Otherwise, fetch from network
        return fetch(event.request);
      })
  );
});

You can enhance this by using a cache-first or network-first strategy depending on your needs.

4. Handle Dynamic Content (Optional)

For apps that rely on APIs, you can cache API responses or show fallback content when offline.

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      caches.match(event.request).then(cached => {
        return cached || fetch(event.request);
      })
    );
  } else {
    // Handle static assets as before
    event.respondWith(
      caches.match(event.request).then(response => {
        return response || fetch(event.request);
      })
    );
  }
});

5. Add a Web App Manifest (for PWA)

To make your site installable and feel like a native app, include a manifest.json.

{
  "name": "My Offline Website",
  "short_name": "OfflineSite",
  "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"
    }
  ]
}

Link it in your HTML:

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

6. Ensure Proper Hosting (HTTPS)

Service Workers only work over HTTPS (except on localhost). Make sure your site is served securely.

Summary

To make a website work offline:

• ✅ Register a Service Worker
• ✅ Cache essential assets during installation
• ✅ Intercept fetch requests and serve cached content
• ✅ Optionally cache API responses
• ✅ Add a web app manifest for PWA support
• ✅ Host over HTTPS

AppCache used to be the way, but Service Workers are the current standard and give you full control over offline behavior.

Basically, it’s not about HTML5 alone—it’s HTML5 + JavaScript (Service Workers) + good caching strategy.

The above is the detailed content of How to make a website that works offline with HTML5?. For more information, please follow other related articles on the PHP Chinese website!