PWA是Google提出的移动Web应用程序方向，它为开发混合应用的开发者提供了一个新方向，它结合了Web和原生应用程序的优势，提供了更好的用户体验。PWA可以在几个小时内将你的网站或应用程序转换，从而提供 Web 和原生 APP 的便利。 本书系统介绍PWA基本技术与应用，结合大量案例来讲解如何搭建混合应用。并用一个综合案例展示了这些技术的应用方法，可帮助读者快速入门PWA，搭建自己的混合型应用。 主要内容包括: ●第1章介绍PWA的前世今生及生态环境； ●第2章介绍PWA的一些前置技术和预备知识，为后面的学习打下基础； ●第3章详细讲解PWA最核心的部分Service Worker的各个知识点、注意事项及实践； ●第4章介绍PWA的API，包含安装到桌面、新一代网络请求、消息通知、后台同步、离线缓存、消息推送等； ●第5章介绍PWA使用过程中的一些配套工具，包括调试、评测、提效等； ●第6章讲解PWA的实践部分，针对不同的功能需求，按功能划分进行案例讲解； ●第7章介绍Web的系统集成能力。

随着全球互联网的快速发展，移动端用户越来越多地将时间花在应用程序上，而非传统的网页。然而，开发与推广移动应用的成本高昂，用户更新软件的频率也相对较低。在这样的背景下，渐进式Web应用（PWA）应运而生，它结合了原生应用的强大功能与Web的便捷性，无需下载即可使用，还支持离线工作、推送通知等功能。

相较于传统应用，PWA在开发成本、推广费用和用户体验方面都占有明显优势。它降低了用户的接入成本，并且通过浏览器赋能，能够调用系统硬件资源，提供一致的跨平台体验。

文章详细介绍了如何创建一个简单的PWA项目，包括注册Service Worker、网络层拦截图片以及定制404页面等基本操作，充分展示了PWA的强大能力和便捷性。

在PWA的基本概念和功能方面，文章通过一个示例应用演示了其离线访问和添加到主屏幕的能力。具体操作包括创建manifest.json文件，将其添加到首页，并在PC端和移动端安装PWA后展示了效果。

此外，文章还提到了后续章节将深入讲解PWA的相关API和语法，为读者提供了更全面的学习资料。PWA的出现，无疑为移动应用市场带来了一场变革，有望解决当前移动应用面临的诸多问题。

第1章 初识PWA

JavaScript模块化发展经历了从命名空间冲突和依赖关系不清的问题，到引入Common.js、AMD、CMD、UMD等规范的历程。这些规范解决了模块化的问题，但各有其优缺点。随着ES6 Module规范的出现，模块的导入导出操作得到了简化，它成为浏览器原生支持的模块化标准。ES6 Module使用export和import关键字，支持动态导入，并要求严格的路径。

在异步编程方面，Promise成为了一种解决方案，它通过链式调用简化了回调嵌套，提高了代码的可读性和可维护性。Promise对象有resolve、reject、then、catch等实例方法，以及resolve、reject、all、race等静态方法。

异步编程的简洁性得到了async和await关键字的进一步提升。通过await，开发者可以等待Promise对象完成，从而简化代码结构。

Web Worker是另一种提高应用性能的技术，它允许开发者创建后台线程，执行不阻塞主线程的任务，如复杂计算或数据处理。Worker线程与主线程通过postMessage和onmessage方法进行通信。在DedicatedWorkerGlobalScope环境中，Worker具有self、name、importScripts、postMessage、close等属性和方法。同时，Worker线程包含事件如onmessage和onmessageerror，用于处理消息传递和错误。

总结来说，JavaScript模块化和异步编程的进步为开发者提供了更高效、更简洁的开发体验。通过这些技术，开发者能够更好地管理代码依赖，简化异步操作，并提高应用性能。

第2章 预备知识

ServiceWorkerContainer接口是浏览器中管理Service Worker生命周期的核心接口。借助这个接口，开发者能够轻松实现Service Worker的注册、更新和注销。它提供了一系列实用方法，如register、getRegistration和getRegistrations，以及controller、ready等属性。同时，ServiceWorkerRegistration接口使得开发者能够深入获取Service Worker的详细信息，包括其作用域、安装、等待和激活状态。通过showNotification、update、unregister等方法，开发者可以展示通知、更新Service Worker或注销它。

ServiceWorker接口则提供了对Service Worker线程的访问，包括scriptURL、state等属性，以及postMessage、onstatechange等方法和事件。这些接口和方法的使用，让开发者能够更加灵活地运用Service Worker技术。

Service Worker在从注册到废弃的生命周期中，每个阶段都有其独特的状态和事件。通过它，开发者能够实现高级功能，如离线缓存和推送通知，从而提升用户体验。文中还详细阐述了HTTP缓存与Service Worker Cache之间的关系，以及它们在请求流程中的优先级。

此外，文章还介绍了Service Worker的调试方法，帮助开发者更好地理解和优化代码。作为构建现代Web应用的关键技术之一，Service Worker的重要性不言而喻。

第3章 PWA的核心桥梁：Service Worker

Manifest文件，这是一种简单的JSON配置文件，可用于Web应用。通过配置相应属性，可以实现自定义启动画面、图标、颜色等功能。Manifest文件包含多个字段，如应用名称、图标、启动页面等。要使Manifest文件有效，需要满足特定条件，例如运行在HTTPS环境、注册Service Worker等。此外，还介绍了如何自定义安装时机，处理安装提示事件，以及如何在iOS上进行适配。通过使用适配脚本，开发者可以简化Manifest文件的配置过程。



4.1 Manifest应用清单

Fetch API，作为网络请求功能的新API，简化了HTTP操作，它通过Promise异步返回结果，适用于window和Service Worker环境。与XMLHttpRequest相比，Fetch API操作更为简便，有效避免了回调地狱问题，并以数据流形式返回数据，更适合大数据传输。此外，Fetch API还包含Request、Response、Headers和Body等多个接口，共同构成了其强大的功能。

Service Worker能够拦截网络请求，并根据请求路径进行内容替换。具体来说，如果请求的是根目录，Service Worker将直接返回“这是被劫持的首页内容”；如果是“/jump”路径，则返回首页内容；对于其他请求，Service Worker将正常返回响应内容，并将响应缓存起来以供后续使用。图4-7展示了Service Worker进行网络替换的效果。

4.2 Fetch网络功能

Notification API，这是一个用于配置和显示桌面通知的界面。它允许开发者异步向用户传递信息，且支持HTTPS或本地域名使用。API提供了丰富的构造函数参数和实例属性，如标题、内容、图标、操作选项等，以及事件如点击、关闭、错误等。此外，API还允许开发者请求权限，处理通知交互，并通过不同的授权模式来控制通知的显示。通过实例，我们可以看到如何使用Notification API来创建通知，以及如何处理用户的点击和操作。



4.3 Notification消息通知

SyncManager接口，这是实现同步功能的关键。通过这个接口，我们可以注册和获取同步标签，以及处理同步事件。SyncManager提供了注册和获取标签的方法，并且当注册的标签触发同步事件时，我们可以监听该事件来处理数据同步。整个同步过程分为注册、触发事件和同步完成三个阶段。在实际应用中，SyncManager常与IndexedDB结合使用，以实现数据的同步。例如，在聊天应用中，我们可以将聊天消息存储在IndexedDB中，并在同步事件中处理这些消息。此外，对于一些可能失败的请求，我们也可以通过同步机制来重试，直到成功或达到最大尝试次数。



4.4 Sync后台同步

Cache API，这是一套配合PWA Service Worker使用的存储机制，旨在实现数据的离线访问。它允许开发者以极细的粒度控制存储内容，与HTTP缓存隔离。Cache API与IndexedDB相比，更适合存储流式数据，且操作异步，与Service Worker的要求相符。它主要由CacheStorage和Cache两个接口构成，CacheStorage负责管理Cache对象，而Cache则负责存储以Request为键、Response为值的缓存数据。需要注意的是，Cache属于临时缓存类型，存储空间有限，且对于不允许跨域的响应类型，缓存可能会带来不必要的存储浪费。



4.5 Cache离线存储

W3C的Push API允许网页提供推送功能，即使用户没有打开页面或浏览器处于关闭状态。此API包括三种接口：PushManager用于订阅和获取订阅信息，PushSubscription用于获取订阅信息并注销订阅，而PushMessageData是处理推送消息的数据接口。推送流程包括浏览器端的订阅、应用服务器发送消息以及浏览器端的接收消息。为了保证消息安全，推送协议要求使用JWT进行签名验证，并对消息进行加密。

在Node.js环境中，要向消息推送服务器发送消息，可以通过引入web-push模块实现。首先，需要配置VAPID密钥和有效时间，然后将消息发送到用户的订阅对象。此外，文中还讨论了不同操作系统（如Android、MAC和Windows）中浏览器接收推送消息的情况，并介绍了如何使用Chrome DevTools进行调试。

针对Chrome的FCM通信问题，文中提出了两种解决方案：一是部署代理服务器，二是使用Microsoft Edge浏览器。以下是使用Node.js发送消息的步骤：

1. 安装web-push模块：
   ```
   npm install web-push
   ```

2. 生成VAPID密钥，并将其存储在安全的地方。VAPID密钥用于签名推送消息，确保消息的来源和完整性。

3. 配置web-push模块：
   ```javascript
   const webPush = require('web-push');

   const vapidKeys = {
     'publicKey': 'YOUR_PUBLIC_KEY',
     'privateKey': 'YOUR_PRIVATE_KEY',
     'subject': 'mailto:your-email@example.com'
   };

   webPush.setVapidDetails(
     vapidKeys.subject,
     vapidKeys.publicKey,
     vapidKeys.privateKey
   );
   ```

4. 发送推送消息：
   ```javascript
   const pushSubscription = {
     'endpoint': 'YOUR_SUBSCRIPTION_ENDPOINT',
     'keys': {
       'p256dh': 'YOUR_P256DH_KEY',
       'auth': 'YOUR_AUTH_KEY'
     }
   };

   const payload = 'This is a push message!';

   webPush.sendNotification(
     pushSubscription,
     payload
   ).then(res => console.log('Message sent successfully!'))
     .catch(err => console.error('Error sending message:', err));
   ```

通过以上步骤，你可以使用Node.js和web-push模块向用户的订阅对象发送推送消息。同时，文中还提到了如何在不同操作系统中调试推送消息，以及针对Chrome的FCM通信问题提出的解决方案。

4.6 Push消息推送

4.7 本章小结

第4章 核心技术

Workbox是一个用于创建和配置Service Worker的库，通过CLI模式，用户可以方便地安装、配置和生成Service Worker文件。CLI模式提供了一系列命令，如向导、生成SW、注入Manifest和复制库等，各命令具有特定用途和配置项。generateSW命令用于预缓存文件，而injectManifest命令则提供更细致的控制。除了CLI模式，用户还可以直接在Service Worker文件中引入Workbox库来使用其功能。Workbox还提供了丰富的路由和插件功能，帮助开发者更好地控制缓存、请求策略和后台操作。

缓存和IndexedDB是Web开发中常用的技术。缓存策略包括网络优先、缓存优先和缓存非2xx的请求，用户可以根据需求选择合适的策略。Workbox提供了丰富的插件来优化缓存行为，如限制缓存数量、设置有效时间等。IndexedDB是Web数据库的一种，允许开发者以类似关系型数据库的方式存储和检索数据。通过操作IDBFactory、IDBDatabase、IDBObjectStore等接口，可以创建数据库、对象仓库，并添加、查询、删除数据，从而提高Web应用的性能和用户体验。

IndexedDB在处理数据库操作方面具有强大功能。它支持条件查询，通过使用索引IDBIndex和范围IDBKeyRange接口，用户可以高效地查询和修改数据。IndexedDB还支持在Service Worker中使用，并提供了DBWrapper等库来简化操作流程，使开发者可以轻松管理数据库，处理数据的增删改查，以及实现复杂的数据筛选和修改操作。

Lighthouse是一个开源自动化工具，通过一系列测试提升网络应用质量，并生成性能报告。Lighthouse支持多种使用方式，如Chrome扩展程序、命令行和DevTools。在DevTools中，通过Audits选项卡，可以专注于测试PWA（渐进式网络应用）并生成报告。测试结果会标红不合格项并提供解决方案。此外，文章还详细介绍了在Chrome、Safari和Firefox浏览器上调试PWA的方法，包括操作Application、Storage、Cache和Background Services等面板，以及如何开启DevTools和调试Service Worker。这些工具和方法为PWA开发提供了强大的支持。

第5章 配套工具

Service Worker的注册和管理方案，强调了注册流程的独立性、更新和注销的灵活性以及错误收集的重要性。通过将注册和注销逻辑独立成文件，并采用无缓存引用，确保了Service Worker文件更新的及时性。同时，通过添加状态信息，改善了用户体验。为了实现快速开关，提出了通过接口请求控制的方法，并建议将所有代码封装在闭包中，避免全局变量污染。此外，还介绍了如何收集和记录Service Worker的错误信息，便于后续分析和解决。



6.1 接入Service Worker

如何为网站添加桌面入口能力，通过修改manifest.json、sw.js等文件，并添加iOS兼容脚本实现。manifest.json文件定义了网站图标、名称、入口等核心信息，sw.js文件用于注册Service Worker，iOS兼容文件则解决了iOS系统对manifest.json的不支持问题。此外，通过新闭环方案，网站能够根据用户的历史访问记录，在有效时间内自动打开上次访问的页面，提升了用户体验。



6.2 安装网站到桌面

在Service Worker与窗口层之间通信的多种方式。首先，通过ServiceWorker.postMessage可以实现页面到Service Worker环境的通信，使用navigator.serviceWorker接口获取ServiceWorker对象，通过postMessage发送消息，并利用onmessage事件接收消息。其次，SyncManager.register允许通过同步方式实现单向通信，适用于后台同步。此外，MessageChannel提供了点对点的双向通信，适用于window页面与Service Worker环境之间的通信。Service Worker线程还可以通过BroadcastChannel和WindowClient.postMessage向窗口层通信。BroadcastChannel用于广播通信，而WindowClient.postMessage则用于获取WindowClient对象进行消息发送。这些通信方式各有特点，根据具体需求选择合适的通信方式可以提升应用性能和用户体验。



6.3 消息通信

Service Worker的离线处理时机和策略。离线处理时机分为三个阶段：安装状态、激活状态和push事件处理。在安装状态，主要缓存强依赖的静态资源；在激活状态，主要删除和迁移旧缓存；在push事件处理，则利用缓存能力提升用户体验。离线策略包括只用缓存、只用网络、缓存优先、网络优先和上一次策略，针对不同场景和需求，选择合适的策略能保证资源的有效利用和用户体验。



6.4 数据离线

Web Push技术，并强调了使用封装好的库来降低开发成本的重要性。文章详细说明了如何根据服务器端语言选择相应的Web Push库，并推荐了一个开源库。接着，介绍了如何搭建应用服务器后端，包括生成VAPID密钥、创建后端接口和实现推送功能。此外，还展示了如何在前端页面中实现与推送服务器的订阅和通信，以及如何处理推送消息。文章还提到，由于网络问题，在国内使用Chrome浏览器进行订阅和推送可能会失败，建议使用Edge或Firefox浏览器。



6.5 推送通知

如何将一个普通网站改造为PWA。首先，通过执行npm命令安装网站依赖，然后启动网站服务。接着，使用Chrome DevTools的Audits(Lighthouse)工具检测网站PWA的兼容性。改造过程包括注册Service Worker、添加manifest.json、实现离线能力、适配iOS以及处理白屏等待情况。通过这些步骤，一个网站可以变得更加快速、可靠和可离线使用。



6.6 改造网站为PWA

本章内容，让我们对PWA在实际项目中的应用有了更深的认识。面对现实中的类似问题，我们可以通过翻阅本章来寻找解决方案。接下来，章节将展开介绍PWA如何通过Web技术实现系统能力集成。



6.7 本章小结

第6章 实践方案

Chrome的Fugu项目致力于将原生应用的能力融入Web，确保在增强Web应用功能的同时，维护用户的安全与隐私。项目组通过开发定制API来提升Web的性能，并积极推动W3C的标准化进程，与Google、Intel、Microsoft等业界巨头紧密合作。截至目前，Fugu项目已推出了75个关键功能，包括媒体会话、Web分享和形状检测等。

为了实现这一目标，项目组详细介绍了如何利用MediaDevices API进行音视频捕获，以及如何运用ImageCapture API和MediaRecorder API来截取视频流并下载。此外，SpeechRecognition API的展示也突出了语音识别输入的实用性。

现代Web技术在与原生应用竞争中的优势和潜力，通过实例演示了剪切板操作、网络信息获取、电池状态监测以及设备内存信息查询等功能。这些功能的应用场景包括语音识别和剪切板读写操作，展示了Web技术的强大潜力。

项目组还介绍了地理定位和设备方向获取等功能，为开发者提供了丰富的工具和手段。这些功能的实现，使得Web应用在性能和用户体验上得到不断优化，逐步缩小与原生应用的差距。通过这些API和功能，Web应用将能够执行更多原生应用的操作，从而满足用户日益增长的需求。

PWA入门与实践