渐进式 Web 应用程式（PWA）

通俗地说，渐进式 Web 应用程式（Progressive Web Apps，PWA）是一个网站，您可以将其添加到手机的主屏幕，并且可以在离线状态下使用。

按照 Google 的解释（via），PWA 使用现代 Web 功能来提供类似应用程序的用户体验。它们从浏览器选项卡中的页面演变为身临其境的顶级应用程序，时刻保持网络的低摩擦。PWA 具有这些特性：Reliable（可靠的）、Fast（快速的）、Engaging（可参与的）。

Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.

最早讨论 PWA 的文章是 2015 年 Alex Russell 的一篇博客《Progressive Web Apps:Escaping Tabs Without Losing Our Soul》，如 Alex 所述，PWA 意图让 Web 在保留其本质（开放平台、易于访问、可索引）的同时，在离线、交互、通知等方面达到类似 App 的用户体验。

Google 在 2015 年开始也已经着手推广 PWA，意在将 Web 网页服务打包提供类似原生安装应用的使用体验。与传统安装应用相比，PWA 应用具备的优势是：无需安装、更轻量、不占用大量空间，只需要一款支持 PWA 应用的浏览器（如基于 Chromium 的非 iOS 平台浏览器都支持），就可以轻松添加 PWA 应用，具备了跨平台使用的特性。也区别于微信小程序这类应用，需要安装好微信本身这款应用的前提下，才能正常使用小程序，并且有些小程序会强制让用户关联微信帐号后方可使用应用。

可安装

PWA 包括内置的 HTML、CSS、JavaScript 和 WebAssembly 等普通的网络技术，实质是网页或网站，不需要单独分发，只需在线发布 Web 应用程序，确保它满足基线“可安装性要求”，用户就可以将应用程序添加到他们的主屏幕。

PWA 相关技术

PWA 技术并不是一个单独的技术，而是一个技术合集，这个合集当中包括了 Web App Manifest、Service Worker、Push & Notification 等相关技术。

1、Web App Manifest

Web App Manifest 是一个 W3C 规范（W3C MiniApp Manifest），在 JSON 文本文件中提供有关应用程序的信息（如名称，作者，图标和描述等应用清单）。Manifest 的目的是将Web应用程序安装到设备的主屏幕，并控制启动界面。

2、Service Worker

通过 Service Worker 的事件和策略以控制浏览缓存文件的存储和获取，从而加速 PWA 的访问速度，并提供部分离线功能。Service Worker 仅在 HTTPS 环境下使用。

Service Worker 过程繁杂，功能丰富，需费时研究。

3、Push & Notification

消息的推送和提醒由 Push API 和 Notification API 这个两部分组成。Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 Service Worker；Notification： Service Worker 将更新的信息推送给用户。要留意的是，浏览器所依赖的 Push Service 是否可用。

如何创建PWA

基于以上 PWA 相关技术的介绍，以下应用 Manifest 和 Service Worker 示范创建一个 PWA，更详尽技术参考本节的快速链接：

1、首先建立一个网站页面 index.html，检查站点是否可以作为 PWA 运行（如使用 chrome 扩展 Lighthouse，这个扩展还可以测试网页的其他质量指标并提供相关的改善方案），并在加入以下代码：

<link rel="manifest" href="manifest.json">
<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
// 注册service worker
</script>

在 manifest.json 文件中写入以下代码（可尝试使用网络应用清单生成器 Web App Manifests Generator，后面将介绍的 PWA Builder 也支持生成 manifest.json）：

{
  "name": "A Example app",
  "short_name": "Exa", 
  "description": "A example app.",
  "start_url": "/",
  "id": "/",
  "background_color": "#fff", 
  "theme_color": "#ccc",
  "display": "standalone", 
  "icons": [
    {
      "src": "icons/icon144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

在 service-worker.js 文件中写入以下代码：

self.addEventListener('install', function(event) {
  self.skipWaiting();
  
  var offlinePage = new Request('offline.html');
  event.waitUntil(
  fetch(offlinePage).then(function(response) {
    return caches.open('offline2').then(function(cache) {
      return cache.put(offlinePage, response);
    });
  }));
}); self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).catch(function(error) {
        return caches.open('offline2').then(function(cache) {
          return cache.match('offline.html');
      });
    }));
}); self.addEventListener('refreshOffline', function(response) {
  return caches.open('offline2').then(function(cache) {
    return cache.put(offlinePage, response);
  });
}); self.addEventListener('push', function (event) {
  var data = event.data.json();   var opts = {
    body: data.body,
    icon: data.icon,
    data: {
      url: data.url
    }
  };
  event.waitUntil(self.registration.showNotification(data.title, opts));
}); self.addEventListener('notificationclick', function(event) {
  var data = event.notification.data;   event.notification.close();   event.waitUntil(
    clients.openWindow(data.url)
  );
});

PWA 的技术实现内容要比以上的示范多得多，欲深入了解请前往快速链接并推荐 Microsoft 创立的开源项目 PWA Builder，可实时检测 PWA 质量、提供更多 Manifest 指导和 Service Worker 脚本及生成 APP。

在 icons 文件夹放入图标文件 icon144.png。Noun Project 有丰富的图标资源，然后可使用在线图标生成器 Favicon & App Icon Generator 这样的工具生成几个不同大小的图标以及一些 HTML 代码，制作更高质量的可屏蔽自适应图标（Maskable Icon）可参考 web.dev 文档。

浏览 index.html 即可呈现 PWA 安装提示，进入浏览器的开发者工具>应用，可查看 Manifest 清单及 Service Worker 状态。

参考资源 > Microsoft：将你的网站转换为高质量 PWA

如何安装 PWA

一是打开提供 PWA 应用的网页链接（很多应用提供的 Lite 精简版即是），Chrome 移动端浏览器会自动提示是否添加 PWA 应用，桌面端则会在地址栏自动显示加号的标志。

二是通过 PWA 应用商店，如 Microsoft Store、App Scope、Outweb 都提供 PWA 应用。

如何卸载 PWA

Microsoft Edge 进入 edge://apps/、Google Chrome 进入 chrome://apps/ 可卸载 PWA。

通过 Microsoft Edge 安装的 PWA 还可在设置>应用中删除，通过 Google Chrome 安装的 PWA 还可在 PWA 的三点菜单中删除。

重点资源

请留意文中重要链接，以及以下网络资源。

web.dev：渐进式 Web 应用（PWA），web.dev 是 Google 贡献的 Web 开发和检测服务。
Mozilla：渐进式 Web 应用（PWA），Mozilla 致力于 Web 标准和推动 Firefox。
一个示例教程：A beginner’s guide to making Progressive Web Apps，提供步骤说明的源码下载。

👍

泰丽康健科技

泰丽康健科技