初识PWA

一、应用背景

  PWA（Progressive Web App）概念的提出，主要是针对原生APP的，目前原生APP的缺点：

1. 昂贵开发成本；
2. 软件上线，版本更新都需要发布到不同的商店，并通过审核；

  导致了有些APP用户可能使用频率很少，但是却不得不去在应用商店中下载庞大安装包，或者可能一段时间不使用以后，随着版本的更新，也不得不去重新更新并安装。

  而PWA技术的作为web应用，其天生优势能很好的解决以上的问题。渐进式增强WEB应用（PWA）并不是单指某一项技术，你更可以把它理解成是一种思想和概念，目的就是对标原生app，将Web网站通过一系列的Web技术去优化它，提升其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app一样的感觉。

二、核心功能

PWA中包含的核心功能及特性如下：

• Web App Manifest
• Service Worker
• Cache API 缓存
• Push&Notification 推送与通知
• Background Sync 后台同步
• 响应式设计

Service Worker是PWA的核心技术，它能够为web应用提供离线缓存功能，当然不仅如此，下面列举了一些Service Worker的特性：

（1）基于HTTPS 环境，这是构建PWA的硬性前提。（LAMP环境网站升级HTTPS解决方案）

（2）是一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context

（3）可拦截HTTP请求和响应，可缓存文件，缓存的文件可以在网络离线状态时取到

（4）能向客户端推送消息

（5）不能直接操作 DOM

（6）异步实现，内部大都是通过 Promise 实现

Serviceworker的使用流程可以简单总结为注册–安装–激活。

• 安装时，serviceworker将我们指定的静态资源进行缓存（即预缓存），如果是实时的动态内容，则使用到了serviceworker的拦截HTTP请求响应的特性了。

• serviceworker拦截http请求，首先去检查请求的资源在缓存中是否存在，如果存在，则直接从缓存中调用，而且即便是无网络情况下，serviceworker也能调用缓存中的资源。如果缓存中没有请求的资源，则通过网络去服务器上检索，而且在找到并响应时，serviceworker会将其存入缓存中，以备下次再请求时直接从缓存中调用。

参考链接：https://www.cnblogs.com/webdeve/p/9546079.html