原文链接 “What is a PWA and why should you care?” by Mahesh Haldar
在过去的几年里，手机用户的数量呈指数级增长。今天，超过 60%的互联网使用是通过移动电话。
显然，原因包括可移植性、廉价的硬件、容易访问 internet 以及 internet 上服务数量的增加。随着手机用户的增多，优化手机的用户体验至关重要。
对于较小的公司来说，由于成本或时间限制，它们通常没有原生应用，web 应用程序则是它们通过提供尽可能好的体验来赢得客户的关键机会。
如果公司有专门的原生移动应用程序，那么由于硬件和内存限制或其他个人偏好，许多用户可能会更喜欢自己的 web 版本，以避免下载和安装。
如果一家公司致力于并希望获得最大程度的客户参与，那么 web 应用程序的体验必须接近原生应用程序。
今天，网站已经变成了杂货店，社交网络以及聊天的地方等等。并期待该网站能搜索房屋并保存世界地图，期待该网站能提供 powerpoint 和 excel 表格的所有功能。
提示:在组件中更快地使用快捷Bit构建应用程序。它帮助您与您的团队共享和重用组件，并使用它们来构建新的应用程序!试试吧。
渐进式 web 应用程序
让我们以 Whatsapp 为例。当没有网络的时候，你仍然可以打开应用程序，检查过去的信息，甚至回复别人。当电话得到互联网连接时，信息会自动发送到后台。
这就是 PWA 承诺在 web 应用程序中要提供的东西。它允许 web 应用程序在没有网络时加载，在后台同步，并无缝地做事情，同时为您的用户提供一种原生体验。
为什么我们需要 PWA，他们的特点是什么?
让我们来讨论一下那些非 PWA 所不具备的核心属性。
- 可靠性
应用程序应该瞬间加载完毕，当没有网络或像 2G 这样的低速网络时也应该打开。谷歌发现，如果页面加载时间超过 3 秒，53%的用户会放弃网站。
- 快速
当用户与 web 应用程序交互时，滚动和页面过渡应该非常平滑。每个人都讨厌糟糕的滚动体验。
- 响应式
应用程序应该适配所有不同大小的设备。完美的 web 应用程序应该像流体一样，以容器的形状呈现。
- 可安装性
如果我们想让 web 应用程序更接近原生应用程序，它们必须是可安装的，并且应该与其他原生应用程序一起驻留在主屏幕中，这样用户就可以在一次单击中访问 PWA。
- 闪屏
PWA 在应用程序启动时增加了一个闪屏，这让 PWA 感觉更像一个原生应用程序。
- 高度可参与性
应用程序应该让用户参与进来。PWA 提供推送通知、主屏幕图标、全屏和离线第一应用等功能，以提高用户参与度。
在 PWA 中，所有以上特征都是可能的。
PWA 只是一个普通的 web 应用程序，但它上的是最好的大学，并掌握了用户体验。
PWA 与现代 UI 框架
很少有人认为 PWA 与最新的 UI 框架(如 React.js、Angular 6 或 Vue.js)能结合在一起。好吧，不需要的，PWA 与您使用的框架无关，它只与所需的组件有关。
PWA 如何使网站离线?
这正是我第一次思考 PWA。如果没有互联网，web 应用程序是如何打开?
我们都知道，在没有网络连接的情况下，原生应用程序是可以打开的，因为当我们下载并安装它们时，像 UI 组件这样的重要资源和一些数据就被存储在了设备中。这就是要在 PWA 中要做的事情。
PWA 在浏览器缓存中存储 HTML 文件、CSS 文件和图像，开发人员可以完全控制网络调用。所有这些都是由Service Workers实现的。
PWA 的技术组成是什么?
PWA 有一些重要的技术组件，它们共同工作，为常规 web 应用程序提供强大的支撑。
以下是每一个 components 的概述。
Service Worker
我们的 web 应用程序直接与网络对话，如果没有网络，屏幕上就会显示著名的恐龙。
这里可以进行优化。对于第一次加载，Service Worker 将所需的资源存储在浏览器缓存中。当用户下次访问应用程序时，Service Worker 会检查缓存并在检查网络之前将响应返回给用户。
Service Worker 只是 JavaScript 代码的一个组件，它充当浏览器和网络之间的代理。Service Worker 管理推送通知，并使用浏览器的缓存 API 构建离线的第一个 web 应用程序。
这可以加快应用程序的性能，无论设备是否连接到互联网。
开发人员可以完全控制应用程序的行为，以及它在各种场景下应该如何响应。Service Worker 有自己的生命周期事件。
一旦缓存完成并为离线访问做好准备，您还可以通过显示一个说明来吹嘘缓存已经完成，用户也可以离线访问它。
manifest 文件
manifest 文件是一个 JSON 配置文件，它包含应用程序的信息，如安装时在主屏幕上显示的图标、应用程序的名称、背景颜色或主题。
如果 manifest 文件存在，Chrome 浏览器将自动触发 web 应用程序安装横幅，如果用户同意，将把图标添加到主屏幕，并安装 PWA。
下面是 manifest 示例文件:
{
"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 检查文件。
HTTPS
Service Worker有能力拦截网络请求，并可以修改响应。Service Worker 在客户端执行所有操作。因此，PWA 需要安全协议 HTTPS。
Service Worker有能力接收推送通知和后台同步，这肯定增加了用户的体验，并保持客户的参与。推送通知和后台同步是可选的，但建议提供更简单的体验。
Demo
- Status
告诉我们 Service Worker 被激活和运行。
- 离线
通过检查这个选项，chrome 可以判断应用是否离线。刷新选项卡，它将模拟 PWA 在没有网络时的响应方式。您还可以关闭 wifi 或数据来测试 PWA。
- cache
这部分显示 Service Worker 在缓存中存储的所有文件。
- push && async
这些部分在开发过程中用于测试推送通知和后台同步。
