渐进式Web应用

PWA的全称是渐进式Web应用。PWA是HTML 5网页。它是一个Web应用程序，就像一个移动应用程序，直接从网站存储在移动设备上。换句话说，它是一个在用户手机浏览器上运行的网站。PWA是一项新技术。PWA允许将网站存储在您的设备上。它会创建一个网站应用程序形式的图标，打开时该图标感觉就像一个移动应用程序。

在网站的PWA图标创建到设备后，所有通过互联网打开的帖子都会自动存储在您的设备上，第二次阅读时无需互联网。这是一种将原生应用体验与浏览器功能相结合的方法。

通常，当您要构建应用程序时，需要为不同的平台开发该应用程序，例如 iOS、Android 和 Windows。但在PWA的情况下，您无需为不同平台开发单独的应用程序。您只需要创建基于 HTML 5 的网页，这些网页可以在任何手机浏览器上运行。

PWA的特性

渐进式Web应用具有以下需要了解的重要特性

1. 渐进式： 渐进式意味着，PWA应用程序必须在任何设备上都能工作，并能提升用户手机浏览器的性能和设计。
2. 可发现： PWA是一个带有额外功能的网站。可以通过Google Chrome等手机搜索应用程序进行搜索。不需要App Store或Play Store。
3. 响应式： 渐进式Web应用的UI应适应设备的尺寸和屏幕大小。
4. 类App： PWA应用程序应该看起来像原生应用程序。尽管创建、共享、启动和更新PWA的方法与原始应用程序完全不同。
5. 离线可用： 即使连接性很差，它也能工作。

PWA的优势

1. PWA在手机上像应用程序一样工作，外观非常令人印象深刻。
2. 它不需要更新。
3. 它易于保存在设备上。
4. 它会立即加载到您的手机上。
5. 与为Android、iOS和其他平台单独创建应用程序相比，它节省了金钱和时间。
6. 即使没有互联网，也可以阅读帖子。
7. 它使用的互联网数据较少。
8. PWA比其他应用程序便宜。

PWA的缺点

1. 它支持的手机浏览器有限。它不在Safari、Edge和IE浏览器上运行。
2. iPhone用户无法在其上安全地建立连接。
3. 它最大程度地使用了设备的电池。
4. 由于它是Web应用程序，需要托管在服务器上。
5. 无法从Google Play和Apple App Store等热门应用商店下载。
6. PWA对所有设备的支持程度不尽相同。例如，PWA中的推送通知在Android上可用，但在iOS上不可用。
7. 它支持有限的硬件功能。

PWA和原生应用程序的区别

PWA的技术组成部分

PWA有五个组成部分。

1. Web应用清单
2. 应用外壳
3. 服务工作线程
4. Webpack
5. 传输层安全 (TLS)

1. Web应用清单

Web应用清单是PWA的第一个组成部分。它是一个简单的 JSON 文件，控制用户的应用程序。通常，它被命名为“manifest.json”。它是PWA存在的最重要的组成部分。当您首次将PWA连接到网络时，手机浏览器会读取“manifest.json”文件并将其本地缓存内存中。

当PWA没有网络访问时，手机浏览器会使用应用程序的缓存内存来运行PWA程序，使其离线可用。

“manifest.json”文件帮助PWA看起来像原生应用。借助manifest.json文件，PWA开发者可以控制应用程序如何在用户手机屏幕上呈现。PWA开发者还可以为手机的启动屏幕和应用程序的地址栏设置主题。

“manifest.json”文件允许PWA开发者在中心位置搜索Web应用程序的元数据。JSON文件定义了图标和图标大小的链接、应用程序的完整名称和缩写名称、类型、背景颜色、主题、位置以及其他对于类似应用程序的体验所需的可视化细节。

2. 应用外壳

应用外壳是PWA的第三个技术组成部分。它专门用于分离应用程序的静态和动态内容。最少的 CSS、HTML、JavaScript 以及任何其他动态和静态资源为您的网页提供了结构。它减少了网页独有的实际内容。此组件确保了渐进式Web应用开发的极其关键的方法。

它允许PWA在没有任何连接的情况下运行。此组件的基本设计元素使其能够执行此类任务。它主要用于基于JavaScript的应用程序。

3. 服务工作线程

服务工作线程是一个Web工作线程。它是一个在手机 浏览器 之外运行的JavaScript文件。换句话说，它是另一个促进PWA功能的技术组成部分。服务工作线程从缓存内存中检索资源并传递消息。

它独立于其连接的应用程序，并有很多影响：

• 服务工作线程不会阻止同步XHR，因此不能在本地存储中使用（它被设计为完全异步的）。
• 即使应用程序未运行，它也能从服务器接收信息。它可以在不打开手机浏览器的情况下在PWA应用程序中显示通知。
• 它不能直接访问DOM。因此，使用PostMessage和Message Event Listener方法与网页进行通信。PostMessage方法用于发送数据，Message Event Listener用于接收数据。

关于它的需要理解的事项

• 它是一个可编程的网络代理，可以帮助您监控页面如何处理网络请求。
• 它仅在HTTPS上运行，因为HTTPS非常安全，并且它会拦截网络请求并修改响应。

服务工作线程的生命周期

服务工作线程的生命周期是PWA中最复杂的部分。服务工作线程的生命周期有三个阶段：

1. 注册
2. 安装
3. 激活

注册

服务工作线程基本上是一个JavaScript文件。您需要在关键JavaScript代码中注册它才能使用服务工作线程。注册会告诉浏览器服务工作线程的位置，并开始在后台安装它。区分服务工作线程文件和标准JavaScript文件的一点是，服务工作线程在后台运行，远离手机的主浏览器。这个过程是服务工作线程生命周期的第一阶段。

服务工作线程注册的代码放在main.js文件中。

首先，此代码检查浏览器是否支持服务工作线程。然后，当服务工作线程返回一个Promise时，使用navigator.serviceWorker.register注册服务工作线程。如果Promise得到满足，注册成功；否则，注册失败。

注册范围

此范围决定了由服务工作线程管理的网页。服务工作线程的位置决定了默认范围。无论何时在系统的根文件夹中注册服务工作线程文件，都不需要指定其范围，因为它控制所有网页。

安装

当使用navigator.serviceWorker.register注册新的服务工作线程时，会下载JavaScript代码，并进入安装状态。如果安装成功，服务工作线程将继续进行下一阶段。

激活

一旦服务工作线程成功安装，它就会进入激活阶段。如果有一个由前一个服务工作线程控制的打开页面，那么新的服务工作线程将进入等待状态。只有当旧服务工作线程中没有加载页面时，新服务工作线程才会激活。服务工作线程在安装后不会立即激活。

只有在以下情况下，服务工作线程才会激活：

• 目前没有活动的服务工作线程。
• 用户刷新网页。

Service-worker.js

服务工作线程可以管理网络请求而不是缓存。它采用了最新的 Internet API。

1. Fetch： Fetch API是GUI的基本资源。与旧的XMLHttprequests相比，它更容易控制网页请求和响应，并且后者通常需要额外的语法，例如控制重定向。当网络上请求资源时，就会触发fetch事件。

注意：它支持CORS（跨域资源共享）。测试通常需要本地服务器。

Fetch请求示例

2. Cache API： 为服务工作线程API提供了一个缓存接口，允许您创建已请求响应的存储库。但是，此接口是为服务工作线程设计的。除非明确要求，否则它不会更新缓存中的内存。

服务工作线程的特性

• 离线： 实现离线功能可能是服务工作线程中最具挑战性的功能。
• 缓存： 缓存内容的控制是服务工作线程最常见的功能。
• 内容分发网络： CDN和其他外部材料可能难以处理。PWA开发者有时会因为同源策略和SSL而放弃公开托管的软件，但您仍然可以从CDN上传脚本。
• 推送通知： 推送通知功能是与用户和访问者互动お的绝佳方式。此功能增强了PWA应用程序的性能。
• 后台同步： 这是服务工作线程的另一个非常重要的功能，它可以在后台同步任务。

4. Webpack

Webpack是PWA的第四个组成部分。它用于设计PWA前端。它允许PWA开发者将所有JavaScript资源和数据收集到一个位置。

5. 传输层安全 (TLS)

传输层安全是PWA的第五个组成部分。此组件是任何两个应用程序之间所有健壮和安全的数据交换的标准。数据的完整性要求通过HTTPS和安装在服务器上的SSL证书提供网站服务。

如何使用WordPress将网站转换为PWA？

将网站转换为PWA需要七个简单步骤。

首先要做的是登录到您网站的WordPress管理后台。

第2步： 之后，您需要转到插件选项并单击“添加新”选项。

第3步： 之后，单击搜索按钮并搜索渐进式Web应用程序插件，然后将其安装在WordPress中。

第5步： 然后，激活渐进式Web应用程序插件。

第6步： 现在，您将在仪表板中看到许多选项（例如应用程序名称、描述、图标、颜色），可以根据自己的喜好进行自定义。

第7步： 然后单击“保存设置”按钮。

如何安装PWA？

在Android手机上安装PWA非常简单。

第1步： 首先要做的是在手机上打开Google Chrome。

第2步： 然后，打开网站，例如Instagram.com。

第3步： 现在，单击Google Chrome右上角的三个点。

第4步： 然后，单击“添加到主屏幕”选项并添加。

在iOS上，您可以使用Safari浏览器访问网站，然后单击共享图标。这将打开一个带有更多图标的子菜单，以及一个保存到主屏幕的选项。

PWA框架工具表

一些流行的渐进式Web应用示例

AliExpress

AliExpress是阿里巴巴集团推出的一个流行的电子商务网站。几年前，他们将网站改为了面向手机的渐进式Web应用。

转换为渐进式Web应用后，AliExpress看到了令人难以置信的结果：

• 新用户转化率提高104%。
• PWA应用加载时间增加3倍。
• 用户参与度提高50%。

Flipkart

Flipkart是印度最大的电子商务网站。Flipkart最近更新了其面向手机用户的网站，使其成为一个名为Flipkart Lite的PWA。Flipkart Lite结合了Web和原生应用程序的最佳特性。它为智能手机用户提供了快速无缝的体验。

转换为渐进式Web应用后，Flipkart看到了令人难以置信的结果：

• 转化率提高70%。
• 用户参与度提高40%。
• PWA应用加载时间增加3倍。
• PWA应用每会话页面数增加65%。

Twitter Lite

Twitter是一个流行的社交媒体平台。在2017年，他们将网站改为了面向手机用户的渐进式Web应用，称为Twitter Lite。Twitter Lite即时加载帖子。它通过优化图片和缓存数据来减少数据使用。

Twitter Lite通过推送通知系统重建客户互动。它还允许用户将渐进式Web应用程序添加到手机主屏幕。

转换为渐进式Web应用后，Twitter看到了令人难以置信的结果：

• 发送的推文数量增加75%。
• PWA的跳出率降低20%。
• PWA应用每会话页面数增加65%。

Instagram

Instagram是一款非常流行的社交媒体应用。他们将网站改为了面向手机用户的渐进式Web应用。它通过处理照片来减少数据消耗。

转换为渐进式Web应用后，Instagram看到了令人难以置信的结果：

• 转化率提高77%。
• 用户参与度提高50%。
• PWA应用加载时间增加3倍。
• PWA应用数据使用量降低4倍。

BookMyShow

BookMyShow是印度一个用于在线预订门票的流行网站。2017年，他们将网站改为面向手机用户的渐进式Web应用。

一些用户对BookMyShow移动应用程序有很多问题。但PWA解决了所有问题。它为智能手机用户提供了流畅的购票体验。

转换为渐进式Web应用后，Instagram看到了令人难以置信的结果：

• PWA应用转化率提高80%以上。
• 比iOS应用和Android应用体积更小。
• 转化率提高5倍。

MakeMyTrip

MakeMyTrip是印度的第一家在线旅游网站。网站所有者决定投资于渐进式Web应用程序，为用户提供快速且吸引人的移动Web体验。转换为渐进式Web应用后，Instagram看到了令人难以置信的结果：

• 转化率提高3倍。
• 比iOS应用和Android应用体积更小。
• PWA应用用户会话数增加160%以上。