PWA详解及应用实践(一)--PWA相关介绍及其生命周期
发布网友
发布时间：2024-10-04 02:16
共1个回答
热心网友
时间：2024-10-08 18:16
PWA的产生原因及背景
技术与理念均源于对问题解决的追求，PWA也不例外。
PWA（Progressive web apps）即渐进式Web应用，它并非特指某项技术，而是一种理念。通过运用多种技术来增强Web app的功能，以提升网站体验。例如，模拟原生功能，如通知推送、请求拦截、桌面图标等。
“模拟原生”是PWA的核心关键词。其产生的主要原因之一，是为了弥补Web应用与Native App在用户体验方面的巨大差距。例如：渲染速度、动画流畅度；另一个重要原因是用户留存。Native App桌面图标入口比输入URL和搜索引擎更便利，用户也能记住URL并输入，但对于移动用户来说，成本巨大，导致Web站点与用户之间的粘性非常脆弱。Native App还能通过发送通知让用户回到应用中，而Web没有这个能力。这两方面因素极大提高了用户粘性。Google在一篇名为《Why Build Progressive Web Apps》的文章中披露过一组数据，Web站点每月的UV是Native App的3倍，然而用户在Native App花费的时间却是Web的20倍。
PWA设计目标和需要解决的问题
基于上述PWA产生的历史背景和原因，其想要解决的问题主要包括以下几方面：
PWA相关特性
特性是为了实现设计理念和目标所要具备的功能和特点。PWA的相关特性是针对解决上述问题设计的，主要包括以下几点：
下表列出了传统Web App、Native App和PWA在各特性的对比。PWA兼具用户体验和迭代速度两方面优势，但技术兼容性相对较差。
| |是否可安装|是否可链接访问|用户体验|用户黏性|迭代速度|兼容性| |---|---|---|---|---|---|---| |传统 Web|无法安装|可链接访问|体验一般|黏性差|快速|优| |Native App|可安装|不可链接访问|体验好|黏性强|需审核|优| |PWA|可安装|可链接访问|体验好|黏性强|快速|一般|
兼容性(Service Worker)
下面是CAN I USE
PWA的核心技术
PWA不是特指某一项技术，而是应用多项技术来改善用户体验的Web App，其核心技术包括Web App Manifest、Service Worker、Web Push等，用户体验才是PWA的核心。
Web App Manifest
Web App Manifest (Web 应用清单)是一个简单的JSON文件，它使开发人员能够控制本应用对用户的显示方式。开发者可以在这个JSON文件中配置PWA的相关信息，如应用名称、图标、启动方式、背景颜色、主题颜色等。可以添加桌面图标，作为应用入口，给用户一种沉浸式浏览体验。
一个简单的manifest.json文件，更多配置选项
Service Worker
Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或网站，拦截并修改访问和资源请求，细粒度地缓存资源。你可以完全控制应用在特定情形下的表现。
Service Worker 相关注意事项：
Service Worker 生命周期
Service Worker可能拥有以下六种状态之一：
解析成功（parsed）
使用ServiceWorkerContainer.register()方法注册service worker。首次注册浏览器解析脚本并获得入口点。如果解析成功，就可以访问到注册对象（registration object），其中包含Service Worker的状态及其作用域。注意，注册成功并不意味着已经完成安装，也不能说明已经激活，仅仅是脚本被成功解析。
正在安装（Installing）
Service Worker脚本解析完成后，浏览器会试着安装，并进入“installing”状态。此时，install事件被触发。我们通常在install事件中缓存静态文件。
如果install事件中有event.waitUntil()方法，则installing事件会一直等到该方法中的Promise完成之后才会进入下一个状态(installed)；如果Promise被拒，则安装失败，Service Worker直接进入废弃（redundant）状态。
安装成功/等待中（Installed/Waiting）
如果安装成功，Service Worker进入安装成功（installed）（也称为等待中[waiting]）状态。在此状态中，它是一个有效的但尚未激活的worker。它尚未纳入document的控制，确切来说是在等待着从旧worker接手控制权。
此时可以调用skipWaiting()方法，激活进入waiting状态的Service Worker。
正在激活（Activating）
处于waiting状态的Service Worker，在以下之一的情况下进入activating状态：
进入activating状态，触发activate事件，我们通常在activate事件中，清理缓存文件
如果activate事件中有event.waitUntil()方法，则在其Promise完成之后，激活才会成功。如果Promise被拒，激活事件失败，Service Worker进入废弃（redundant）状态。
注意使用skipWaiting方法跳过waiting状态，直接激活Service Worker。可能会出现其他终端还没有受当前终端激活的Service Worker控制的情况，切回其他终端之后，Service Worker控制页面的效果可能不符合预期。为了保证Service Worker激活之后能够马上作用于所有的终端，通常在激活Service Worker后，通过在其中调用self.clients.claim()方法控制未受控制的客户端。
激活成功（Activated）
如果激活成功，Service Worker进入active状态。在此状态中，新的worker将获得document全面控制权。此状态下才能拦截网络请求以及和document页面通信。
废弃（Redundant）
Service Worker可能以下之一的原因进入废弃状态：
到此为止，有关PWA的功能背景和生命周期的相关介绍，已经简单地介绍完毕。下一篇文章，将具体与大家一起讨论PWA的应用以及最佳实践。
