认识PWA

原文

　　简书原文：https://www.jianshu.com/p/f38f21ed45dc

大纲

　　前言
　　1、什么是PWA
　　2、PWA 应该具备的特点
　　3、PWA基础
　　4、构建 PWA 的业务场景
　　5、PWA的核心技术
　　6、应用外壳架构

前言

　　接下去几篇博客是我对PWA的的认识和理解，目前PWA的流行程度还不是很高，所以能找到的资源也是有限，我对PWA的了解主要是通过这本书《PWA-Book-CN》以及一些大牛的博客。我的文章比较适合一些对这些还不是很清楚的读者做个初步介绍用的，如果要精深还是需要去自己研读这本书并且自身投入实践当中才是。

1、什么是PWA

　　PWA全称渐进式网络应用 ( Progressive Web Apps )
　　渐进式网络应用程序(Progressive Web Application - PWA)，是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的网络技术来实现的。
　　作为Web开发者，这是我们传统构建网站方式的一种转变。这意味着我们可以开始构建可以应对不断变化的网络条件或无网络连接的网站。这还意味着我们可以建立更吸引人的网站来为我们的用户提供一流的浏览体验。

2、PWA 应该具备的特点

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

3、PWA基础

　　那么 PWA 到底是由什么组成的呢？我们一直将它们作为一组功能和原理来讨论，但真正使某个网站成为 “PWA” 的到底是什么呢？最最简单的 PWA 其实只是普通的网站。它们是由我们这些 Web 开发者所熟悉和喜欢的技术所创建的，即 HTML、CSS 和 JavaScript 。然而， PWA 却更进一步，它为用户提供了增强的体验。我非常喜欢 Google Chrome 团队的开发人员 Alex Russell 的描述方式：“这些应用没有通过应用商店进行打包和部署，它们只是汲取了所需要的原生功能的网站而已。”
　　PWA 会指向一个清单 (manifest) 文件，其中包含网站相关的信息，包括图标，背景屏幕，颜色和默认方向。
　　PWA 使用了叫做 Service Workers 的重要新功能，它可以令你深入网络请求并构建更好的 Web 体验。
　　PWA 还允许你将其“添加”到设备的主屏幕上。它会像原生应用那样，通过点击图标便可让你轻松访问一个 Web 应用。
　　PWA 还可以离线工作。使用 Service Workers，你可以选择性地缓存部分网站以提供离线体验。
　　有了 Service Workers，我们的用户无需再面对恐怖的“无网络连接”屏幕了。使用 Service Workers，你可以拦截并缓存任何来自你网站的网络请求。无论你是为移动设备，桌面设备还是平板设备构建网站， 都可以在有网络连接或没有网络连接的情况下控制如何响应请求。
　　简而言之，PWA 不仅仅是一组非常棒的新功能，它们实际上是我们构建更好的网站的一种方式。PWA 正在迅速成为一套最佳实践。构建 PWA 所采取的步骤将有利于访问你网站的任何人，无论他们选择使用何种设备。

4、构建 PWA 的业务场景

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

5、PWA的核心技术

　　Web App Manifest – 在主屏幕添加app图标，定义手机标题栏颜色之类
　　Service Worker – 缓存，离线开发，以及地理位置信息处理等
　　App Shell – 先显示APP的主结构，再填充主数据，更快显示更好体验
　　Push Notification – 消息推送

6、应用外壳架构

　　当今有很多非常棒的原生应用。就个人而言，我觉得 Facebook 的原生应用为用户提供了非常棒的体验。当你离线时它会给你提示，它会缓存你的时间轴，以便你能更快地访问，它还能做到瞬间加载。如果你有一段时间没有访问 Facebook 的原生应用，你仍会在任何动态内容加载之前，立即看到一个空的“UI 外壳”，包括头部和导航条。
　　借助 Service Workers 的力量，我们没有任何理由不为 Web 上的用户提供同样的体验。使用智能的 Service Worker 缓存，你实际上可以缓存你网站的 UI 外壳，以便用户重复访问。这些新功能使我们能够以不同的方式来思考和构建网站。