2024前端必会黑科技之PWA

可靠

2. 快速

据统计，如果站点加载时间超过 3s，53% 的用户会放弃等待。页面展现之后，用户期望有平滑的体验，过渡动画和快速响应。

快速

3. 沉浸式体验—— 感觉就像设备上的原生应用程序，具有沉浸式的用户体验。

渐进式Web应用程序可以安装并在用户的主屏幕上，无需从应用程序商店下载安装。他们提供了一个沉浸式的全屏幕体验，甚至可以重新与用户接触的Web推送通知。

沉浸式体验

Web应用程序中，可以通过manifest.json控制应用程序的显示方式和启动方式，指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向，甚至可以指定是否显示浏览器Chrome。

根据官方的介绍，不难看出，pwa的目标直指原生app，那接下来我们就来了解下PWA到底是个怎么样的何方神圣。

三. 核心功能

---

PWA并不是单指某一项技术，你更可以把它理解成是一种思想和概念，目的就是对标原生app，将Web网站通过一系列的Web技术去优化它，提升其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app一样的感觉。

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

1. Web App Manifest

2. Service Worker

3. Cache API 缓存

4. Push&Notification 推送与通知

5. Background Sync 后台同步

6. 响应式设计

四. PWA如何弥补和原生App的差距

---

性能差异

PWA使用app Shell架构模型

1. 快速加载

2. 尽可能使用较少的数据

3. 使用本机缓存中的静态资产

4. 将内容与导航分离开来

5. 检索和显示特定页面的内容（HTML、JSON 等）

6. 缓存动态内容 App Shell 可保证 UI 的本地化以及从 API 动态加载内容，但同时不影响网络的可链接性和可检测性。 用户下次访问您的应用时，应用会自动显示最新版本。无需在使用前下载新版本。

为了保证首屏的加载，在内容请求完成之前，可以优先保证 App Shell 的渲染，做到和 Native App 一样的体验，App Shell 是 PWA 界面展现所需的最小资源。

无法离线使用

Service Worker + HTTPS +Cache Api + indexedDB 等一系列web技术实现离线加载和缓存

数据更新

Background Sync 后台同步技术

无法实现推送

Push&Notification 实现推送与通知

无法添加到桌面

通过manifest.json文件配置，使得可以直接添加到手机的桌面上。

天生优势：

1. 无需安装，无需下载，只要你输入网址访问一次，然后将其添加到设备桌面就可以持续使用。

2. 发布不需要提交到app商店审核

3. 更新迭代版本不需要审核，不需要重新发布审核

4. 现有的web网页都能通过改进成为PWA， 能很快的转型，上线，实现业务、获取流量

5. 不需要开发Android和IOS两套不同的版本

劣势：

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。