PWA 如何实现离线功能

Service Worker的核心作用

• 概念：Service Worker是PWA实现离线功能的关键技术。它是一种在后台运行的脚本，独立于网页，可以拦截和处理网络请求，实现对缓存的精细控制。
• 注册过程：首先，在网页的JavaScript代码中需要注册Service Worker。例如，通过以下代码在网页的主脚本文件（通常是index.js）中进行注册：

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

• 上述代码检查浏览器是否支持Service Worker，如果支持，则注册一个名为service - worker.js的Service Worker脚本。这个脚本将在后台运行，用于处理缓存和网络请求等操作。

缓存策略与资源缓存

• 缓存策略选择：Service Worker可以采用不同的缓存策略。常见的有Cache - First（缓存优先）、Network - First（网络优先）和Stale - While - Revalidate（陈旧内容优先，同时更新缓存）等策略。
• 资源缓存操作：在Service Worker脚本中，可以使用Cache API来缓存网页资源。例如，采用Cache - First策略缓存页面的HTML文件、CSS样式表和JavaScript脚本等核心资源。以下是一个简单的示例：

  self.addEventListener('fetch', function (event) {
         
    event.respondWith(
        caches.open('my - cache - name')
       .then(function (cache) {
         
            return cache.match(event.request)
               .then(function (response) {
         
                    if (response) {
         
                        return response;
                    }
                    return fetch(event.request)
                       .then(function (response) {
         
                            cache.put(event.request, response.clone());
                            return response;
                        });
                });
        })
    );
  });
  

• 在这个示例中，当有fetch请求时，Service Worker首先会尝试从名为my - cache - name的缓存中查找匹配的资源。如果找到，则直接返回缓存中的资源。如果没有找到，则通过fetch请求从网络获取资源，获取成功后将资源存入缓存，然后返回给网页。

离线页面展示与数据存储

• 离线页面展示：通过缓存页面的HTML、CSS和JavaScript等资源，当用户离线访问时，浏览器可以直接从缓存中加载这些资源来展示页面。例如，一个新闻PWA可以缓存新闻文章的页面，当用户在离线状态下打开之前访问过的新闻文章时，依然可以正常阅读。
• 数据存储与更新：对于需要离线存储的数据，PWA可以使用IndexedDB或localStorage等浏览器存储技术。IndexedDB是一个功能强大的事务型数据库，可以存储大量结构化数据，适合存储复杂的数据对象。localStorage则相对简单，用于存储键值对数据。
• 例如，一个笔记类PWA可以使用IndexedDB存储用户的笔记内容。当用户离线添加笔记时，数据会被存储到IndexedDB中，等到网络恢复后，再将这些数据同步到服务器，从而实现数据的离线存储和更新。