【第1377期】为什么我们应该关注下 PWA?

前言

其实一直在思考PWA的应用场景，是真的。今日早读文章由@知识小集分享。

@知识小集，专注于移动开发领域，分享交流移动开发技术、行业资讯、职位等信息，去发现那些被发现的技术人与文。

正文从这开始~~

在过去几年中，手机用户数量呈指数增长。今天，超过 60％ 的互联网流量产生自手机。

显然，原因包括手机的便携性、廉价硬件、易于访问互联网以及互联网上针对手机的服务数量的增加。随着移动用户的增加，在手机上优化用户体验变得至关重要。

对于由于成本或时间限制而通常没有原生应用程序的小型公司，Web 应用程序成了提供最佳体验以赢得客户的关键方式。

而对于有原生移动应用程序的公司来说，许多用户可能反而会更喜欢他们的 Web 版本应用程序，以避免因硬件和内存限制或其他个人偏好而下载和安装原生应用。

如今，我们对网站的期望都非常高。而大约 25 年前，当网站被发明时，其目的主要是分享信息。

今天，Web 网站几乎无所不包：一个杂货店、社交网络、聊天的地方…或者可以搜索房屋信息，查看世界地图，又或者提供 powerpoint 或 excel 的所有功能。

认识 PWA

我们以你手机上的 Whatsapp 为例。当没有网络时，您仍然可以打开应用程序，查看过去的消息甚至回复某人。当手机再次联网时，消息将在后台自动发送。

这是 PWA 希望在 Web 应用程序中提供的内容。它可以在没有网络时加载 Web 应用程序，在后台同步并无缝地执行操作，同时为用户提供类似原生应用的体验。

我们为什么需要 PWA，它有什么特性？

我们来讨论下常见的 非 PWA 应用程序 中缺少的一些核心属性。

可靠性

应用程序在加载时应该快如闪电，并且在没有网络或像 2G 这样的低速网络时也可以打开。Google 发现，如果网页加载时间超过 3 秒，则有 53％ 的用户会放弃该网站。

快速

当用户与 Web 应用程序交互时，滚动和页面转换应该是如丝般顺滑的。每个人都讨厌蹩脚的滚动。

响应

该应用程序应适配所有不同大小的设备。完美的 Web 应用程序应该像流水一样，去适应容器的形状。

可安装

如果我们想让 Web 应用程序更接近原生应用程序，它们必须是可安装的，并且应该与其他原生应用程序一起驻留在主屏幕中，以便用户只需单击一下即可访问 PWA。

启动画面

PWA 在应用程序启动期间添加了一个闪屏。这使得 PWA 更像是原生应用程序 😉。

高度参与

应用应该让用户保持参与。PWA 提供诸如推送通知、主屏幕图标、全屏和离线应用程序等功能，以提高用户参与度。

PWA 可以实现上述所有特征。

PWA 和现代 UI 框架

有些人认为 PWA 需要与最新的 UI 框架（如 ReactJs，Angular 6 或 Vue.js）的结合起来使用。嗯，不一定。 PWA 与您正在使用的框架无关，它只需要所需的组件。

PWA 如何使网站在离线的情况下可用？

这正是我对 PWA 的最初的考虑。在没有网络的情况，Web 应用程序究竟如何打开？

我们都知道原生应用程序可以在没有网络连接的情况下打开，因为当我们需要下载并安装它们时，UI 组件和一些数据等关键资源都会存储在设备中….好吧，这正是 PWA 中发生的事情 😀

PWA 将 HTML 文件、CSS 文件和图像存储在浏览器缓存中，开发人员可以完全控制网络调用。所有这些都是由 Service Workers 实现的。

PWA 的技术组件是什么？

PWA 有一些重要的技术组件，它们协同工作并为常规 Web 应用程序注入了活力。开发良好的 PWA 需要以下组件。

让我们来看看它们中的每一个。

1. Service Worker

我们的 Web 应用程序直接与网络通信，如果没有网络，则屏幕显示那只著名的恐龙。

这里可以做一些优化。对于首次加载，service worker 将所需资源存储在浏览器缓存中。当用户下次访问应用程序时，service worker 检查缓存并在检查网络之前将响应返回给用户。

Service worker 只是一个 JavaScript 代码的组件，它充当浏览器和 Web 之间的代理。service worker 管理推送通知，并使用浏览器的缓存 API 帮助构建脱机的 Web 应用程序。

这可以加快应用程序的性能，无论设备是连接还是未连接到互联网。

开发人员可以完全控制应用程序的行为以及应用程序在各种情况下的响应方式。Service worker 有自己的生命周期事件。

一旦缓存完成并准备好进行离线访问，您还可以选择显示一个提示说缓存已完成，用户可以访问了。

manifest 文件

manifest 文件是一个配置 JSON 文件，其中包含应用程序的信息，例如安装时主屏幕上显示的图标、应用程序的简称、背景颜色或主题。

如果 manifest 文件存在，Chrome 浏览器将自动触发 Web 应用程序安装提示，如果用户同意，则会将图标添加到主屏幕并安装 PWA。这不是挺 XX？😎

以下是示例清单文件：

{
 "short_name": "Spinner",
 "name": "Fidget spinner",
 "icons": [
   {
     "src": "/images/icons-192.png",
     "type": "image/png",
     "sizes": "192x192"
   },
   {
     "src": "/images/icons-512.png",
     "type": "image/png",
     "sizes": "512x512"
   }
 ],
 "start_url": "/home/?source=pwa",
 "background_color": "#3367D6",
 "display": "standalone",
 "scope": "/home/",
 "theme_color": "#3367D6"
}

在以下屏幕截图中检查 manifest 文件的运行情况。

3. HTTPS

Service workers 能够拦截网络请求并可以修改响应。Service workers 在客户端执行所有操作。因此，PWA 需要安全协议 HTTPS。

Service workers 能够接收推送通知并在后台执行同步操作，这肯定会增加用户体验并使客户保持参与。推送通知和后台同步是可选的，但建议您提供更原生的体验。

演示时间

今天，有许多可用的 PWA。如果您想使用 PWA 并研究 service workers 的行为，请访问 fidgetspin.xyz 并切换到 Chrome 的 DevTools -> Application 选项卡。

状态：告诉我们 service worker 已激活并正在运行；

离线：通过选中此选项，chrome 会将应用视为是否处于离线状态。刷新选项卡，它将模拟 PWA 在没有网络时的响应方式。您也可以关闭 wifi 或数据来测试 PWA；

缓存：此部分显示 service worker 将所有文件存储在缓存中的内容；

推送和同步：在开发过程中使用这些部分来测试推送通知和后台同步。

您可以访问 https://pwa.rocks/，其中包含很多 PWA 应用程序。

工具和库

目前还很少有开源工具可以增强并简化 PWA 的开发。

Lighthouse 是一种审计工具，可以针对任何网页（公共或个人）运行，并生成一份包含 PWA 所需清单的报告。这可以在您的 PWA 开发期间用于交叉检查，并获得进一步改善体验的建议。

Workbox 是一组库，由 Google 开源，可用于生成 service worker 文件。 Workbox 还附带了各种图像和其他资源的缓存策略。

PWA 的成功案例

谷歌公布了实施 PWA 的公司的成功案例。 访问 https://developers.google.com/web/showcase/，详细了解这些公司如何解决问题以处理慢速网络，如何优化用户体验以及将转化率和搜索引擎优化性能提高 80％。

这展示了全球各公司面临的各种问题以及他们如何使用 PWA 解决问题。我很确定你会得到关于 PWA 如何证明对你有帮助的提示。

最后，推荐一个工具:

nrgok，是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

网址：https://ngrok.com/

关于本文
作者：@知识小集
原文：
https://mp.weixin.qq.com/s/6b479imf6UdIo1H7AC2PTw

最后，为你推荐

他曾分享过：