渐进式 Web 应用简介

这是关于 PWA 的系列文章的第一篇。我们将从基础知识入手，逐步深入探讨其技术特性和实际案例。

我的目标是在每一步提供足够的信息，但不会让您一下子被太多细节淹没。

让我们开始我们的旅程吧...

渐进式 Web 应用程序 (PWA) 近年来变得非常流行，这是有充分理由的，因为它们不仅可以提高性能，而且还可以在用户离线时访问。

无需服务人员即可访问 Web 应用程序...

...以及服务人员：

差别很大，不是吗？

我们至少可以提供带有公司徽标和颜色的品牌离线页面，或者包含一些静态信息，例如电话号码或电子邮件地址。有些公司甚至更进一步，提供离线游戏，以防用户断网。
用户的注意力会一直集中在游戏上，直到连接恢复并自动提供所需内容。这是一种巧妙的方法，可以留住潜在客户，否则他们可能会放弃网站。
 

浏览器支持

现在几乎所有浏览器都支持服务工作者：

IE11 没有被邀请参加聚会（如果你还在使用它😢）。
 

PWA 的定义

渐进式 Web 应用 (PWA) 本质上就是一个 Web 应用程序，借助现代 Web 功能，它可以提供更丰富的用户体验，与原生应用非常相似。
 
根据 Google 的说法，PWA 具有以下特点：

• 渐进式：如果用户使用的是旧版浏览器（IE 11），该应用程序仍将作为普通的 Web 应用程序运行，而不会提供任何渐进式功能。

• 离线工作：通过服务工作者，我们可以决定在用户​​离线或使用低质量网络时缓存并提供哪些资产或数据请求。

• 安全：服务工作线程只能使用安全连接（HTTPS 或 localhost）进行安装。我们稍后会详细讨论这一点。

• 重新参与：通过在后台运行的网络通知增加用户重新参与度，即使应用程序关闭也能联系到我们的用户。

• 可安装：得益于 Web 应用程序清单，PWA 可以安装在用户的设备主屏幕上。

• 响应式：适合任何设备：台式机、手机或平板电脑。

鼓舞人心的资源

pwastats.com收集了来自不同领域的公司通过采用 PWAs 为其业务带来收益的成功案例。

在pwa.rocks网站上，您可以看到许多 PWAs 的示例。

最后，你还应该访问hnpwa.com页面。它列出了使用各种前端框架实现的 Hacker News 网站的演示，并展示了在慢速网络连接下响应时间的比较。

一些成果确实令人印象深刻，充分见证了 PWAs 的潜力。

如果您想收到更多文章更新，请关注我：
 

 

PWA 还是原生应用……这是个问题

我们了解了 PWA 旨在提供与原生应用相同的体验。然而，有些功能我们仍然无法实现，例如与手机联系人列表*交互或发送短信。另一方面，如今许多功能在几年前是无法想象的。

*（这部分是正确的，因为谷歌正在实施一个非常新的 - 在撰写本文时 - API，仍处于测试阶段，称为联系人选择器 API，为用户提供一种轻松地从联系人列表中共享联系人的方法。）

您是否知道我们可以使用振动 API 使设备震动？

我们可以通过指定单个值来脉冲振动硬件一次：

window.navigator.vibrate(100);

也可以提供一个整数数组。这些整数将被交替解释为设备应振动的毫秒数和应暂停的毫秒数：

window.navigator.vibrate([100, 50, 100]);

上述方法将使设备振动 100ms，然后暂停 50ms，然后再次振动 100ms。

如果没有振动硬件，则什么都不会发生。这是一种渐进式方法，仅在支持振动的设备上运行，其他设备则会被默默忽略，不会造成崩溃或性能下降。

不过，目前并非所有浏览器都支持此功能。Safari 和 Edge 这次也没有受邀加入。

在网站whatwebcando.today上，您可以使用当前用于访问页面的浏览器验证当前可用的所有 Web API（您可以通过单击每个 API 来检查其支持状态）。

让我们分析一下其他一些差异：

无需等待应用审核

    无需经过 Apple 或 Play 商店的验证过程；我们的 PWA 一旦部署，即可立即向公众开放。

轻松的版本管理

    我们只提供一个版本。用户将自动收到最新版本，无需担心更新请求。

开发成本

    如果我们有前端开发人员负责公司网站，只需稍加努力，他们也能创建 PWA。但移动开发则不然，我们需要额外的资源，因为通常至少需要两个移动团队：一个负责 iOS，一个负责 Android（不包括 Windows 手机）。

可共享链接

    根据定义，渐进式 Web 应用 (PWA) 的每个页面都必须支持动态链接。这一点非常重要，尤其对于社交媒体而言，因为我们可以轻松分享我们的应用页面，而无需接收者在其端安装相同的应用程序。

离线使用

    关于离线使用，或许这两种替代方案势均力敌。Service Worker 本身仅允许缓存 GET 请求，而不支持 POST 或 PUT 请求，因为这些请求会改变服务器状态。许多原生应用只有在稳定的网络连接下才能正常工作，尽管有些应用允许离线使用。在我们未来的某个链接中，我们将探讨如何克服这一弱点，并允许缓存 POST/PUT 请求。

硬件访问受限

    我们之前看到，现代 API 允许与设备硬件进行越来越多的交互，但仍存在一些功能缺失，浏览器支持也有限。因此，在这种情况下，原生应用仍然是赢家。

商店有售

    直到最近，原生应用仍然处于领先地位，但多亏了 TWA（可信网络活动），我们现在可以在 Play Store 上架我们的 PWA 了。所以，我们离原生应用又近了一步😂
 

何时开发 PWA 而不是原生应用？

渐进式 Web 应用程序：

• 该应用程序必须快速上市
• 预算有限
• 上线后计划进行多项更新
• 跨平台兼容性是必需的  

原生应用：

• 速度和响应能力是关键因素
• 需要使用特定硬件设备的功能
• 该应用程序必须与其他第三方应用程序集成

结论

我希望能够让您大致了解 PWA 的功能。它确实可以提升用户体验，为用户提供更丰富、更先进的功能。我们还可以大幅优化 Web 应用的性能，缩短响应时间，并使其能够在用户离线时显示数据。

请继续关注下一篇文章，我们将深入探讨 PWAs 的所有可能性！

目前我计划描述的主题具有以下结构：

• 在第 2 步中，我们将学习如何在用户设备上安装 PWA，以及可用于指示浏览器如何呈现我们的应用程序的不同选项。

如何在用户设备上安装 PWA

弗朗西斯科·莱迪尼 ・ 2019 年 6 月 23 日

#pwa #webdev #frontend #javascript

• 步骤 3将描述🔥🔥service workers不同的缓存策略以及我们应该在哪种情况下使用它们。

Service Worker 和缓存策略详解

弗朗西斯科·莱迪尼 ・2019 年 6 月 30 日

#pwa #frontend #webdev #javascript

• 第四步将介绍目前可用于创建 PWA 的工具。其中一些工具独立于任何 JS 框架，但我们也将了解如何使用 Angular 从零开始创建一个功能齐全的 PWA。

使用 Angular 和其他免费工具创建渐进式 Web 应用程序！

弗朗西斯科·莱迪尼 ・ 2019 年 7 月 7 日

#angular #pwa #初学者 #javascript

• 在第 5 步中，我们已经简要提到了 Service Worker 如何仅缓存GET请求。在本文中，我们将把 PWA 提升到一个新的水平，让我们的应用程序能够进行完整的 CRUD 操作 💪。

创建一个永不离线的网络应用程序！

弗朗西斯科·莱迪尼 ・ 2019 年 7 月 15 日

#pwa #javascript #firebase #webdev

• 第 6 步将教我们如何使用推送通知重新吸引目标用户。