前言
随着移动互联网的快速发展，web应用的用户体验已经受到越来越多的关注。鉴于传统的WEB技术存在着离线访问、加速、缓存和响应速度等问题，谷歌推出了 PWA 技术，优化了 web 应用在各个方面的体验。
本文将详细介绍什么是 PWA，PWA的优势以及如何实现应用的体验优化。
什么是 PWA？
PWA（Progressive Web App）是借助Web技术实现的具有Native应用体验的Web应用，可以提供像 Native 应用一样的速度、交互及体验。
PWA 实现了以下的功能特征：
- 响应式布局，适配各种设备
- 可离线访问
- 提供应用安装的方式
- 能够推送消息（Push Notifications）
- 加速应用的访问速度
PWA 的优势
- 用户体验更友好
PWA借助应用缓存技术实现过离线访问，当网络不佳的时候，也可以提供完整性的体验。
- 增加访问量
PWA 的核心是应用缓存技术，如果你的网站有良好的访问量，那么在缓存模式下，您的网站可以让用户像使用本地应用一样使用。
- 提高转化率
在 PWA 中用户免去下载、安装 App 以及登录等流程，进入Web应用就能够享受到Native应用级别的体验。
1. 使用 SW 实现缓存机制
在浏览器中使用 SW（Service Worker）实现自定义的应用缓存机制，就可以增强应用的访问速度。SW允许我们自定义对一些资源的缓存，而这些资源包括但不限于 JS、CSS、HTML、图片等等。
以下是一个实现缓存资源的示例代码：
-- -------------------- ---- -------
----- --------- - --------------
----- ------------ - -
----
--------------
----------
-------------
------------------
--
-------------------------------- --------------- -
---------------- ------- ------ -- ----------------
----------------
------------------------------------------- -
------------------- --------
------ ---------------------------
--
--
---
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------------------ ------ -------- - - -------------------
------ ---------
- ---- -
--------------------- - - -------------------
------ ---------------------
-
--
--
---在以上的代码里，SW 将会缓存所有在 filesToCache 数组中取值的文件。缓存完成之后，SW 会对每一个请求进行监听。如果请求中的 URL 在缓存中存在，那么 SW 直接返回缓存中的内容，否定则通过网络请求实现。
2. 使用 App Shell
App Shell 是指一个能够离线缓存供应用使用的最小化的 HTML、CSS 和 JavaScript 集合。应用程序的用户界面会动态地从最小化的应用外壳中加载并渲染出来。这样就可以在缺失网络连接时展示用户界面的基本部分。
通过 App Shell 机制缓存一些应用的核心代码，就可以在离线时能快速的打开应用。App Shell 对于手机性能消耗更小，速度更快。
3. 使用 Web Push
使用 Web Push 推送可以在应用不处于活动状态时仍然向用户提供内容。 web push 可以在应用不打开的情况下推送通知到用户的设备。需要注意的是，Push Notifications 不是通过 SW 实现的，它建立在推送服务、通知管理和开放 API (Server-sent Events, WebSockets and the Notification API) 的基础上实现的。
实现 Web Push 的步骤包括：
- 在浏览器中使用 Push API 注册 service worker，可以在接收到服务工作线程的 push 事件时显示一些内容；
- 通过推送服务发送push消息；
- 在服务工作线程中处理在推送服务中注册的用户的push事件；
以下是一个使用 Push API 进行推送的示例代码：
self.registration.showNotification('title', {
body: 'content',
icon: 'img/icon.png',
actions: [
{action: 'action1', title: 'action one'},
{action: 'action2', title: 'action two'}
]
});在注册了 Service Worker 之后我们就可以在其中进行通知的构造，在本例中我们可以通过 showNotification 接口来创建一个通知。
结论
PWA 技术让 Web 应用能够在体验和性能方面与原生应用对等，实现了在各种网络环境和各种网站可访问性下的高性能和关键交互的体验。 同时这也为网站中的行为可以像原生一样的应用场景带来了更好的客户体验。
通过深入学习 PWA 技术的原理和应用，我们使用 SW 实现缓存机制，使用 App Shell 和 Web Push 实现离线访问等功能，持续地提升 PWA 技术在 web 应用中的应用。这将为我们的用户带来一个更佳的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b30b2d91dce0dc88840c5