[译] 让你的 Web 应用和移动应用选择 PWA 的 5 个理由

• 原文地址：5 Reasons to Choose PWA for Your Web and Mobile Apps
• 原文做者：Chameera Dulanga
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：rocwong-cn
• 校对者：Isildur46、Misszhu

我敢确定大家中大多数的人都据说过渐进式网页应用（PWA）。PWA 是一项使人兴奋的技术，它具备颠覆咱们开发 Web 和移动应用的方式的潜力。然而，有些人可能会说 PWA 只是将网站转换为移动应用，还有些人则在争论其功能、安全性以及相较于原生移动应用的性能。

所以，在本文中，我将阐述 PWA 的五个有价值的特性，这些特性对于您未来的 Web 和移动应用会很是有用。

1. 开发 Web 和移动应用只需一种技术

在现代技术世界中，咱们能够看到不少开发人员给本身贴上 Web 开发人员，移动端开发人员等标签。

究其缘由，咱们能够发现技术、工具和不一样的平台在分工中发挥了重要的做用。

以原生 App 开发为例，则须要了解一些特定的技术，例如 Java、Kotlin、Swift、Flutter 等编程语言，以及 Android Studio、XCode 等工具包。

相比之下，使用 JavaScript/TypeScript、HTML、CSS 以及 Angular 这样的框架或 React 这样的库是很容易的。2019 年 stack overflow 的调查结果显示，上述这些 Web 开发语言是最受欢迎的。

这些结果影响着开发人员的技术选型，所以，会有更多的开发人员选择 Web 领域。

2. 性能可靠

咱们能够发现，快速、可靠和沉浸式体验是 PWA 的重要特性。Application Shell 架构是实现这些特性的最佳方法之一。即便用户处于弱网或离线状态，该架构体系也能够为用户提供快速、可靠的性能。让咱们看看该架构的主要优点是什么。

若是咱们遵循 Application Shell 架构原则，能够将应用分为 Shell 和 Content 两个主要部分。初始化用户界面所需的最小应用程序内容称为 Shell，而其余须要经过联网获取的动态部分称为 Content。 所以，Shell 负责经过缓存其内容以供离线环境使用，从而为用户提供快速、可靠的用户体验。这种方法很是适合单页面应用（SPA），而且为用户节省了数据流量，带来了可靠和快速的性能以及原生的交互体验。

3. 使用 Service Worker 提供最佳的用户体验

若是您是 Web 开发人员，那么我相信您必定已经使用或据说过 Service Worker。Service Worker 在您的 Web 应用程序的后台运行，并处理大量不须要用户关注的任务。这些 Service Worker 一般在新的 Web 应用程序中使用，也能够在 PWA 中使用。让咱们看一下 Service Worker 为 PWA 提供的主要功能。

离线运行

与原生应用相比，离线运行是 PWA 的颇具竞争力的特性之一，PWA 借助 Service Worker 来实现此功能。使用 Service Worker，您能够缓存应用的 Shell，当用户再次访问时它将当即加载。这些后台操做可改善应用的用户体验，由于用户不会看到在线和离线模式之间有任何重大差别。可是只有在联网后，动态内容才会刷新。咱们可使用 telegram（一个通信平台）来举例，该应用程序将照常打开，即便您处于离线状态，您也能够查看和阅读之前的聊天记录。联机后，应用程序将刷新并显示新消息。

后台同步

后台同步是 Service Worker 提供的另外一项功能，它使应用程序能够在网络链接可用时响应任何关键请求，甚至包括您在离线模式发起的调用。例如，若是您在断网时发送消息，Service Worker 将负责处理并在链接可用时完成该请求。后台同步的 Demo 实现以下所示：

navigator.serviceWorker.register('/service_worker.js');

navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('backGroundSync');
});

self.addEventListener('sync', function(event) {
  if (event.tag == 'backGroundSync') {
    event.waitUntil(yourFunction());
  }
});
复制代码

如上所述，即便关闭了应用程序，Service Worker 仍被用做事件目标，以使后台同步工做。 yourFunction() 将返回一个 Promise，该 Promise 将标记活动的状态为成功或者失败。若是成功，则完成后台同步；若是失败，则稍后再安排一次同步。另外，请注意 yourFunction() 的名称对于给定的同步应该是惟一的。

除了这两项以外，Service Worker 还为 PWA 提供了许多功能，例如即便应用程序不活跃时也能够接收推送通知、缓存网络请求以及缓存静态内容等。

4. 原生应用的外观和体验

简单地讲，Web 应用的 manifest 配置就是为 PWA 定义原生外观的 JSON 文件。当咱们从 play store 或者 app store 安装一个应用时，就能够在手机上看到一个应用的图标，这就使得移动应用相较于网站更具交互性。对于 PWA，Web 应用的 manifest 文件是全部用户交互的入口，而且包含应用的外观相关配置的元数据。使用此 JSON 文件，咱们能够轻松地更改应用的许多元素，包括应用的图标、主题色、屏幕横竖和启动屏页面。下面咱们一个实例来更深刻的讨论一下这些属性。

{
  "name": "My Example App",
  "short_name": "My App",
  "start_url": ".",
  "display": "standalone"  
  "background_color": "#ffffff",
  "theme_color": "red"
  "description": "Demo App.",
  "orientation": "portrait-primary",
  "icons": [{
    "src": "images/logo.png",
    "sizes": "48x48",
    "type": "image/png"
  } ... ],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?..."
  }]
}
复制代码

一个简单的 Web manifest JSON 文件如上所示，name，short_name 属性用于应用程序显示名称。在这里，icon 属性是一个列表，包含不一样尺寸的应用图标。display 属性能够具备全屏、独立、最小用户界面和浏览器这些值，全屏模式会删除全部浏览器元素，并为您的应用程序提供最佳的原生体验。start_url 定义了用户从主屏幕启动 PWA 时加载的页面。除此以外，还有许多属性可用于为 PWA 带来原生的体验。最重要的是，做为开发人员，您能够彻底控制应用程序的启动过程，而且能够利用这些属性轻松地与原生应用一较高下。

5. 加强安全性以及设备访问的透明性

安全是咱们须要考虑的另外一个重要方面。随着全球安全事件的增长，用户比以往任什么时候候都更加关注其数据设备是否具有足够的安全性来防止恶意攻击。所以，做为开发人员，咱们必须使用咱们选择的技术来创建安全的最佳实践以免这些问题。所以，让咱们看看如何经过 PWA 向用户保证安全性。

PWA 强制要求在传输层使用安全协议。所以，对用户而言，敏感信息在传输过程当中是加密的，而且只能使用存储在服务器中的私钥来解密数据。出于这个缘由，应该使用 HTTPS 为 PWA 的网站提供服务，而且必须在服务器中安装 SSL 证书。

另外，未经用户许可，PWA 不会与设备硬件进行交互，而且在 PWA 应用程序中隐藏任何恶意代码也不容易。若是咱们遵循最佳实践，仅在必要时才请求获取访问设备的权限，并使用最新的受信任的 JavaScript 库，则风险将大大下降。

结论

除了这 5 个缘由之外，PWA 还知足了咱们对其余 Web 或者移动应用的要求，例如响应速度、可靠性以及用户体验等。做为开发人员，您无需承担语言和框架上负担，所以开发 PWA 很容易。与原生应用的开发相比，PWA 花费的时间更少。

若是您决定使用 PWA，在业务层面，成本会更低，市场占有率会更高，而且能够快速地进行搜索引擎优化。所以，下次寻求 Web 或者移动端的解决方案时，请立刻尝试 PWA 吧。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。