渐进式 Web 应用 (PWA) 简介：Service Worker 和 Manifest

发表 admin at 2024年8月26日

类别

未分类

标签

得益于以下技术服务工作者，网站和网络应用现在可以越来越像支持它的浏览器上的原生应用一样运行。这就是我们所说的渐进式网络应用 (PWA)。

渐进式 Web 应用允许您执行诸如安装到主屏幕以及离线时可访问您的应用等操作。请尝试一下，如果您使用的是 Chrome 或 Firefox，请关闭 Wi-Fi 并重新加载此页面。您将看到页面加载正常，因为它已被缓存，并且缓存版本由 Service Worker 提供。

为了使 Web 应用被视为渐进式 Web 应用，需要满足以下几点：

渐进式 Web 应用检查清单

以下 3 个对于基本渐进式 Web 应用程序的运行最为重要：

该网站必须通过https
你的应用应该有一个Web 应用清单文件
您的应用应该有一个可运行的服务工作者

了解了这三点后，您将拥有一个基本的渐进式 Web 应用程序，该应用程序可以离线使用并从缓存中加载静态资产。您可以使用Lighthouse Chrome 扩展程序运行审核，并查看您的应用在频谱中的位置：

Lighthouse 插件实际作用

Web 应用清单

网络应用清单是一个包含应用元数据的 Json 文件。清单中的内容尤其重要，它允许 Android 手机上的 Chrome 等浏览器向重复访问者提供在主屏幕上安装网络应用的选项。

此Web App Manifest Generator可轻松生成 manifest.json 文件。它甚至可以从一个 512x512 图标生成所有不同大小的图标。

获得 manifest.json 文件后，将其包含在应用程序的 head 部分，内容如下：

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

以下是该网站的 Web 应用清单内容示例：

{
  "name": "Alligator.io",
  "short_name": "Alligator",
  "theme_color": "#138e69",
  "background_color": "#f8ea48",
  "display": "browser",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

服务工作者

Service Workers 是一些现代浏览器中提供的一项新技术，允许控制网络请求。Service Workers 可以缓存资产并控制当无法访问网络或访问速度非常慢时会发生什么。对于 Web 应用，可以缓存应用外壳的资产，然后在离线或连接性较差时始终可用。

注册 Service Worker

获得服务工作者的第一步是注册它。

以下是可用于注册 Service Worker 的示例脚本。请注意，它首先检查 Service Worker 是否受支持：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    console.log('ServiceWorker registration successful!');
  }).catch(function(err) {
    console.log('ServiceWorker registration failed: ', err);
  });
}

注意 Service Worker 位于根文件夹中。这意味着它将被覆盖到整个 Web 应用程序。如果它位于子文件夹中，则默认情况下它将仅限于该子文件夹。

服务工作者

现在对于服务工作线程本身来说，它可能变得非常复杂，而像SW-Toolbox这样的工具可以真正帮助减少设置服务工作线程所需的样板代码。手动编写服务工作线程涉及为安装，激活和拿来事件，但 SW-Toolbox 会在后台处理这些事情。

你可以像这样从 npm 安装 SW-Toolbox：

$ npm install --save sw-toolbox

然后，在你注册的 Service Worker 中（例如：服务-worker.js），使用自我导入脚本()导入 SW-Toolbox：

self.importScripts('node_modules/sw-toolbox/sw-toolbox.js');

对于此网站，除了导入 SW-Toolbox 之外，还需要以下内容：

self.toolbox.precache(['/images/logo-small.svg', '/images/web-icons/webicon-twitter.svg', '/images/web-icons/webicon-facebook.svg']);
self.toolbox.router.get('/*', toolbox.networkFirst);

这会预先缓存一些资产，然后缓存所有内容，但如果网络不可用，则会先尝试从网络获取新数据，然后默认使用缓存版本。

这对于像这样的静态网站来说效果很好，但缓存所有内容对于具有动态数据的实际 Web 应用程序不起作用。您可以使用此使用指南和此博客文章深入了解 SW-Toolbox 的功能。

如果您想深入了解 Service Workers，Mozilla 整理了一份Service Workers Cookbook，其中包含服务工作者可以执行的各种操作的示例代码。

测试

一切就绪后，您可以从 Chrome DevTools 的应用程序选项卡中检查 Web 应用清单和服务工作线程：

检查 Service Worker

你可以尝试一下离线复选框用于测试您的应用在离线时的反应。在使用不同的 Service Worker 配置时，取消注册当前 Service Worker 也很有用，这样就可以注册新版本的 Service Worker。

了解更多

由于这只是一个简短的介绍，您可能希望更深入地了解渐进式 Web 应用。以下是一些很好的资源：