渐进式应用程序Progressive Web Applications（PWA）全面指南

原文地址： An Extensive Guide To Progressive Web Applications

快速摘要

在本文中，我们将了解浏览旧的非PWA网站的用户的痛点以及PWA使网络变得更好的希望。您将学习制作非常酷的PWA的大多数重要技术，例如service worker，Web push notification和IndexedDB。

这是我父亲的生日，我想给他订一块巧克力蛋糕和一件衬衫。我前往谷歌搜索巧克力蛋糕并点击搜索结果中的第一个链接。有一个屏幕空白几秒钟;我不明白发生了什么。耐心地盯着几秒钟后，我的手机屏幕上装满了美味的蛋糕。当我点击其中一个查看其详细信息时，我得到了一个丑陋的弹出窗口，要求我安装一个Android应用程序，这样我就可以在订购蛋糕时获得丝般顺畅的体验。

那令人失望。我的良心不允许我点击“安装”按钮。我想做的就是点一块小蛋糕然后走开。

我点击了弹出窗口右侧的十字图标，尽快摆脱它。但随后安装弹出窗口位于屏幕底部，占据了四分之一的空间。随着片状UI的向下滚动是一个挑战。我不知何故设法订购了荷兰蛋糕。

在经历了这种可怕的经历后，我的下一个挑战是为我爸爸订购一件衬衫。和以前一样，我在谷歌搜索衬衫。我点击了第一个链接，眨眼间，整个内容就在我面前。滚动很顺利。没有安装弹窗。我觉得好像在浏览本机应用程序。有一段时间我互联网断开了连接，但我仍然能够看到内容而不是恐龙游戏。即使有我的网络，我还是为父亲订购了一件衬衫和牛仔裤。最令人惊讶的是，我收到了有关订单的通知。

我会称之为丝般顺畅的体验。这些人做得对。每个网站都应该为他们的用户做。它被称为渐进式网络应用程序PWA。

正如Alex Russell所说one of his blog posts:

“It happens on the web from time to time that powerful technologies come to exist without the benefit of marketing departments or slick packaging. They linger and grow at the peripheries, becoming old-hat to a tiny group while remaining nearly invisible to everyone else. Until someone names them.”

WEB上丝滑顺畅体验，PWA

渐进式Web应用程序（PWA）更像是一种涉及技术组合的方法，可用于制作功能强大的Web应用程序。随着用户体验的改善，人们将花费更多时间在网站上并看到更多广告。 他们倾向于购买更多，并且通知更新，他们更有可能经常访问。英国“金融时报”在2011年放弃了其原生应用程序，并使用当时可用的最佳技术构建了一个Web应用程序。 现在，该产品已发展成为一个成熟的PWA。

但是，毕竟这一次，为什么当原生应用程序很好完成这项工作时，你会构建一个Web应用程序吗？

我们来看看Google IO 17中分享的一些指标。

五十亿台设备连接到网络，使网络成为计算历史上最大的平台。在移动网络上，每月有1140万独立访问者访问前1000个网站，400万访问前千名应用。移动网络的用户数量是原生应用程序的四倍。但是，这个数字在交互方面急剧下降。

用户在原生应用程序中平均花费188.6分钟，在移动网络上花费仅9.3分钟。原生应用程序利用操作系统的强大功能发送推送通知，为用户提供重要更新。它们提供了比浏览器中的网站更好的用户体验和更快的启动。用户只需点击主屏幕上的应用程序图标，而不是在Web浏览器中键入URL。

网络上的大多数访问者都不太可能回来，因此开发人员提出了向他们展示弹窗以安装本机应用程序的解决方法，以便让他们深入参与。但是，用户必须完成安装本机应用程序二进制文件的繁琐程序。强制用户安装应用程序很烦人，并且进一步降低了他们首先安装应用程序的可能性。网络的机会很明显。

推荐阅读：Native And PWA: Choices, Not Challengers!

如果Web应用程序具有丰富的用户体验，推送通知，离线支持和即时加载，它们可以征服世界。 这是渐进式Web应用程序的功能。

PWA提供丰富的用户体验，因为它具有以下几个优势：

• 快速

  用户界面不古里古怪；滚动平滑，应用快速响应用户交互

• 可靠

  当用户连接服务器繁忙的时候，一个普通的网站迫使用户等待，什么都不做。但是，PWA从缓存中即时加载数据。即使在2G连接上，PWA也可以无缝工作。每个获取资源或数据的网络请求都通过service worker（稍后会详细介绍），该service worker首先验证特定请求的响应是否已经在缓存中。当用户几乎立即获得真实内容时，即使连接不良，他们也会更加信任应用并将其视为更可靠。

• 参与度

  PWA可以在用户的主屏幕上获得一个位置。 它通过提供全屏工作区提供原生应用程序般的体验。 它利用推送通知来保持用户参与。

现在我们知道PWA带来了什么，让我们深入了解什么使PWA优于原生应用程序。PWA使用service worker，Web app manifests，web push notification和用于缓存的IndexedDB /本地数据结构等技术构建。 让我们详细研究一下。

Service Workers

service worker是一个在后台运行的JavaScript文件，不会干扰用户的交互。 对服务器的所有GET请求都通过service worker进行。它就像一个客户端代理。 通过拦截网络请求，它可以完全控制发送回客户端的响应。PWA立即加载，因为service worker通过响应来自缓存的数据来消除对网络的依赖性。

service worker只能拦截其范围内的网络请求。 例如，根范围的service worker可以拦截来自网页的所有提取请求。 service worker作为事件驱动系统运行。 它在不需要时进入休眠状态，从而节省了内存。 要在Web应用程序中使用service worker，我们首先必须使用JavaScript在页面上注册它。

(function main () {
   

   /* navigator is a WEB API that allows scripts to register themselves and carry out their activities. */
    if ('serviceWorker' in navigator) {
   
        console.log('Service Worker is supported in your browser')
        /* register method takes in the path of service worker file and returns a promises, which returns the registration object */
        navigator.serviceWorker.register('./service-worker.js').then (registration => {
   
            console.log('Service Worker is registered!')
        })
    } else {
   
        console.log('Service Worker is not supported in your browser')
    }

})()

我们首先检查浏览器是否支持service worker。要在Web应用程序中注册service worker，我们将其URL作为注册函数的参数提供，可在navigator.serviceWorker中找到（navigator是一个允许脚本自行注册并执行其活动的Web API）。 service worker只注册一次。 每次加载页面时都不会进行注册。仅当现有激活的service worker与较新的service worker之间存在字节差异或者其URL已更改时，浏览器才会下载service worker文件（./service-worker.js）。

上述service worker将拦截来自根（/）的所有请求。 为了限制service worker的范围，我们将传递一个可选参数，其中一个键作为范围。

if ('serviceWorker' in navigator) {
   
    /* register method takes in an optional second parameter as an object. To restrict the scope of a service worker, the scope should be provided.
        scope: '/books' will intercept requests with '/books' in the url. */
    navigator.serviceWorker.register('./service-worker.js', {
    scope: '/books' }).then(registration => {
   
        console.log('Service Worker for scope /books is registered', registration)
    })
}

上面的service worker将拦截在URL中具有/ books的请求。 例如，它不会拦截/ products的请求，但它可以很好地拦截/ books / products的请求。

如上所述，service worker作为事件驱动系统运行。 它侦听事件（安装，激活，获取，推送），并相应地调用相应的事件处理程序。 其中一些事件是service worker生命周期的一部分，它按顺序通过这些事件来激活。

INSTALLATION

成功注册服务工作程序后，将触发安装事件。 这是进行初始化工作的好地方，比如在IndexedDB中设置缓存或创建对象存储。（一旦我们了解了它的细节，IndexedDB会对你更有意义。现在，我们可以说它是一个键值对结构。）

self.addEventListener('install', (event) => {
   
    let CACHE_NAME = 'xyz-cache'
    let urlsToCache = [
        '/',
        '/styles/main.css',
        '/scripts/bundle.js'
    ]
    event.waitUntil