PWA学习

最新推荐文章于 2024-07-30 08:45:00 发布

海紫_9

最新推荐文章于 2024-07-30 08:45:00 发布

阅读量467

点赞数

分类专栏：前端学习文章标签： PWA学习最新前端技术

本文链接：https://blog.csdn.net/qq_37071938/article/details/83787157

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 介绍：
PWA（全称：Progressive Web App ）是渐进式的网页应用程序。
是 Google 在 2015 年提出，2016年6月才推广的项目。
是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。
不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。
2.特点：
Reliable （可靠的） - 即使在不稳定的网络环境下，也能瞬间加载并展现
Fast（快速的） - 快速响应，并且有平滑的动画响应用户的操作
Engaging（可参与的） - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面，不用从应用商店进行下载
3.关键技术

Service Worker （可以理解为服务工厂）
Service Worker 简称SW,是离线缓存文件，作用于浏览器于服务器之间，相当于一个代理服务器。
它的使命，就是让缓存做到优雅和极致，让 Web App 相对于 Native App 的缺点更加弱化，也为开发者提供了对性能和体验的无限遐想。
[1]. 浏览器支持

绿色支持。
[2]. 功能和性能：
一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context。
一旦被 install，就永远存在，除非被手动 unregister
用到的时候可以直接唤醒，不用的时候自动睡眠
可编程拦截代理请求和返回，缓存文件，缓存的文件可以被网页进程取到（包括网络离线状态）
离线内容开发者可控
能向客户端推送消息
不能直接操作 DOM
必须在 HTTPS 环境下才能工作
异步实现，内部大都是通过 Promise 实现
[3]. 生命周期：

a. Parsed （解析成功）：首次注册 SW 时，浏览器解决脚本并获得入口点，如果解析成功，就可以访问到 SW 注册对象，在这一点中我们需要在 HTML 页面中添加一个判断，判断该浏览器是否支持 SW 。
b. Installing （正在安装）：SW 脚本解析完成之后，浏览器会尝试进行安装，installing 中 install 事件被执行，如果其中有 event.waitUntil ( ) 方法，则 installing 事件会一直等到该方法中的 Promise 完成之后才会成功，如果 Promise 被拒绝，则安装失败，SW会进入 Redundant（废弃）状态。
c. Installed / Waiting （安装成功/等待中）：如果安装成功，SW 将会进入这个状态。
d. Activating （正在激活）：处于 waiting 状态的 SW 发生以下情况，将会进入 activating 状态中：
当前已无激活状态的 worker 、 SW脚本中的 self.skipWaiting（）方法被调用、用户已关闭 SW 作用域下的所有页面，从而释放了当前处于激活状态的 worker、超出指定时间，从而释放当前处于激活状态的 worker
e. Activated （激活成功）：该状态，其成功接收了 document 全面控制的激活态 worker 。
f. Redundant （废弃）：这个状态的出现时有原因的，如果 installing 事件失败或者 activating 事件失败或者新的 SW 替换其成为激活态 worker 。
[4]. 支持的事件

install：Service Worker 安装成功后被触发的事件
activate：当 Service Worker 安装完成后并进入激活状态，会触发 activate 事件
message：Service Worker 运行于独立 context 中，无法直接访问当前页面主线程的 DOM 等信息，但是通过 postMessage API，可以实现他们之间的消息传递，这样主线程就可以接受 Service Worker 的指令操作 DOM。
功能性事件：
fetch (请求)：当浏览器在当前指定的 scope 下发起请求时，会触发 fetch 事件，并得到传有 response 参数的回调函数，回调中就可以做各种代理缓存的事情了。
push (推送)：push 事件是为推送准备的。
sync (后台同步)：sync 事件由 background sync (后台同步)发出。
Manifest （应用清单）
Web App Manifest 是一个 W3C 规范，它定义了一个基于 JSON 的 List 。Manifest 在 PWA 中的作用有：
能够将你浏览的网页添加到你的手机屏幕上
在 Android 上能够全屏启动，不显示地址栏（由于 Iphone 手机的浏览器是 Safari ，所以不支持哦）
控制屏幕横屏 / 竖屏展示
定义启动画面
可以设置你的应用启动是从主屏幕启动还是从 URL 启动
可以设置你添加屏幕上的应用程序图标、名字、图标大小
Push Notification（推送通知）
Push 和 Notification 是两个不同的功能，涉及到两个 API 。
Notification 是浏览器发出的通知消息。
Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 SW ，Notification： SW 将更新的信息推送给用户。