2018，开始你的PWA学习之旅

PWA学习系列技术文章汇总至此处 --> 戳我，或者直接查看下�?�列表

• 第一篇：2018，开始你的PWA学习之旅（本文）
• 第二篇：10分钟学会使用Manifest，让你的WebApp更“Native�?
• 第三篇：从今天开始，让你的WebApp离线�?�用
• 第四篇：TroubleShooting: 解决FireBase login验�?失败问题
• 第五篇：与你的用户�?�?�?�系: Web Push功能
• 第六篇：How to Debug? 在chrome中调试你的PWA
• 第七篇：增强交互：使用Notification API�?�进行�??醒
• 第八篇：使用Service Worker进行�?��?�数�?��?�步
• 第�?篇：PWA实践中的问题与解决方案
• 第�??篇：Resource Hint - �??�?�页�?�加载性能与体验

PWA作为今年最�?�热的技术概念之一，对�??�?�Web应用的安全�?性能和体验有�?�很大的�?义，�?�常值得我们去了解与学习。

首先简�?�了解一下PWA。

什么是PWA

PWA，�?�Progressive Web App, 是�??�?� Web App 的体验的一�?新方法，能给用户原生应用的体验。

我们需�?�?�解的是，PWA�?是�?一项技术，或者�?一个新的产物；而是一系列Web技术与标准的集�?�与应用。通过应用这些新的技术与标准，�?�以从安全�?性能和体验三个方�?�，优化我们的Web App。所以，其实PWA本质上�?然是一个Web App。

因此，学习PWA其实就是了解与掌�?�这些PWA背�?�的技术。本系列文章会针对PWA中所涉�?�到的技术进行介�?，并�?�?�代�?实例�?�展示�?�类技术的使用方�?。希望通过这一系列文章，让大家对PWA技术有一个更深入的认识。而PWA本身�?进�?的�?想也�?�以让我们在业务中“�?进�?�?地使用这些技术，在�?本�?�控的�?�??下，�?断优化我们的产�?。

PWA中的一些技术

PWA本身其实是一个概念集�?�，它�?是指�?一项技术，而是通过一系列的Web技术与Web标准�?�优化Web App的安全�?性能和体验。其中涉�?�到的一些技术概念包括了：

• Web App Manifest
• Service Worker
• Cache API 缓存
• Push&Notification 推�?与通知
• Background Sync �?��?��?�步
• �?应�?设计
• ……

这些技术都是你在学习PWA中�?�?�或缺的。而�?�?�apple在iOS Safari中也开始支�?PWA（其中的�?些技术），PWA的舞�?�更大了。

项目DEMO

为了�?�?�PWA中相关知识的学习，我专门创建了一个demo Web App——

一个根�?�关键字查询图书信�?�的demo。

这个Web App最开始是�?具备任何PWA的能力。我会在这一系列文章中以这个demo为例，�?述�?�项技术的�?�时，将其应用在demo上。也就是说，在这一系列的文章中，我会和大家一起将一个普通的网页应用�?步�?�级为一个简�?�的PWA，通过这�?方�?一起学习。

首先简�?�介�?一下这个demo。这是一个根�?�关键�?�?�索图书信�?�的应用，用户在�?端输入关键�?，点击�?�索，会请求我们自己的�?务器，而�?务器使用豆瓣图书API V2�?�获�?�数�?�。

项目使用KOA�?��?�建node�?务器，所以需�?node版本>7.6.0，�?�以使用nvm�?�切�?�到适�?�的node版本。

�?�?行该项目，首先

git clone git@github.com:alienzhou/learning-pwa.git
# 切�?�到基础项目分支
git checkout basic

注�?，需�?切�?�到basic分支，master分支是上�?过PWA�?�级�?�最新的demo代�?。�?�有在basic分支�?能看到原始的Web App。接下�?�，安装�?赖：

npm install

最�?�，�?行项目：

npm run start

然�?�就�?�以在127.0.0.1:8085上访问到该项目。

基础demo的代�?比较简�?�，这里就�?去赘述demo中的代�?细节了。简�?�了解一下项目结构，�?端代�?都存放于public目录中，具体结构如下：

|---public---|---index.html // �?端页�?�
|            |---index.js // browser的JavaScript脚本
|            |---style.css // 样�?文件
|            |---img // 图片文件夹
|---app.js // node�?务�?�动入�?�
|---util.js // node�?务工具库

值得一�??的是，�?�续文章内的代�?会以分支的形�?存在，�?篇文章的最终代�?会存放于一个对应的分支中。你�?�以通过方便得切�?�分支，�?�查看�?篇文章对应的示例代�?。

• basic分支：基础项目demo，一个普通的图书�?�索应用（网站）；
• manifest分支：基于basic分支，添加manifest等功能；
• sw-cache分支：基于manifest分支，添加缓存与离线功能；
• master分支：应用的最新代�?。
• ……

写在最�?�

作为本系列的第一篇文章，本文简�?�介�?了PWA与其相关的技术概念。通过学习PWA，我们�?�以很快将其中的优秀技术应用到我们的工作里。在下一部分（manifest分支），我就会介�?如何使用manifest�?�让你的Web App“更Native�?，拥有一个App Shell。

�?�?多说，下�?�就让我们�?�具体地学习PWA相关技术�?��?