什么是渐进式 Web 应用-亚马逊云科技

渐进式 Web 应用的发展历程

渐进式 Web 应用 (Progressive Web Apps，PWA) 是一种新兴的 Web 应用程序开发模式，旨在为用户提供类似于原生应用的体验。它的发展历程可以概括为以下几个阶段：

概念提出与推广

渐进式 Web 应用的概念最早于 2015 年由设计师 Frances Berriman 和谷歌 Chrome 工程师 Alex Russell 提出。他们提议利用现代浏览器支持的新特性，如 Service Worker 和 Web 应用程序清单 (Web App Manifest)，将 Web 应用升级为可以像本地应用一样在用户操作系统上启动和使用的渐进式 Web 应用。

主流浏览器支持

在概念提出后，谷歌为推广 PWA 在 Android 系统上的开发做出了重大努力。2016 年，Firefox 引入了对 Service Worker 的支持。2018 年，微软 Edge 和苹果 Safari 也相继支持了 Service Worker，使得主流系统都能支持 PWA 的核心技术。到 2019 年，包括微软 Edge 和谷歌 Chrome 在内的大多数桌面浏览器都支持了 PWA。

发展遇阻

尽管获得了广泛的浏览器支持，PWA 的发展还是面临一些挑战，尤其在桌面平台。2020 年 12 月，Firefox 桌面版放弃了对 PWA 的实现，Firefox 架构师表示"我们希望传达的信号是 PWA 支持不会来到桌面"。这表明 PWA 在桌面端的发展前景存在不确定性。

渐进式 Web 应用与传统 Web 应用的区别

跨平台性

渐进式 Web应用 (PWA) 旨在任何平台上使用符合标准的浏览器，包括桌面和移动设备。PWA 通过 Web 进行交付，使用 HTML、CSS、JavaScript 和 WebAssembly 等常见 Web 技术构建。相比之下，传统 PC 应用程序通常采用单层架构，仅驻留在客户端机器。

离线能力

PWA 采用渐进式增强的 Web 开发策略，目标是帮助开发人员比使用原生应用更轻松地构建跨平台应用程序。PWA 通过使用服务工作线程创建可编程内容缓存，在离线或低质量网络上仍然能够工作。而传统 Web 应用没有这种离线功能。

类似应用的用户体验

PWA 还利用 Web 应用程序清单和服务工作线程等功能，实现了类似于原生移动应用的主屏幕安装。相比传统 Web 应用，PWA 能够提供更类似应用的用户体验。

总结

PWA 利用现代 Web 技术，为用户提供更加强大和灵活的应用体验。与传统 Web 应用相比，PWA 的主要区别在于其跨平台性质、离线功能以及提供的类似应用的安装和用户体验。

渐进式 Web 应用的优势

渐进式 Web 应用 (Progressive Web Apps，PWAs) 相较于传统 Web 应用和原生移动应用具有诸多优势。

无需安装即可访问

PWAs 可以直接通过 Web 浏览器访问，无需单独安装或通过应用商店分发。这使得 PWAs 更容易通过 URL 共享和搜索引擎发现。

原生应用般的体验

PWAs 可以提供类似原生应用的体验，包括添加到主屏幕、显示启动画面以及在离线或网络质量较差的情况下工作。这得益于服务工作线程 (service workers) 的使用，服务工作线程可以独立于主 Web 页面缓存内容和处理网络请求。

提高用户参与度和商业指标

与传统移动网站相比，PWAs 可以提高用户参与度和商业指标。例如，Twitter Lite（一个 PWA）的大小仅为原生 Twitter 应用的 1%-3%。Starbucks 的 PWA 比其 iOS 应用小 99.84%，并使在线订单数量翻了一番。同样，Pinterest 的 PWA 使网站浏览时长增加了 40%，广告收入率增加了 44%，核心参与度增加了 60%。

渐进式增强

PWAs 采用渐进式增强的方式，在不支持的浏览器中仍可正常工作，并在支持的浏览器中提供增强的离线体验和推送通知等功能，确保了 PWAs 在各种设备和环境下都能提供良好的用户体验。

如何构建渐进式 Web 应用

安全起源和 HTTPS 服务

构建渐进式 Web 应用 (PWA) 的首要要求是确保应用的来源是安全的，并通过 HTTPS 提供服务。使用 HTTPS 可以防止中间人攻击，保护用户数据免受窃听和篡改，确保用户隐私安全性和内容真实性。

注册服务工作线程

注册服务工作线程是 PWA 实现离线功能和提高性能的关键。PWA 需要注册一个带有 fetch 处理程序的服务工作线程。服务工作线程用于创建可编程的内容缓存，可以预先获取内容并在不需要时将其丢弃，从而实现离线访问和改善加载时间。

Web 应用程序清单

PWA 还需要引用一个 Web 应用程序清单，这是一个基于 JSON 的文件，提供有关 Web 应用程序的元数据，如名称、首选 URL、图标和显示模式。这些元数据对于将应用程序添加到主屏幕或与本机应用程序并列非常重要。

渐进式增强

PWA 应该采用渐进式增强的 Web 开发策略，以便在任何符合相应 Web 标准的浏览器上运行，从而比使用本机应用程序更容易构建跨平台应用程序。

AppShell 模型

一些 PWA 还使用 App Shell 模型，其中服务工作线程将响应式 Web 设计应用程序的基本用户界面或"外壳"存储在浏览器的离线缓存中，进一步提高了加载速度和用户体验。

渐进式 Web 应用的性能优化技巧

渐进式 Web 应用 (PWA) 采用了多种技术来优化性能。以下是一些关键的性能优化技巧：

应用外壳模型

PWA 使用应用外壳模型 (App Shell Model)，将基本的用户界面或"外壳"存储在浏览器的离线缓存中，利用服务工作线程 (Service Worker) 实现。这使得 PWA 即使在没有网络连接的情况下，也能够快速加载并保持类似原生应用的体验。

可编程内容缓存

服务工作线程是 PWA 的关键组件，因为它们支持可编程的内容缓存。与传统的 Web 缓存不同，服务工作线程可以在需要之前显式预取内容，并在不再需要时将其丢弃。这有助于确保页面在离线或网络质量较低的情况下仍可访问。

HTTPS 和 Web 应用清单

PWA 通过安全的 HTTPS 连接提供服务，并引用 Web 应用清单 (Web App Manifest)，这有助于提高加载时间和安全性。

离线数据存储

PWA 利用 Web 存储 API 和 IndexedDB 等 Web 技术进行离线数据存储，进一步优化了用户体验。

通过采用上述技术，渐进式 Web 应用能够显著提升性能，为用户带来更加流畅、高效的体验。

渐进式 Web 应用的应用场景

渐进式 Web 应用 (PWA) 在多种场景下都有广泛的应用前景。以下是一些主要的应用场景：

离线体验增强

PWA 能够在离线或网络状况不佳的情况下提供近似原生应用的体验。通过将基本的用户界面或"应用外壳"缓存在浏览器中，PWA 可以快速加载并维持基本功能，即使设备处于离线状态。这有助于提高加载速度并提供更流畅的用户体验。

跨平台应用开发

渐进式 Web 应用旨在在任何支持标准浏览器的平台上运行，包括桌面和移动设备。这使得开发人员能够比开发原生应用更轻松地构建跨平台应用。PWA 可以添加到设备主屏幕并像原生应用一样启动，而无需输入 URL，从而提供类似于原生应用的体验。

应用商店分发

主要应用商店如 Google Play、Microsoft Store 和 Samsung Galaxy Store 都支持 PWA，允许它们与原生应用一起被发现和安装。然而，Apple App Store 目前尚不支持 PWA。

增强功能

PWA 利用了诸如服务工作线程、Web 应用程序清单和 IndexedDB API 等一系列技术，以实现离线功能、后台数据同步和其他高级功能。这些技术有助于 PWA 相较于传统 Web 应用提供更强大、更出色的用户体验。

渐进式 Web 应用如何提供类似原生应用的用户体验

渐进式 Web 应用 (Progressive Web Apps，PWA) 通过一系列创新技术和功能，旨在为用户提供与原生应用程序媲美的卓越体验。以下是 PWA 如何实现类似原生应用的用户体验的几个关键方面：

响应式布局

PWA 采用响应式设计，能够自动适配各种尺寸的设备和屏幕，确保在不同终端上呈现出最佳的用户界面和布局。这使得 PWA 在桌面电脑、平板电脑和移动设备上都能提供出色的浏览体验。

应用外壳

PWA 允许用户通过添加到主屏幕或启动屏幕上的图标，直接访问和启动应用，无需通过浏览器地址栏输入网址。这种体验与原生应用非常相似，用户只需单击图标即可快速打开应用。

快速加载和性能优化

PWA 采用了多种技术手段，如缓存优化、代码分割、懒加载等，以确保应用的快速加载速度和高响应性能。通过服务工作线程、资源预加载和缓存策略等技术，PWA 能够实现流畅的应用体验。

离线访问

利用服务工作线程 (Service Worker) 技术，PWA 可以缓存应用的核心资源，使用户即使在离线或网络连接不稳定的情况下，也能访问应用、浏览已加载的页面、查看缓存的内容并执行某些功能，从而减少对网络连接的依赖。

推送通知

借助浏览器的推送通知功能，PWA 可以向用户发送实时消息和更新，与用户保持连接并在重要事件发生时及时通知，类似于原生应用的消息推送机制。

硬件交互

PWA 可以利用各种 Web API，如摄像头、地理位置、加速计等，实现与设备硬件的交互，为用户带来更丰富、更身临其境的体验。

综上所述，渐进式 Web 应用通过响应式设计、离线访问、应用外壳、推送通知、性能优化和硬件交互等多种创新技术和功能，为用户提供了媲美原生应用的卓越体验，成为 Web 应用发展的重要趋势。

渐进式 Web 应用如何实现推送通知功能

渐进式 Web 应用 (Progressive Web Apps，PWA) 可以利用浏览器的推送通知功能向用户发送实时消息和更新。实现推送通知功能的关键步骤如下：

申请推送权限

PWA 首先需要请求用户的推送权限。当用户访问 PWA 时，浏览器会弹出一个权限请求框，询问用户是否允许接收推送通知。如果用户授权，PWA 就可以发送推送通知。这一步骤是实现推送通知功能的前提条件。

生成推送订阅

一旦用户授权，PWA 需要生成一个推送订阅对象，用于唯一标识该用户和设备。该订阅对象包含了一个唯一的订阅 ID 以及与推送相关的其他信息，如推送端点 URL 等。

向推送服务器注册订阅

PWA 将生成的推送订阅对象发送给推送服务器，以注册该订阅。通常，开发者需要与推送服务提供商（如 Firebase Cloud Messaging、OneSignal 等）进行集成，并使用其提供的 API 将订阅对象发送到推送服务器。

发送推送通知

一旦订阅成功，PWA 就可以使用推送服务器提供的 API，向用户发送推送通知。开发者可以根据需要自定义通知的内容、标题、图标等，并通过推送服务器的 API 发送通知到用户的设备。

用户接收和交互

用户的设备接收到推送通知后，会在通知栏或弹出窗口中展示通知内容。用户可以点击通知进行交互，例如：

打开 PWA 应用
跳转到指定页面
执行其他操作

值得注意的是，实现推送通知功能需要与推送服务提供商进行集成，并遵循其相应的 API 和文档要求。不同的推送服务提供商可能有不同的集成方式和要求，开发者需要根据所选择的提供商按照其指导进行配置和开发。此外，PWA 推送通知功能需要用户授权和订阅，因此提供良好的用户体验也是非常重要的。

渐进式 Web 应用对于 SEO（搜索引擎优化）有何影响

渐进式 Web 应用 (Progressive Web Apps，PWA) 对于搜索引擎优化 (SEO) 具有积极影响。以下是 PWA 如何影响 SEO 的详细解释：

可被索引

与传统的原生应用不同，PWA 是基于 Web 的应用程序，可以通过 URL 访问。这意味着搜索引擎可以直接索引和抓取 PWA 的内容，使其在搜索结果中可见。这提高了 PWA 在搜索引擎中的可发现性和曝光率。

响应式设计

PWA 通常采用响应式设计，能够在不同的设备和屏幕尺寸上提供良好的用户体验。响应式设计对于移动搜索排名非常重要，因为搜索引擎越来越注重移动设备的体验。一个响应式的 PWA 可以提高在移动搜索中的排名。

提高留存率和用户参与度

PWA 的离线访问、推送通知等功能有助于提高用户参与度和留存率。高留存率和用户参与度是搜索引擎排名的积极信号，因为它们表明网站内容对用户有价值。

独立页面和 URL

PWA 由独立的页面组成，每个页面都有自己的 URL。这使得搜索引擎可以更好地识别和索引每个页面的内容，从而提高网站的可发现性和搜索排名。独立的 URL 结构也有利于链接建设和内部链接优化。

快速加载和性能优化

PWA 借助服务工作线程、缓存和其他性能优化技术，可以实现快速加载和更好的性能。页面加载速度和性能是搜索引擎排名的重要因素，因此 PWA 的这些优化有助于提高搜索排名。

SEO 友好的技术

PWA 采用了许多 SEO 友好的技术，如服务工作线程预缓存、HTTPS 协议、可访问性优化等。这些技术有助于提高网站在搜索引擎中的排名和可见性。

总的来说，渐进式 Web 应用通过提供可索引的内容、独立页面、响应式设计、性能优化、用户参与度提升和 SEO 友好技术的应用，对搜索引擎优化产生了积极影响。采用 PWA 可以帮助网站在搜索引擎中获得更好的曝光率和排名。

渐进式 Web 应用如何保证用户数据安全

HTTPS

渐进式 Web 应用程序 (PWA) 应该使用安全的 HTTPS 协议来传输数据，以确保数据在传输过程中的机密性和完整性。HTTPS 提供了加密和身份验证机制，可以防止数据被窃听或篡改，从而增强用户对应用的信任。使用 HTTPS 不仅可以保护用户的隐私和敏感信息，还可以提高 PWA 的可靠性和安全性，满足现代 Web 应用的安全需求。

用户认证

PWA 可以实现多种用户认证机制，以确保只有经过授权的用户才能访问应用的特定功能或数据。常见的用户认证方式包括：

用户名和密码认证：用户需要提供预先设置的用户名和密码进行登录认证。
社交登录：用户可以使用现有的社交媒体账号（如 Google、Facebook、Twitter 等）进行登录认证，无需再次注册新账号。
OAuth 认证：基于 OAuth 协议的认证机制，允许用户授权第三方应用访问其存储在另一个服务提供商那里的数据，而无需提供用户名和密码。

通过实现合适的用户认证机制，PWA 可以保护用户隐私，防止未经授权的访问，提高应用的安全性。

令牌认证

令牌 (Token) 认证是 PWA 中常用的一种用户认证方式。其工作流程如下：

用户使用用户名和密码或其他方式进行身份验证。
服务器验证用户身份后，生成一个令牌（通常是加密的字符串）并发送给客户端。
客户端在后续的每次请求中都会携带该令牌。
服务器验证令牌的有效性，确认用户身份后响应请求。

使用令牌认证可以避免在每次请求中都传递用户凭证，从而提高了安全性。令牌通常会设置一个有效期，过期后需要重新认证以获取新的令牌。

使用第三方身份验证服务

除了自行实现认证机制，PWA 还可以集成第三方身份验证服务，如 Firebase Authentication、Auth0 等。这些服务提供了一套安全可靠的认证和身份验证解决方案，包括用户注册、登录、密码重置等功能，简化了开发者的工作。使用第三方服务还可以提高 PWA 的安全性，因为这些服务通常采用了业界最佳实践和安全标准。开发者只需要集成相应的 SDK 或 API，就可以在 PWA 中快速实现身份验证功能。

渐进式 Web 应用的挑战

渐进式 Web 应用 (PWA) 虽然具有诸多优势，但在实现和推广过程中也面临着一些挑战。首先，PWA 需要通过 HTTPS 协议提供服务，以确保用户隐私和安全性，这对于一些缺乏必要基础设施或资源的开发者和组织来说可能是一个障碍。其次，PWA 依赖于服务工作线程 (Service Workers) 的使用，这增加了开发和部署过程的复杂性，需要谨慎管理服务工作线程的生命周期以确保良好的用户体验。此外，尽管 PWA 旨在跨不同浏览器和平台运行，但不同环境对 PWA 的支持和实现程度可能有所差异，需要进行额外的测试和优化以确保一致的性能和功能。最后，PWA 在可发现性、货币化和与本机平台功能集成等方面也可能面临挑战，但这些方面的信息在给定的数据源中未予以涉及。

亚马逊云科技热门云产品

Amazon CloudFront

以低延迟和高传输速度安全地交付内容

Amazon S3

专为从任意位置检索任意数量的数据而构建的对象存储

欢迎加入亚马逊云科技培训中心

从 0 到 1 轻松上手云服务，获取更多官方开发资源及培训教程

快速上手训练营
账单设置与查看
动手实操

快速上手训练营
第一课：亚马逊云科技简介

本课程帮助您初步了解云平台与本地环境的差异，以及亚马逊云科技平台的基础设施和部分核心服务，包括亚马逊云科技平台上的弹性高可用架构，架构设计准则和本地架构迁移上云的基本知识。

亚马逊云科技技术讲师：李锦鸿

了解更多 »

了解更多入门学习计划 »

第二课：存储与数据库服务

您将在本课程中学习到亚马逊云科技上的三个存储服务分别是什么。我们也将在这个模块中为您介绍亚马逊云科技上的关系型数据库服务 Amazon Relational Database Service (RDS)。

亚马逊云科技资深技术讲师：周一川

了解更多 »

第三课：安全、身份和访问管理

在这个模块，您将学习到保护您在亚马逊云科技上构建的应用的安全相关知识，责任共担模型以及身份和访问管理服务， Identity and Access Management (IAM) 。同时，通过讲师演示，您将学会如何授权给 EC2 实例，允许其访问 S3 上的资源。

亚马逊云科技技术讲师：马仲凯

了解更多 »

了解更多入门学习计划 »
账单设置与查看
视频：快速完成税务设置

部署时间：5 分钟

开始教程 »

了解更多入门学习计划 »

视频：账户账单信息

部署时间：3 分钟

开始教程 »

视频：如何支付账单

部署时间：3 分钟

开始教程 »

了解更多入门学习计划 »
动手实操
快速上手云上无服务器化的 MySQL 数据库

本教程将引导您创建一个Aurora Serverless 数据库并且连接上它。

部署时间：10 分钟

开始教程 »

查看更多教程 »

启动一台基于 Graviton2 的 EC2 实例 

本教程将为您讲解如何在云控制台上启动一台基于 Graviton2 的 EC2 实例。

部署时间：5 分钟

开始教程 »

使用 Amazon Systems Manager 进行云资源统一跟踪和管理

在这个快速上手教程中，您将学会如何使用 Amazon Systems Manager 在 Amazon EC2 实例上远程运行命令。

部署时间：10 分钟

开始教程 »

查看更多教程 »