《PWA学习与实践》系列文章已整理成gitbook-PWA学习手册，正文内容已同步至learning-pwa-ebook。转载请注明作者和出处。PWA作为今年最热门的技术概念之一，对于提高Web应用的安全性、性能和体验具有重要意义，非常值得我们去了解和学习。本系列文章《PWA学习与实践》将逐步拆解PWA背后的各种技术，并通过实例代码讲解这些技术的应用。也正是因为PWA中的技术点和知识点比较多，所以在学习的过程中进行了整理，制作了系列文章《PWA学习与实践》，希望能够让大家全面了解PWA中的各种技术。欢迎对PWA感兴趣的朋友关注。首先简单了解一下PWA。1、什么是PWAPWA，即ProgressiveWebApp，是一种提升WebApp体验的新方法，可以给用户带来原生应用的体验。我们需要明白的是，PWA并不是某种技术，也不是一种新产品；它是一系列Web技术和标准的集合和应用。通过应用这些新技术和标准，我们可以从安全、性能和体验三个方面优化我们的WebApp。所以，其实PWA本质上还是一个WebApp。因此，学习PWA其实就是去了解和掌握这些PWA背后的技术。本系列文章将介绍PWA涉及的技术，并通过代码示例展示如何使用各种技术。希望通过本系列文章，让大家对PWA技术有更深入的了解。PWA本身的渐进式思维，也让我们可以在业务中“渐进”地使用这些技术，在成本可控的前提下，不断优化我们的产品。2、PWA中的一些技术PWA本身其实就是一个概念的集合。它不是指某一种技术，而是通过一系列的Web技术和Web标准来优化WebApps的安全性、性能和体验。涉及到的一些技术概念包括：WebAppManifestServiceWorkerCacheAPICachePush&Notification推送通知BackgroundSync后台同步的响应式设计……这些技术是你学习PWA不可或缺的。而随着苹果也开始在iOSSafari中支持PWA（部分技术），PWA的舞台就更大了。3.ProjectDEMO为了配合PWA相关知识的学习，我特地制作了一个demoWebApp——一个基于关键词查询图书信息的demo（https://github.com/alienzhou/...）。这个WebApp一开始并没有任何PWA能力。在本系列文章中，我将以这个demo为例，对各种技术进行讲解，并将其应用到demo中。也就是说，在本系列文章中，我会和大家一起逐步将一个普通的Web应用升级为一个简单的PWA，并以此方式共同学习。首先简单介绍一下这个demo。这是一个基于关键词搜索图书信息的应用。用户在前端输入关键词，点击搜索，会请求我们自己的服务器，服务器使用豆瓣图书APIV2获取数据。项目使用Koa搭建node服务器，所以需要node版本>7.6.0，可以使用nvm切换到合适的node版本。运行项目，首先gitclonegit@github.com:alienzhou/learning-pwa.git#切换到基础项目分支gitcheckoutbasic注意需要切换到基础分支，master分支是最新的demo代码PWA升级后。只有在basic分支才能看到原来的WebApp。接下来安装依赖：npminstall最后运行项目：npmrunstart然后就可以在127.0.0.1:8085访问项目了。基础demo的代码比较简单，这里不再赘述demo中的代码细节。简单了解一下项目结构，前端代码存放在public目录下，具体结构如下：|---public---|---index.html//前端页面||---index.js//浏览器JavaScript脚本||---style.css//样式文件||---img//图片文件夹|---app.js//节点服务启动入口|---util.js//节点服务工具值得一提的是，后续文章中的代码会以如下形式存在分支，每篇文章的最终代码都会存放在对应的分支中。您可以方便地切换分支查看每篇文章对应的示例代码。basic分支：基础项目demo，一个普通的图书搜索应用（网站）；manifest分支：在基础分支的基础上，增加manifest等功能；sw-cache分支：在manifest分支的基础上，增加了缓存和离线功能；master分支：最新的应用代码。...作为本系列的第一篇文章，本文简要介绍PWA及其相关技术概念。通过学习PWA，我们可以快速的将其中优秀的技术应用到我们的工作中。在下一篇文章中，我会介绍如何使用manifest让你的WebApp“更原生”，拥有AppShell。想了解更多关于PWA的后续知识，关注专栏《精益前端》。话不多说，下面就来详细了解一下PWA相关技术吧！
