PWA 的离线访问是如何实现的？

推荐答案

PWA 的离线访问是通过 Service Worker 和 Cache API 实现的。Service Worker 是一个运行在浏览器后台的脚本，它可以拦截网络请求并决定如何响应这些请求。通过 Cache API，开发者可以将资源缓存到本地，使得在离线状态下仍然可以访问这些资源。

具体实现步骤如下：

1. 注册 Service Worker：在页面加载时，注册一个 Service Worker 脚本。
2. 安装 Service Worker：在 Service Worker 的 install 事件中，预缓存关键资源。
3. 拦截请求：在 Service Worker 的 fetch 事件中，拦截网络请求并从缓存中返回资源。
4. 更新缓存：在 Service Worker 的 activate 事件中，清理旧缓存。

本题详细解读

1. 注册 Service Worker

首先，在页面的 JavaScript 中注册 Service Worker。通常会在页面加载时进行注册：

// www.javascriptcn.com code example
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker 注册成功:', registration);
    })
    .catch(function(error) {
      console.log('Service Worker 注册失败:', error);
    });
}

2. 安装 Service Worker

在 service-worker.js 文件中，监听 install 事件，并在该事件中预缓存关键资源：

// www.javascriptcn.com code example
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js',
  '/images/logo.png'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

3. 拦截请求

在 fetch 事件中，拦截网络请求并从缓存中返回资源。如果缓存中没有该资源，则从网络请求：

// www.javascriptcn.com code example
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

4. 更新缓存

在 activate 事件中，清理旧缓存，确保用户始终使用最新的资源：

// www.javascriptcn.com code example
self.addEventListener('activate', function(event) {
  const cacheWhitelist = ['my-site-cache-v1'];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

通过以上步骤，PWA 可以实现离线访问功能，确保用户在无网络连接的情况下仍然可以访问应用的核心功能。