渐进式Web应用：连接 web 和移动的桥梁

在不断发展中的 web 开发世界中，PWA 作为一种强大的解决方案，填补了网站和原生应用程序之间的空白，结合了 web 的可访问性、原生应用的功能以及用户体验。
最近我一直在了解 PWA 的相关信息，觉得我也应该写一点关于它的内容。它真的很酷，对于我们开发者来说可能简直太棒了，对企业来说更是如此，对用户也是如此。本文将介绍 PWA 的主要特点，用 React JS 构建一个简单的 PWA，然后看看为什么它不仅对开发者，也对所有人来说都如此优秀。

略

什么是……渐进式Web应用(PWA)？

渐进式网页应用（PWA，Progressive Web App的简称）是一种网页应用，旨在提供类似原生应用的用户体验。

• 可靠：无论用户的网络环境如何，都能快速且可靠地加载。
• 快速：迅速响应用户操作。
• 引人入胜：提供离线、推送通知等类似应用程序的互动功能。

……

这是PWA的主要特点。

Service Worker（服务工作者）

服务工作者是运行在后台的脚本，能够实现离线功能并缓存数据。它们作为应用和网络之间的中间桥梁，确保用户即使在离线状态下也能访问应用。

示例：一个天气应用程序缓存最新的天气预报数据，让用户在没有网络的情况下查看。

缓存和离线能力

PWA会使用服务工作者和缓存API将如 HTML、CSS 和 JS 这样的重要文件和数据本地缓存。这摆脱了对网络的依赖，从而实现瞬间加载。

例如：像阿里巴巴这样的电商网站使用PWA（渐进式网页应用）来让用户离线查看商品。

响应式设计（也称为自适应布局）

PWA不受设备限制，它们在各种设备上都能流畅运行，都能给用户带来一致的体验，无论你是在手机、平板还是电脑上打开PWA，你都会有一样的体验。

比如：Twitter轻量版 是 Twitter 的一个完整的 PWA 版本，在所有设备上提供类似的界面。

可安装性

用户可以直接从浏览器将PWA“添加”到他们的手机或电脑的主屏幕，无需通过应用商店。

示例：访问 Pinterest 的 PWA 页面会引导用户将其添加到主屏幕；此后，它几乎和原生应用没有差别。（即渐进式网页应用）

通知

PWAs（PWA指渐进式网页应用）可以实时发送更新，即使在应用程序关闭的状态下也能重新吸引用户注意。

例如：比如《华盛顿邮报》这样的新闻平台会用PWA来推送实时新闻。

此处省略内容

使用 React 构建一个简单的 PWA 应用

搭建React应用

首先，创建一个新的 React 应用程序

设置 Service Worker

React 内置了一个服务工作者功能。打开 src/index.js 并启用服务工作者：

这可以让应用缓存文件，从而可以在没有网络的情况下离线使用。

添加一个Web应用的清单文件

在 public/ 目录里创建一个 manifest.json 文件。

此清单使您的应用像本地应用一样安装在用户设备上。

试试测试PWA（渐进式网页应用）

本地运行App：

npm start （启动npm进程）

可以使用像 Lighthouse 这样的工具来检查 PWA 的特性。

此处内容省略

渐进式网页应用对企业及用户的好处

适用于企业：

• 更高的用户参与度：如星巴克这样的PWA凭借其离线功能，报告了用户参与度的提高。
• 成本效益：使用单一代码库构建PWA相比单独为网页和原生应用开发而言，可以节省开发费用。
• 改善SEO：更快的PWA在搜索结果中排名更靠前，让您更容易被用户发现。

给用户：

• 立即访问：无需下载应用商店中的应用。
• 离线功能：适合那些不总是能上网的用户。

• 占用空间少：与原生应用相比，PWA占用的存储空间更小。

• • *

PWA已经证明了它们的价值，下面举几个例子。

Twitter Lite

Twitter的PWA减少了70%的数据使用，并将用户参与度提升了65%。它在慢速网络下也能在3秒内加载完成。

Alibaba

在阿里巴巴将其网站升级为PWA之后，转化率提升了76%，月活跃用户增长了14%。

去星巴克

星巴克的渐进式Web应用允许顾客在没有网络的情况下查看菜单并定制订单，从而加快结账过程并提升用户体验。

总之，

渐进式Web应用将是未来网页和移动开发的趋势。它们提供与原生应用相当的可靠性和速度，以及更好的用户参与度。无论用户使用何种设备访问您的应用，都能覆盖到所有用户。对于开发人员来说，渐进式Web应用提供了一个新的领域，用于构建快速、健壮且能在各种设备上运行的应用程序。

无论你是经验丰富的开发者还是刚入门的新手，都需要了解一下PWA。你可以利用这些技术开发出用户喜欢且能满足业务需求的应用。