【PWA学习与实践】(1) 2018，开始你的PWA学习之旅

《PWA学习与实践》系列文章已整理至gitbook - PWA学习手册，文字内容已同步至learning-pwa-ebook。转载请注明做者与出处。css

PWA做为今年最火热的技术概念之一，对提高Web应用的安全、性能和体验有着很大的意义，很是值得咱们去了解与学习。html

本系列文章《PWA学习与实践》会逐步拆解PWA背后的各项技术，经过实例代码来说解这些技术的应用方式。也正是由于PWA中技术点众多、知识细碎，所以我在学习过程当中，进行了整理，并产出了《PWA学习与实践》系列文章，但愿能带你们全面了解PWA中的各项技术。对PWA感兴趣的朋友欢迎关注。前端

首先简单了解一下PWA。node

1. 什么是PWA

PWA，即Progressive Web App, 是提高 Web App 的体验的一种新方法，能给用户原生应用的体验。git

咱们须要理解的是，PWA不是某一项技术，或者某一个新的产物；而是一系列Web技术与标准的集合与应用。经过应用这些新的技术与标准，能够从安全、性能和体验三个方面，优化咱们的Web App。因此，其实PWA本质上依然是一个Web App。github

所以，学习PWA其实就是了解与掌握这些PWA背后的技术。本系列文章会针对PWA中所涉及到的技术进行介绍，并配合代码实例来展现各种技术的使用方式。但愿经过这一系列文章，让你们对PWA技术有一个更深刻的认识。而PWA自己渐进式的思想也可让咱们在业务中“渐进式”地使用这些技术，在成本可控的前提下，不断优化咱们的产品。chrome

2. PWA中的一些技术

PWA自己实际上是一个概念集合，它不是指某一项技术，而是经过一系列的Web技术与Web标准来优化Web App的安全、性能和体验。其中涉及到的一些技术概念包括了：npm

Web App Manifest
Service Worker
Cache API 缓存
Push&Notification 推送与通知
Background Sync 后台同步
响应式设计
……

这些技术都是你在学习PWA中不可或缺的。而随着apple在iOS Safari中也开始支持PWA（其中的某些技术），PWA的舞台更大了。缓存

3. 项目DEMO

为了配合PWA中相关知识的学习，我专门建立了一个demo Web App——安全

一个根据关键字查询图书信息的demo（github.com/alienzhou/l…

这个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来让你的Web App“更Native”，拥有一个App Shell。想了解PWA更多的后续知识，关注《PWA学习与实践》系列文章。

话很少说，下面就让咱们来具体地学习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离线工具集workbox中学习各种离线策略（写做中…）