1. IT宝库
2. 菜鸟教程
3. 菜鸟入门教程
4. PWA(渐进式 Web 应用程序)

渐进式Web应用

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

在设备中创建网站的PWA图标后，在Internet的帮助下打开的所有帖子都会自动存储在您的设备中，这是第二次不需要互联网读取.它是一种与浏览器功能相结合的方法.

一般，当您必须构建应用程序时，您必须为不同的平台开发该应用程序，例如 ， android ，和 Windows .但在PWA的情况下，您无需为不同的平台开发单独的应用程序.您只需要创建可以在任何移动浏览器上运行的网页.

PWA

的特性

渐进式Web应用程序具有以下特征，可以理解:

1. 渐进式:术语渐进式手段，PWA应用程序必须在任何设备上工作，提高用户移动浏览器和设计的性能.

2. 可发现:一个pwa是一个具有一些额外功能的网站.它可以通过Google Chrome等移动搜索应用程序进行搜索.应用商店或播放商店不是必需的.

3. 响应:渐进式Web应用程序的UI应符合设备的形式因子和屏幕尺寸.

4. 应用程序: pwa应用程序应该看起来像本机应用程序.虽然用于创建，共享，启动和更新PWA的方法与原始应用程序完全不同.

5. 连接独立:即使连接非常低)也可以使用它.

PWA的优点

1. Pwa在手机上像一个应用程序，看起来非常令人印象深刻.

2. 它不需要更新.

3. 它很容易保存在设备中.

4. 它立即加载您的手机.

5. 它可以节省金钱和时间与为Android，iOS和其他平台单独创建应用程序.

6. 即使没有互联网，也可以读取

7. 帖子.

8. 互联网数据较少使用.

9. PWA比其他应用便宜.

PWA的缺点

1. 它支持有限的移动浏览器.它不会在Safari，Edge和IE浏览器上运行.

2. iPhone用户无法安全地建立连接.

3. 它可以最大限度地使用设备的电池.

4. 需要在服务器上托管，因为它是一个web应用程序.

5. 无法从流行的应用商店下载，例如Google Play和Apple App Store.

6. PWA不提供对所有设备的相同级别的支持.例如，PWA在Android上的PWA工作中的推送通知，但不在iOS上.

7. 它支持有限的硬件功能.

PWA和本机应用程序之间的差异

PWA 的技术组件

PWA 有五个组件。

1. 网络应用清单

2. 应用程序外壳

3. Service worker

4. 网页包

5. 传输层安全 (TLS)

1. 网络应用清单

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. Service Worker

service worker是网络工作者。 它是一个在移动浏览器之外运行的 JavaScript 文件。 换句话说，它是另一个促进 PWA 功能的技术组件。 Service Worker 从缓存中检索资源并传递消息。

它独立于它们所连接的应用程序，并具有许多后果:

• Service Worker 不会阻塞同步的 XHR，因此不能在本地存储中使用（它被设计为完全异步的）。

• 即使应用程序没有运行，它也可以从服务器接收信息。 它在 PWA 应用程序中显示通知，而无需在移动浏览器中打开。

• 它不能直接访问 DOM。 因此，使用 PostMessage 和 Message Event Listener 方法与网页进行通信。 PostMessage 方法用于发送数据，消息事件监听器用于接收数据。

需要了解的事情:

• 它是一个可编程网络代理，可帮助您监控页面如何处理网络请求。

• 它只适用于 HTTPS，因为 HTTPS 非常安全，它会拦截网络请求并修改响应。

Service worker 生命周期

Service Worker 生命周期是 PWA 中最复杂的部分。 Service Worker 的生命周期分为三个阶段:

1. Registration

2. Installation

3. Activation

Registration

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

Service Worker 注册的代码放在 main.js 文件中。

if ("Service-Worker- in navigator.js) 
{
  navigator. Service - worker. register ('/service-worker. json')
  then (function (registration) 
  {
    console.log ('Registration successful finish, scope is:', registration. scope.);
  }
  Catch (function (error) 
  {
    console.log ('Registration failed, error:', error.js);
  }
}

首先，这段代码检查浏览器是否支持 service worker。 当服务工作者返回一个承诺时，服务工作者然后注册到 navigator.serviceWorker.register。 如果兑现了承诺，则注册成功； 否则注册失败。

注册范围

此范围确定由服务工作者管理的网页。 服务工作者的位置定义了默认范围。 每当您在系统的主文件夹中注册一个 service worker 文件时，指定其范围并不重要，因为它控制着所有网页。

navigator.service.worker.register ('/sw.js', { scope: '/'  });

Installation

当通过 navigator.serviceWorker.register 注册新的 service worker 时，会下载 JavaScript 代码，并进入安装状态。 如果安装成功，Service Worker 会进一步进入下一个状态。

const assets to.cache = [
'/js/app.js',
'/about.html',   
'/index.html',
'/css/app.css',    
]

self. addEventListener ('install', function (event) {
    event. wait Until (
        caches. Open('staticAssetsCache')
        then (function (cache) {
              return cache Add All (assetsToCache.);
        })
      );
});

Activation

一旦成功安装了 service worker，它就会转换到激活阶段。 如果有前一个 Service Worker 控制的打开页面，则新的 Service Worker 进入等待状态。 仅当旧服务工作者中没有加载任何页面时，才会激活新服务工作者。 安装后不会立即激活服务人员。

Service Worker 仅在以下情况下处于活动状态:

• 如果当前没有服务人员处于活动状态。

• 如果用户刷新网页。

Service-worker.js

self.addEventListener('activate', function(event) {
  // Perform some task
});

service worker 可以管理网络请求而不是缓存。 它围绕着最新的 Internet API 运行。

1. Fetch: Fetch API 是 GUI 的基本资源。 它比旧的 XMLHttprequest 更容易控制网页请求和响应，这通常需要额外的语法，它的示例是控制重定向。 当在网络上请求资源时，胎儿事件就会终止。

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

获取请求示例:

fetch('ABCs/ABC.json')
then (function (response){
// response function
})
catch (function (error) 
{
console.log ('problem section: \n', error);
});

2. Cache API: 为 service worker API 提供了一个缓存接口，它允许您根据请求创建响应存储库。 然而，这个接口是为服务工作者设计的。 除非特别请求，否则它不会更新缓存中的内存。

service worker 的特点

• 离线: 启用离线功能可能是最苛刻的服务工作者设施。

• 缓存: 缓存内容的控制是 Service Worker 最常用的功能。

• CDN: CDN 和其他外部材料可能难以处理。 由于同源规则和 SSL，PWA 开发人员有时会选择公共托管软件，但您仍然可以从 CDN 上传脚本。

• 推送通知: 推送通知的功能是与用户和访问者交互的最佳方式。 此功能增强了 PWA 应用程序的性能。

• 后台同步: 在后台同步任务是 service worker 的另一个非常重要的特性。

4. 网页包

webpack 是 PWA 的第四个组件。 它用于设计 PWA 前端。 它允许 PWA 开发人员在一个位置收集所有 JavaScript 资源和数据。

5. 传输层安全 (TLS)

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

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

将网站转换为 PWA 有七个简单的步骤。

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

第2步: 之后，您必须转到插件选项并单击添加新选项。

第 3 步: 在此之后，单击搜索按钮并搜索渐进式网络应用程序的插件并将其安装在 WordPress 中。

第4步: 然后，激活渐进式网络应用程序的插件。

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

第 6 步: 然后单击保存设置按钮。

如何安装 PWA？

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

第1步: 首先要做的是在手机上打开谷歌浏览器。

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

第 3 步: 现在，点击谷歌浏览器右上角的三个点。

第4步: 然后，单击添加到主屏幕选项并添加它。

在 iOS 上，您使用 Safari 浏览器访问该网站并单击共享图标。 这将打开一个子菜单，其中包含更多图标和保存到主屏幕的选项。

PWA 框架工具表

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

AliExpress

全球速卖通是阿里巴巴集团推出的热门电子商务网站。 几年前，他们将自己的网站变成了一款适用于手机的 Progressive Web App。

更改为 Progressive Web App 后，速卖通看到了令人难以置信的结果:

• 新用户的转化次数增加了 104%。

• PWA 应用程序中的加载时间增加了 3 倍。

• 重新参与度提高 50%。

Flipkart

在印度，Flipkart 是最大的电子商务网站。 Flipkart 最近将其面向移动用户的网站更新为名为 Flipkart Lite 的 PWA。 Flipkart lite 结合了 Web 和本地应用程序的优点。 它为智能手机用户提供了快速、不间断的体验。

改用 Progressive Web App 后，Flipkart 看到了令人难以置信的结果:

• 转化率增加 70%。

• 重新参与度提高 40%。

• PWA 应用程序中的加载时间增加了 3 倍。

• PWA 应用中的页面会话增加 65%。

Twitter Lite

Twitter 是一个流行的社交媒体平台。 2017 年，他们将网站更改为面向移动用户的 Progressive Web App，称为 twitter lite。 Twitter Lite 会立即加载帖子。 它通过优化图片和保留缓存数据来减少数据使用量。

Twitter Lite 通过推送通知系统重建客户。 它还允许用户将 Progressive Web App 连接到他们的手机主屏幕。

改用 Progressive Web App 后，Twitter 看到了令人难以置信的结果:

• 发送的推文增加了 75%。

• PWA 中的跳出率降低了 20%。

• PWA 中的页面会话增加 65%。

Instagram

Instagram 是一个非常受欢迎的社交媒体应用程序。 他们将网站更改为面向移动用户的 Progressive Web App。 它通过处理照片减少数据消耗。

改用 Progressive Web App 后，Instagram 看到了令人难以置信的结果:

• 转化率增加了 77%。

• 重新参与度提高 50%。

• PWA 应用程序中的加载时间增加了 3 倍。

• PWA 应用程序中的数据使用量降低了 4 倍。

BookMyShow

BookMyShow 是印度一个流行的网站，用于在线预订门票。 2017 年，他们将网站更改为面向移动用户的 Progressive Web App。

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

改用 Progressive Web App 后，Instagram 看到了令人难以置信的结果:

• PWA 应用中的转化次数增加了 80% 以上。

• 比 iOS 应用程序和 android 应用程序更小。

• 转化率提高 5 倍。

MakeMyTrip

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

• 转化率提高 3 倍。

• 比 iOS 应用程序和 android 应用程序更小。

• PWA 应用程序中的用户会话增加了 160% 以上。

本文地址：https://www.itbaoku.cn/tutorial/cn_progressive_web_applications-index.html