渐进式Web应用（PWA）：如何利用`Service Worker`和`Manifest`文件，为网站提供类似原生应用的体验。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

渐进式Web应用（PWA）：利用 Service Worker 和 Manifest 文件打造原生应用体验

各位同学，大家好。今天我们来聊聊渐进式Web应用（PWA），重点是如何利用 Service Worker 和 Manifest 文件，让我们的网站拥有更接近原生应用的体验。

PWA 是一种使用 Web 技术构建，并拥有原生应用体验的 Web 应用。它结合了 Web 的开放性和可发现性，以及原生应用的强大功能和安装性。 PWA 并非指某一项特定的技术，而是一组 Web 技术和设计模式的集合，旨在提供更可靠、快速和引人入胜的用户体验。

PWA 的关键特性

PWA 具有以下关键特性：

渐进增强（Progressive Enhancement）： 核心功能应适用于所有用户，无论他们使用何种浏览器。
响应式（Responsive）： 适应任何屏幕尺寸：桌面端、移动端、平板电脑等。
离线工作（Offline-First）： 在离线或低质量网络环境下也能提供服务。
类似应用（App-like）： 拥有类似原生应用的用户界面和交互体验。
及时更新（Always Up-to-date）： 借助 Service Worker 实现后台更新。
安全（Secure）： 通过 HTTPS 协议提供服务，保证数据安全。
可发现性（Discoverable）： 可以通过搜索引擎发现。
可重新参与（Re-engageable）： 通过推送通知等方式重新吸引用户。
可安装（Installable）： 可以安装到用户的设备主屏幕，像原生应用一样运行。
链接性（Linkable）： 可以通过 URL 轻松分享。

在这些特性中，Service Worker 和 Manifest 文件是实现 PWA 的核心组成部分。接下来，我们将深入探讨它们的作用和使用方法。

Manifest 文件：定义 Web 应用的元数据

Manifest 文件是一个 JSON 格式的文件，用于描述 Web 应用的元数据，例如应用名称、图标、启动画面、主题颜色等。浏览器会读取 Manifest 文件，以便将 Web 应用安装到用户的设备主屏幕上，并以类似原生应用的方式运行。

Manifest 文件示例：

{
  "short_name": "My PWA",
  "name": "My Awesome Progressive Web App",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

Manifest 文件常用字段说明：

字段	说明	示例
`short_name`	应用的简短名称，用于在主屏幕和启动器中显示。	"My PWA"
`name`	应用的完整名称，用于在安装提示和其他地方显示。	"My Awesome Progressive Web App"
`icons`	应用的图标列表，浏览器会根据设备的分辨率选择合适的图标。建议提供多种尺寸的图标，例如 192×192、512×512。	见上面代码示例
`start_url`	应用启动时加载的 URL。	"/"
`background_color`	应用启动画面使用的背景颜色。	"#3367D6"
`display`	应用的显示模式。可选值包括：`standalone`（以独立窗口运行，隐藏浏览器地址栏）、`fullscreen`（全屏模式）、`minimal-ui`（显示最小化的浏览器 UI）、`browser`（在浏览器标签页中运行）。	"standalone"
`scope`	应用的作用域，定义了哪些 URL 被视为应用的一部分。	"/"
`theme_color`	应用的主题颜色，用于自定义浏览器的 UI 颜色。	"#3367D6"
`description`	应用的描述，用于在应用商店或其他地方显示。 (可选)	"A simple PWA example."
`categories`	应用的类别，用于在应用商店或其他地方显示。 (可选) 可以是一个字符串数组。	`["productivity", "utilities"]`
`screenshots`	应用的截图列表，用于在应用商店或其他地方显示。 (可选) `src` 指向截图的 URL，`sizes` 指示截图的尺寸，`type` 指示截图的 MIME 类型。	略
`related_applications`	应用的相关应用列表，例如原生应用。 (可选)	略
`prefer_related_applications`	是否优先使用相关应用。 (可选) 如果设置为 `true`，浏览器会优先尝试打开相关应用，而不是 PWA。	`false`

在 HTML 中引用 Manifest 文件：

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

将上述代码添加到 HTML 页面的 <head> 标签中，浏览器就会自动加载 manifest.json 文件。

验证 Manifest 文件：

可以使用 Chrome DevTools 的 "Application" 面板中的 "Manifest" 部分来验证 Manifest 文件是否正确配置。

Service Worker：拦截网络请求，实现离线缓存和推送通知

Service Worker 是一个在浏览器后台运行的 JavaScript 脚本，它可以拦截网络请求，并对请求进行处理。 Service Worker 可以用于实现离线缓存、推送通知、后台同步等功能，是 PWA 实现离线工作和增强用户体验的关键技术。

Service Worker 的生命周期：

Service Worker 的生命周期包括以下几个阶段：

注册（Register）： 浏览器首次访问页面时，需要注册 Service Worker。
安装（Install）： 注册成功后，Service Worker 会进入安装阶段。在这个阶段，可以缓存静态资源，例如 HTML、CSS、JavaScript、图片等。
激活（Activate）： 安装成功后，Service Worker 会进入激活阶段。在这个阶段，可以清理旧的缓存，并准备好处理网络请求。
运行（Running）： 激活成功后，Service Worker 就可以拦截网络请求，并对请求进行处理。
更新（Update）： 当 Service Worker 文件发生变化时，浏览器会自动更新 Service Worker。
停止（Terminated）： 当 Service Worker 长时间没有被使用时，浏览器会停止 Service Worker。

Service Worker 示例：

以下是一个简单的 Service Worker 示例，用于缓存静态资源并实现离线访问。

// service-worker.js

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/css/style.css',
  '/js/main.js',
  '/images/logo.png'
];

// 安装 Service Worker
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// 激活 Service Worker
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

// 拦截网络请求
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 缓存命中
        if (response) {
          return response;
        }

        // 缓存未命中，发起网络请求
        return fetch(event.request).then(
          response => {
            // 检查是否有效
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // 克隆一份 response，因为 response body 是 stream，只能读取一次
            const responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

代码解释：

CACHE_NAME：缓存的名称。
urlsToCache：需要缓存的 URL 列表。
install 事件：在 Service Worker 安装时触发。使用 caches.open() 方法打开一个缓存，并使用 cache.addAll() 方法将 urlsToCache 中的所有 URL 添加到缓存中。
activate 事件：在 Service Worker 激活时触发。清理旧的缓存，只保留 cacheWhitelist 中的缓存。
fetch 事件：在浏览器发起网络请求时触发。使用 caches.match() 方法在缓存中查找请求对应的资源。如果缓存命中，则直接返回缓存的资源。如果缓存未命中，则发起网络请求，并将响应缓存起来。

注册 Service Worker：

在 HTML 或 JavaScript 中注册 Service Worker。

// index.js

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

代码解释：

首先检查浏览器是否支持 Service Worker。
然后在 window.addEventListener('load', ...) 中注册 Service Worker。确保页面加载完成后再注册 Service Worker，避免阻塞页面渲染。
使用 navigator.serviceWorker.register() 方法注册 Service Worker。
如果注册成功，则打印 Service Worker 的作用域。
如果注册失败，则打印错误信息。

测试 Service Worker：

可以使用 Chrome DevTools 的 "Application" 面板中的 "Service Workers" 部分来测试 Service Worker 是否正常工作。

打开 Chrome DevTools。
选择 "Application" 面板。
选择 "Service Workers" 选项卡。
查看 Service Worker 的状态。
可以使用 "Update" 按钮强制更新 Service Worker。
可以使用 "Unregister" 按钮注销 Service Worker。
勾选 "Offline" 复选框，模拟离线环境，测试 Service Worker 的离线缓存功能。

常用 Service Worker 缓存策略

Cache First: 优先从缓存中获取资源，如果缓存中没有，则发起网络请求，并将响应缓存起来。适用于静态资源，例如 HTML、CSS、JavaScript、图片等。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request).then(response => {
          return caches.open(CACHE_NAME).then(cache => {
            cache.put(event.request, response.clone());
            return response;
          });
        });
      })
  );
});

Network First: 优先发起网络请求，如果网络请求成功，则将响应缓存起来。如果网络请求失败，则从缓存中获取资源。适用于需要实时更新的资源，例如 API 数据。

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).then(response => {
      return caches.open(CACHE_NAME).then(cache => {
        cache.put(event.request, response.clone());
        return response;
      });
    }).catch(() => {
      return caches.match(event.request);
    })
  );
});

Cache Only: 只从缓存中获取资源，不发起网络请求。适用于完全离线的应用。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
  );
});

Network Only: 只发起网络请求，不使用缓存。适用于不希望被缓存的资源。

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
  );
});

Stale-While-Revalidate: 从缓存中获取资源，同时发起网络请求更新缓存。适用于需要快速响应，但又需要保持最新状态的资源。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      const fetchPromise = fetch(event.request).then(networkResponse => {
        caches.open(CACHE_NAME).then(cache => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
      });
      return response || fetchPromise;
    })
  );
});

使用 Workbox 简化 Service Worker 开发

Workbox 是 Google 提供的一组 JavaScript 库，用于简化 Service Worker 的开发。 Workbox 提供了各种模块，用于缓存资源、管理路由、处理推送通知等。使用 Workbox 可以大大减少 Service Worker 的代码量，并提高开发效率。

Workbox 的优势：

简化 Service Worker 开发： Workbox 提供了各种模块，简化了 Service Worker 的开发，无需手动编写大量的代码。
提供各种缓存策略： Workbox 提供了各种缓存策略，可以根据不同的需求选择合适的缓存策略。
支持离线分析： Workbox 可以记录离线用户的行为，并将数据同步到服务器。
自动更新 Service Worker： Workbox 可以自动更新 Service Worker，确保用户始终使用最新的版本。
跨浏览器兼容性： Workbox 经过了充分的测试，可以在各种浏览器上正常工作。

Workbox 示例：

使用 Workbox 缓存静态资源：

// service-worker.js

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst, NetworkFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// 缓存静态资源
registerRoute(
  /.(?:js|css|html|png|jpg|jpeg|svg)$/,
  new StaleWhileRevalidate({
    cacheName: 'static-resources',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  })
);

// 缓存图片资源
registerRoute(
  /.(?:png|jpg|jpeg|svg|gif)$/,
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 60 * 24 * 60 * 60, // 60 Days
      }),
    ],
  })
);

// 缓存 API 数据
registerRoute(
  '/api/*',
  new NetworkFirst({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60, // 5 Minutes
      }),
    ],
  })
);

代码解释：

使用 registerRoute() 方法注册路由。
使用 StaleWhileRevalidate、CacheFirst、NetworkFirst 等策略定义缓存策略。
使用 CacheableResponsePlugin 插件缓存符合条件的响应。
使用 ExpirationPlugin 插件设置缓存的最大条目数和过期时间。

安装 Workbox：

可以使用 npm 或 yarn 安装 Workbox。

npm install workbox-webpack-plugin --save-dev

或者

yarn add workbox-webpack-plugin --dev

然后在 webpack 配置文件中配置 Workbox。

// webpack.config.js

const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new WorkboxPlugin.GenerateSW({
      // 这些选项帮助 ServiceWorkers 快速激活
      // 允许已安装的 ServiceWorkers 在没有强制用户刷新页面的情况下控制网页
      clientsClaim: true,
      skipWaiting: true,
      // ...其他配置
    })
  ]
};

PWA 的部署和维护

PWA 的部署和维护与普通的 Web 应用类似，需要注意以下几点：

使用 HTTPS 协议： PWA 必须使用 HTTPS 协议，以保证数据安全。
提供 Manifest 文件： 提供有效的 Manifest 文件，以便浏览器可以将 Web 应用安装到用户的设备主屏幕上。
注册 Service Worker： 注册 Service Worker，以便实现离线缓存和推送通知等功能。
定期更新 Service Worker： 定期更新 Service Worker，以便修复 bug 和添加新功能。
监控 PWA 的性能： 使用 Chrome DevTools 或 Lighthouse 等工具监控 PWA 的性能，并进行优化。

PWA 的优势

PWA 相比于传统的 Web 应用和原生应用，具有以下优势：

更好的用户体验： PWA 具有类似原生应用的用户界面和交互体验，可以提供更流畅的用户体验。
离线工作能力： PWA 可以在离线或低质量网络环境下也能提供服务，提高了应用的可用性。
更快的加载速度： PWA 可以缓存静态资源，从而加快应用的加载速度。
更低的开发成本： PWA 使用 Web 技术构建，开发成本比原生应用更低。
更容易部署和维护： PWA 的部署和维护与普通的 Web 应用类似，更容易部署和维护。
跨平台兼容性： PWA 可以在各种平台上运行，无需为不同的平台开发不同的应用。
可发现性： PWA 可以通过搜索引擎发现，更容易被用户找到。

PWA 的局限性

PWA 也存在一些局限性：

浏览器兼容性： 虽然主流浏览器都支持 PWA，但一些老旧的浏览器可能不支持。
硬件访问权限： PWA 无法像原生应用一样访问所有的硬件功能，例如蓝牙、NFC 等。
推送通知限制： 一些浏览器限制了 PWA 的推送通知功能。
性能限制： 在一些复杂的应用场景下，PWA 的性能可能不如原生应用。

PWA 的未来发展趋势

PWA 的未来发展趋势包括：

更强大的硬件访问权限： 随着 Web API 的不断发展，PWA 将获得更强大的硬件访问权限。
更好的性能： 随着 Web 技术的不断优化，PWA 的性能将得到进一步提升。
更广泛的应用场景： PWA 将被应用于更多的场景，例如电商、新闻、社交、游戏等。
与原生应用的融合： PWA 将与原生应用进行更深入的融合，例如使用 Web Components 构建原生应用界面。

总结

今天我们深入探讨了如何利用 Service Worker 和 Manifest 文件打造原生应用体验的 PWA。通过学习和实践，我们可以将现有的 Web 应用改造成 PWA，为用户提供更佳的体验。

最后的几句

理解 Manifest 和 Service Worker 是开发 PWA 的关键，希望大家能够深入学习和实践，掌握这些技术，并将其应用到实际项目中。

渐进式Web应用（PWA）：利用 Service Worker 和 Manifest 文件打造原生应用体验

PWA 的关键特性

Manifest 文件：定义 Web 应用的元数据

Service Worker：拦截网络请求，实现离线缓存和推送通知

常用 Service Worker 缓存策略

使用 Workbox 简化 Service Worker 开发

PWA 的部署和维护

PWA 的优势

PWA 的局限性

PWA 的未来发展趋势

总结

最后的几句

发表回复 取消回复

发表回复取消回复