网站秒变APP，神奇的PWA入门介绍（Part 1/2）

本文翻译自Shruti Kapoor的Progressive Web Apps 101: the What, Why and How，并进行了必定程度的二次创做，原文连接：https://www.freecodecamp.org/news/progressive-web-apps-101-the-what-why-and-how-4aa5e9065ac2/

包含文中所涉及的外部连接的译文原文：https://github.com/azzinoths0905/news-translation/blob/patch-3/chinese/articles/progressive-web-apps-101-the-what-why-and-how.md

什么是渐进式Web应用(PWA)？为何咱们须要PWA？咱们应该如何搭建一个PWA应用？

你有看到过上面第一张图的“添加到主屏幕”弹出框吗？当你按下这个按钮时，这个"APP"就会自动在后台进行安装，而后你就能够在你手机的APP列表里找到它。打开它时，你能够在里面作和以前在浏览器里同样的事，不过此次不用再打开浏览器了，这个APP如今直接运行在你的手机系统中。

如今你拥有的是一个从Web应用上下载下来的移动APP。在这整个过程当中，咱们彻底不须要去使用手机的应用商店。

安装这样一个APP居然如此简单！不过更厉害的是，你甚至能够在没有网络的时候离线浏览这个APP里的内容。

这就是渐进式Web应用(PWA)。你能够直接经过浏览器安装PWA应用，它能够像原生APP同样在线或离线在手机上使用。

可是，对于Web应用而言，渐进式到底意味着什么？ 让咱们来更深刻地研究什么是PWA，为何我认为它们比原生APP更好，它们又是为何与传统的Web应用不一样。

什么是渐进式Web应用(PWA)？

PWA这一律念是由Alex Russell和Frances Berriman创造的。引用Alex的话：

PWA其实就是新增了各类有用特性的网页。

它不是什么新的框架或技术，而是让一个Web应用能够像桌面或移动APP同样的一些最佳实践。主要目的是让Web应用有一种更统1、更沉浸的体验，以致于用户没法分辨PWA与原生APP之间的区别。

PWA经过渐进加强来提升用户体验。换句话说，这意味着PWA应用能够兼容几乎全部的设备。固然，某些功能可能不可用，但这个APP仍然能够正常提供应有的功能。

为何咱们须要PWA？

在讲为何咱们须要PWA以前，让咱们先谈谈当今原生和Web应用所面临的一些问题。

网速：你可能并无网速问题，这取决于你住在什么地方，可是全球60％的人口仍在使用2G互联网。 即便在美国，有些人仍是不得不使用拨号上网。

网页加载速度慢：若是网页加载太慢，你知道用户等多少时间就会点击“关闭”按钮吗？ 三秒钟！若是网页加载太慢，则有53％的用户会选择直接关掉标签页。

抗拒安装新的APP：用户不想安装原生APP，普通用户一个月内平均安装的APP数量不到1个。

用户粘性：用户将大部分时间花在原生APP上，但移动端网页的访问量几乎是原生APP的三倍。 所以，大多数用户都不会长时间去使用移动端网页，它们80％的时间都花在了前三名的原生APP上。

用户粘性：移动端Web应用 VS 原生APP

用PWA有不少好处，这里列出它最有帮助的几项：

1. Fast（速度快）：PWA应用能够持续提供快速的用户体验。 从开始下载到可使用，整个过程都很是快。因为能够缓存数据，即便没有网络也能够再次快速启动这个APP。
2. Integrated user experience（沉浸式的用户体验）：PWA应用用起来就像原生APP同样。 它们能够放在用户的主屏幕上，发送推送通知，并能够访问设备硬件的功能，有着沉浸式的体验。
3. Reliable experience（高可用性）: 在service worker的帮助下，即便网络出现问题，PWA应用也能够在用户的屏幕上正常渲染图片。
4. Engaging（高用户粘性）: 因为PWA应用能够向用户推送通知，因此咱们能够唤醒用户来真正地提升粘性。

PWA is on FIRE！

咱们应该如何搭建一个PWA应用？

Google为渐进式Web应用发布了 项目清单。 想让一个Web应用成为PWA应用，至少须要如下四个要求：

1. Web App Manifest

一个示例的manifest.json文件

这只是一个提供Web应用相关的meta信息的json文件。它有诸如APP图标（用户在将其安装到设备中后会看到的图标），APP的背景颜色，APP的名称，简称等信息。咱们能够本身编写manifest文件，也可使用工具为咱们生成一个manifest文件。

你能够用Google的工具自动生成manifest文件。

2. Service Workers

Service Worker是事件驱动的服务，它们在APP的后台运行，并充当网络和APP之间的代理。 他们可以拦截网络请求并在后台为咱们缓存信息。 这可用于加载数据以供离线使用。它们是一个JavaScript脚本，用于侦听诸如获取和安装之类的事件，并执行任务。

这里是一个serviceworker.js的示例：

self.addEventListener('fetch', event => {
    //缓存数据以供离线使用
    const {request} = event;
    const url = new URL(request.url);
    if(url.origin === location.origin) {
        event.respondWith(cacheData(request));
    } else {
        event.respondWith(networkFirst(request));
    }
});
async function cacheData(request) {
    const cachedResponse = await caches.match(request);
    return cachedResponse || fetch(request);
}

3. 图标

这是当用户在设备上安装PWA应用时显示的APP图标， 通常的jpeg图片就能够了。我在上面贴出的manifest文件里有列出多种尺寸的图标，我以为这在不少时候很是有用。

4. 使用HTTPS

为了让Web应用成为PWA应用，必需要经过安全网络为它提供服务。借助Cloudfare和LetsEncrypt之类的服务，获取SSL证书确实很是容易。 成为安全站点不只是最佳实践，并且还将Web应用创建为值得用户信任的站点，以得到用户的信任和依赖，并避免中间人攻击。