用PWA构建一个完全离线的网站

时间：2023-07-03 15:00:02 | 来源：网站运营

时间：2023-07-03 15:00:02 来源：网站运营

用PWA构建一个完全离线的网站：想象一下，你有能力去构建一个完全离线的网站，为用户提供几乎瞬间加载的体验，同时它对于不可靠的网络又是安全及富有弹性的。这听起来既不可能，又不可思议。无论你是否相信，绝大部分现代浏览器都已经内置提供了这些功能，只需要释放它们。当你利用这些强大的功能构建网站时，你便已经拥有了所谓的 PWA（Progressive Web App）。

PWA有什么优势

回溯到 1990 年的圣诞节，Tim Berners-Lee 爵士和他在 CERN 的团队创建了使Web 正常工作所需的所有工具。他们创建了 HTTP、HTML 和 WorldWideWeb（全世界第一个网页浏览器）。WorldWideWeb 只能运行具有超链接的简单纯文本组成的网页。事实上，这些第一代的网页仍然在线，并且可以浏览。

从几十年前回到现在，我们所浏览的网页并没有变化。当然，现在我们有了像CSS 和JavaScript 这样的功能，但网页的核心依旧是使用 HTML、HTTP 以及其他一些模块来构建，这些都是 Berners-Lee 和他的团队在多年前所创建的。这些辉煌的构建模块意味着 Web 已经能够以惊人的速度增长。然而，我们用来访问网页的设备数量也在不断增长。无论你的用户是在旅途中还是坐在书桌前，他们都无时无刻不在获取信息。我们对于 Web 的期望从未如此之高。

虽然移动设备变得愈发强大，但移动网络并不是总能满足需求。如果你使用智能能手机，你就会知道移动连接有多么脆弱。2G、3G 或 4G 本身都很不错，但是它们时常会无法连接，或者网速变得很差。如果你的业务是与 Web 相关的，这就是你需要解决的问题。

从历史上来说，原生应用 ( 安装到手机上的 ) 已经能够提供更好的整体用户体验，下载完应用，它便可以立即加载。即使没有网络连接，也并非是完全不可用的，因为设备上已经存储了供客户使用的绝大部分资源。原生应用提供有弹性、吸引人的体验的能力使得它的数量已经呈爆炸式增长。目前，在苹果和谷歌的应用商店中，已经有超过 400 万个原生应用。

同样从历史上来说，Web 无法提供原生应用所具备的这些强大功能，比如离线能力、瞬时加载和更高的可靠性。这也正是 PWA 成为 Web 颠覆者的契机。主要的浏览器厂商一直在努力改进构建 Web 的方式， 并创建了一组新功能以使 Web 开发者能够创建快速、可靠和吸引人的网站。PWA 应该具备以下特点 ：

• 响应式
• 独立于网络连接
• 类似原生应用的交互体验
• 始终保持更新
• 安全
• 可发现
• 可重连
• 可安装

这是 Web 开发者构建网站传统方式的一种转变。这意味着我们可以开始构建能应对不断变化的网络状况或无网络连接的网站。这还意味着我们可以建立更吸引人的网站来为用户提供一流的浏览体验。

读到这里，你可能会想，这太疯狂了。那些不支持这些新功能的老浏览器怎么办？ PWA 最棒的一点就是它真的是渐进式的。如果你构建一个 PWA，即使在一个不支持的老旧浏览器上运行，它仍然可以作为一个普通的网站来运行。驱动 PWA的技术就是这样设计的，只有在支持这些新功能的浏览器中才会增强体验。如果用户的设备支持这些新功能，那么他将获得所有额外的好处和更多的改进功能。无论怎样，这对你和你的用户来说都是双赢。

PWA基础

那么 PWA 到底是由什么组成的呢？我们一直在讨论它们的功能和原理，但真正使某个网站成为 PWA 的到底是什么呢？最简单的 PWA 其实只是普通的网站。普通网站是由 Web 开发者所熟悉和喜欢的技术所创建的，即 HTML、CSS 和 JavaScript。然而， PWA 却更进一步，它为用户提供了增强的体验。我非常喜欢谷歌 Chrome 团队的开发人员 Alex Russell 的描述方式 ：这些应用不通过应用商店进行打包和部署，它们只是汲取了所需要的原生应用功能的网站而已。

PWA 会指向一个清单（manifest）文件，其中包含网站相关的信息，包括图标、背景屏幕、颜色和默认方向。

PWA 使用了叫作 Service Worker 的重要新功能，它可以令你深入网络请求并构建更好的 Web 体验。当你开始用它，还可以将进一步了解它以及它带给浏览器的改进。PWA 还允许你将其“添加”到设备的主屏幕上。它会像原生应用那样，通过单击图标便可让你轻松访问一个 Web 应用 。

PWA 还可以离线工作。使用 Service Worker，可以选择性地缓存部分网站资源以提供离线体验。如果你现在在没有网络连接的情况下浏览网站，那么对于绝大多数网站，你所看到的屏幕应该类似于下图。




用户无须再面对恐怖的“无网络连接”屏幕了。使用 Service Worker，可以拦截并缓存任何来自网站的网络请求。无论是为移动设备、桌面设备还是平板设备构建网站， 都可以在有网络连接或没有网络连接的情况下控制如何响应请求。

PWA 不仅仅是一组非常棒的新功能，它实际上是构建更好的网站的一种方式。PWA 正在迅速成为一套最佳实践。构建PWA 所采取的步骤将有利于访问你网站的任何人，无论他们选择使用何种设备。

一旦你掌握了开始构建 PWA 所需的基本构建模块，很快就会发现，比较高级的例子并没有看上去那么高级。一旦你熟悉了构建 PWA 的过程，会发现一切都是如此的简单。

构建PWA的业务场景

作为一名开发者，我当然知道当一项新技术或一系列功能出现时，是多么令人兴奋。但为网站发掘并引进最新最好的库或框架的强烈欲望往往会掩盖其为企业带来的价值。无论你是否相信，PWA 能为你的用户带来真正的价值，并使网站更具吸引力、更有弹性，甚至更快。

PWA 最棒的一点是可以渐进增强现有的 Web 应用。我们讨论的整套技术可以应用于任何现有的网站，甚至是你正在构建的新 Web 应用。无论你选择何种技术栈来开发网站，PWA 都将与你的解决方案紧密结合，因为它只是简单地基于 HTML、CSS 和 JavaScript 。

既然你对 PWA 已经有了基本的了解，就先暂时停下脚步，想象一下用 PWA 来构建的各种可能性。假设你的在线业务是报纸，人们通过它来了解更多当地的新闻。如果你知道有人经常访问你的网站并浏览多个页面，为什么不提前缓存这些页面，这样他们就可以完全离线地浏览新闻？或者假设你的 Web 应用服务于一个慈善机构，志愿者在这个网络连接不稳定或压根无网络连接的区域进行工作。PWA 的功能将允许你构建一个离线应用，使他们在没有网络连接的现场也能收集信息。一旦他们回到办公室或有网络连接的区域，数据就可以同步到服务器。对于 Web 开发者来说，PWA 是颠覆者，并且我个人对它将带给 Web 的功能感到兴奋不已。

前文提到过可以将 PWA 添加到设备的主屏幕上。一旦添加后，它的图标便会出现在主屏幕上并可以通过单击图标来访问你的网站。

2015 年，印度最大的电商网站 Flipkart 开始构建 Flipkart Lite，它是 Web 和Flipkart 原生应用完美结合的 PWA 。如果你在浏览器中打开 http://flipkart.com，你会明白为什么这个网站是如此成功。它的用户体验令人印象深刻，网站的速度很快，可以离线工作，并且用起来使人愉悦。通过将它的网站构建成 PWA，Flipkart 能够显示ADD TO HOME SCREEN 操作栏。通过 ADD TO HOME SCREEN 图标到达的用户最终在网站上购买的可能性高达 70％。




任何进入苹果或谷歌应用商店的新原生应用就像沙滩上的一粒沙。截至 2016年 6 月，每个应用商店中始终保持将近 200 万个应用。如果你开发了一个原生应用，那么它很容易就被应用商店中的海量应用所掩盖。然而，由于 PWA 是汲取了丰富功能的网站，因此可以通过搜索引擎轻松发现它们。人们可以通过社交媒体链接或浏览网页发现 PWA。构建 PWA 可以让你接触比单独使用原生应用更多的人，因为它们是为任何能够运行浏览器的平台而构建的。

我在一家小型创业公司工作，我知道编写一个可以在多个平台 (iOS、Android和网站 ) 上运行的应用是多么昂贵。有了 PWA，你只需要一个了解 Web 语言的开发团队即可。它使得招聘更容易，而且肯定便宜得多。这并不是说你不应该构建原生应用，因为不同的用户会有不同的需求，但只要你想，你就可以专注于为网络上的用户营造一个相当好的体验并使他们留下来。

当使用为 Web 构建的应用时，用户可以轻松访问你网站服务的一部分，而无须先下载庞大的安装文件。使用正确的缓存技术的 PWA 可以保存用户数据并立即为用户提供功能。随着世界各地越来越多的用户开始上网，不断为 10 亿规模的新用户构建网站变得格外重要。PWA 通过构建快速、精简的 Web 应用来帮助你实现此目标。

如果你看过一些关于软件开发的文章，一定见过围绕原生应用与 Web 应用的争论。哪个更好？各自的优势与劣势是什么？原生应用本身是非常好的，但事实上 PWA 不仅仅是将原生应用的功能引入 Web 。它解决了企业面临的真正问题，旨在为用户创造一个名副其实的可发现、快速和有吸引力的体验。

---

本文选自《PWA实战：面向下一代的Progressive Web APP》。

本书降生之前，就得到Facebook、阿里旗下UC团队、新浪旗下微博团队及百度团队的积极响应，或参与技术审校，或勤力作序推荐，可见PWA在国内已成气候、方兴未艾。前端世界紧锣密鼓，离开一会儿就会错过新角登场。在扩展链接中你可以了解到本书更详细的信息。

------------

更多科技资讯请见微信公众号：博文视点Broadview（微信号：bvbooks）