PWA 如何利用 Service Worker 进行离线缓存？

什么是 PWA？

PWA（Progressive Web App）是一种新型的 Web 应用程序，它结合了 Web 应用程序和本地应用程序的优点，能够在离线状态下运行，具有类似本地应用程序的体验。PWA 能够利用现代浏览器提供的技术，例如 Service Worker、Web App Manifest 等，来提供更好的性能和用户体验。

什么是 Service Worker？

Service Worker 是一种在浏览器后台运行的 JavaScript 脚本。它可以拦截网络请求和响应，能够缓存资源并在离线状态下使用。Service Worker 可以在 Web 应用程序中实现离线缓存、推送通知和后台同步等功能。

PWA 利用 Service Worker 进行离线缓存的过程如下：

1. 注册 Service Worker

在 Web 应用程序中注册 Service Worker，并指定 Service Worker 脚本的路径。

// javascriptcn.com 代码示例
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker 注册成功')
    })
    .catch(error => {
      console.error('Service Worker 注册失败', error)
    })
}

1. 安装 Service Worker

在 Service Worker 脚本中，监听 install 事件，进行资源缓存。

// javascriptcn.com 代码示例
const CACHE_NAME = 'my-cache'
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/image.png'
]

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('缓存资源')
        return cache.addAll(urlsToCache)
      })
  )
})

1. 激活 Service Worker

在 Service Worker 脚本中，监听 activate 事件，清除旧缓存。

// javascriptcn.com 代码示例
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys()
      .then(cacheNames => {
        return Promise.all(
          cacheNames.map(cacheName => {
            if (cacheName !== CACHE_NAME) {
              console.log('清除旧缓存:', cacheName)
              return caches.delete(cacheName)
            }
          })
        )
      })
  )
})

1. 使用缓存资源

在 Web 应用程序中，使用缓存资源。

// javascriptcn.com 代码示例
fetch('/api/data')
  .then(response => {
    if (response.ok) {
      return response.json()
    }
    throw new Error('网络请求失败')
  })
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    console.error('获取数据失败', error)
    // 从缓存中获取数据
    caches.match('/api/data')
      .then(response => {
        if (response) {
          return response.json()
        }
        throw new Error('无法从缓存中获取数据')
      })
      .then(data => {
        // 处理数据
      })
      .catch(error => {
        console.error('获取数据失败', error)
      })
  })

总结

PWA 利用 Service Worker 进行离线缓存，能够提供更好的性能和用户体验。Service Worker 能够拦截网络请求和响应，并进行资源缓存和离线使用。在 Web 应用程序中，注册、安装和激活 Service Worker，使用缓存资源，可以实现离线缓存的功能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6551eceed2f5e1655dbaa71b