渐进式 Web 应用程序是使用新兴 Web 浏览器 API 和功能以及传统渐进式增强策略的 Web 应用程序，为跨平台 Web 应用程序带来类似原生应用程序的用户体验。渐进式 Web 应用程序是一种有用的设计模式，尽管它们不是正式的标准。PWA 可以被认为类似于 AJAX 或其他类似的模式，它们包含一组应用程序属性，包括使用特定的 Web 技术和技巧。

PWA 不是 API 或技术，而是一种 Web 开发方法，它使用现有工具和技术的组合来创建有针对性的理想用户体验。它展示了如何使用 Service Worker、API 和应用程序外壳架构来实现有意义的离线体验、快速的首次加载以及在重复访问时轻松重新吸引用户。

什么是渐进式 Web 应用程序？

渐进式 Web 应用程序或 PWA 是使用我们都知道和喜爱的 Web 技术构建的应用程序，例如 HTML、CSS 和 JavaScript。但它们具有实际本机应用程序的感觉和功能。

本机应用程序是为特定设备平台（IOS 或 Android）以特定编程语言构建的软件应用程序。

PWA 还建立在现代 API 的基础上并得到增强，以提供改进的功能以及在任何设备上的可靠性和可安装性。

PWA 最近越来越受欢迎。许多大公司的网站都是 PWA，例如，看看 twitter.com，这是广泛使用的社交媒体平台之一。

如果您在智能手机上访问该网站，它可以安装在您的主屏幕上。当您打开保存的网站时，它的外观和性能就像一个本机应用程序（APP），没有浏览器，只是您在主屏幕上进行的安装。

在 IOS 或 Android 手机上运行它没有区别，您需要做的就是登录并准备好使用它。

什么是好的 PWA？

它们可以响应任何屏幕尺寸

设备具有不同的屏幕尺寸，这意味着用户将在不同的小工具上使用您的应用程序。因此，最好确保您的应用程序可以在任何屏幕尺寸上使用，并且其内容在任何视口尺寸下均可用。

它们易于安装

安装应用程序的用户倾向于更多地与他们互动。通过使 PWA 可安装，它为它们提供了常规 Web 应用程序的外观、感觉和行为。

他们提供定制的离线体验

当用户离线时，将他们保留在您的应用程序中比返回到默认的离线页面提供了更一致的体验。
例如，旅行和航空公司应用程序即使在离线时也应该能够轻松显示旅行详细信息。另一个例子是音乐应用程序，因为您的用户应该能够访问离线播放。

他们可以通过搜索发现网络帮助我们通过搜索引擎发现网站和应用程序。如果您有 PWA，它有助于为您的应用生成流量。您只需要确保 URL 存在并且搜索引擎可以索引您的站点。

他们有应用程序图标

由于 PWA 是一个可安装的应用程序，它应该有一个图标。这使您的应用程序易于识别。

它们适用于任何浏览器

PWA 首先是 Web 应用程序，这意味着它们需要在所有浏览器上运行，而不仅仅是少数浏览器。用户在决定安装它们之前应该能够在任何浏览器中使用它们。

它们适用于任何输入设备

不同的设备提供多种输入方法。因此，PWA 应该同样适用于鼠标、键盘甚至触摸屏。用户在使用您的应用程序时应该能够在不同的输入设备之间切换。您应该确保您的应用程序及其所有功能支持用户可能选择使用的任何输入法。

我们已经了解了 PWA 是什么以及什么是好的渐进式 Web 应用程序。但之前我们提到了 Native Apps。两者有什么区别？

PWA 和原生应用的区别

与本机应用程序相比，渐进式 Web 应用程序的开发成本更低

在开发本机应用程序时，您必须学习某种编程语言，然后为每种类型的设备（Android 和 iOS）构建应用程序版本。

在未来，您还需要资源来维护和更新应用程序，这意味着需要大量资金和时间。

在 PWA 的情况下，您可以为不同的平台使用单个代码库。它还可以节省时间，因为您不需要从头开始开发它，您可以配置您当前的网站以适应。

PWA 可以被搜索引擎索引

本机应用程序无法被搜索引擎索引，它们只能通过 App/Play 商店的网站找到。您可以使用 App Store Optimization(ASO) 使您的应用在 App/Play 商店中更容易被发现，但那是另一回事。

与原生应用程序不同，PWA 像网站一样工作，因此它们可以被搜索引擎索引。这有助于他们在搜索结果中排名更好（更好的 SEO）。

PWA 更安全

PWA 更安全，因为它们在 HTTPS 上运行。这些是客户端和服务器之间没有交换的安全协议，因此数据不会被篡改。

为了保护您的原生应用程序，您需要实施各种安全措施，例如多因素身份验证等。

安装和下载

本机应用程序需要从应用程序商店下载和安装。这需要用户从头到尾做出一些承诺。在安装应用程序之前，用户必须通过并检查多个权限。

另一方面，PWA 不需要任何这些步骤。从浏览器中，您只需轻点几下即可将其加入书签并将应用程序添加到您的主屏幕。

PWA 的好处

许多公司急于构建 PWA，不仅因为它们制造成本低，而且还因为它们提供了更大的参与度。您可以通过推送通知（当您在手机上使用应用程序时弹出的那些提醒）轻松地与用户互动。

现在让我们快速总结一下 PWA 的好处：

它们反应灵敏，可以使用许多不同的屏幕尺寸。

它们是使用常见的 Web 技术构建的。

它们又快又轻。

与其他网站不同，它们离线工作。

它们可以通过搜索引擎发现。

您可以使用推送通知重新吸引客户。

它们易于安装

它们更容易维护，因为您将把您的网站变成一个应用程序

到目前为止，我们已经介绍了为什么应该使用 PWA。但是我们还没有讨论如何开始构建它们。所以这就是你需要的。

构建 PWA 需要什么

HTTPS – 首先，您需要一个具有 HTTPS 连接的服务器。这可确保您的用户数据安全。

应用程序外壳– 应用程序外壳在您的应用程序加载时提供快速的第一印象。简而言之，这就是用户第一次与您的应用交互时看到的内容。

服务工作者——这是 PWA 背后的关键技术之一。服务工作者帮助离线支持您的应用程序，他们执行高级缓存并运行后台任务。即使您的 PWA 未运行，Service Workers 也可以完成任务。

Service Worker 可以做很多事情，比如：

发送推送通知

徽章图标

运行后台获取任务和更多。

清单文件——这是一个用生成器创建的 JSON。此文件包含说明 PWA 应如何显示和运行的信息。它允许您确定 PWA 的名称、描述、图标、颜色和其他功能。

以下是清单文件的示例：

{
"short_name": "Shopping",  
"name": "Shop Quick",  
"description": "Your number one online shop",
"theme_color": "#eb5252",  
"background_color": "#000000",  
"display": "fullscreen",  
"Scope": "/",  "orientation": "portrait",  
"icons": [    
    {
        "src": "images/android/android-launchericon-48-48.png",      
        "type": "image/png",      
        "sizes": "48x48"
    },
    {      
        "src": "images/android/android-launchericon-96-96.png",
        "type": "image/png",      
        "sizes": "96x96"    
    },    
    {      
        "src": "images/android/android-launchericon-192-192.png",
        "type": "image/png",      
        "sizes": "192x192"    
    }  
   ],  
       "start_url": "index.html?utm_source=homescreen"
  }

审核您的应用程序，可以使用 Google Lighthouse 工具进行。谷歌是 PWA 的大拥护者，并将其作为网络的未来。您可以使用 Lighthouse 来帮助您了解 PWA 的速度、可访问性等。