PWA 作为今年最火热的技术概念之一, 对提升 web 应用的安全, 性能和体验有着很大的意义, 非常值得我们去了解与学习.
本系列文章PWA 技术学习与实践会逐步拆解 PWA 背后的各项技术, 通过实例代码来讲解这些技术的应用方式. 也正是因为 PWA 中技术点众多, 知识细碎, 因此我在学习过程中, 进行了整理, 并产出了PWA 技术学习与实践系列文章, 希望能带大家全面了解 PWA 中的各项技术. 对 PWA 感兴趣的朋友欢迎关注.
首先简单了解一下 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( https://github.com/alienzhou/learning-pwa ).
这个 Web App 最开始是不具备任何 PWA 的能力. 我会在这一系列文章中以这个 demo 为例, 阐述各项技术的同时, 将其应用在 demo 上. 也就是说, 在这一系列的文章中, 我会和大家一起将一个普通的网页应用逐步升级为一个简单的 PWA, 通过这种方式一起学习.
首先简单介绍一下这个 demo. 这是一个根据关键词搜索图书信息的应用, 用户在前端输入关键词, 点击搜索, 会请求我们自己的服务器, 而服务器使用豆瓣图书 API V2 https://developers.douban.com/wiki/?title=book_v2 来获取数据.
图书搜索 demo
项目使用 KOA http://koajs.com/ 来搭建 node 服务器, 所以需要 node 版本 > 7.6.0, 可以使用 https://github.com/creationix/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 目录中, 具体结构如下:
值得一提的是, 后续文章内的代码会以分支的形式存在, 每篇文章的最终代码会存放于一个对应的分支中. 你可以通过方便得切换分支, 来查看每篇文章对应的示例代码.
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 验证失败问题
第五篇: 与你的用户保持联系: 消息 Push 功能 (写作中...)
来源: http://www.jianshu.com/p/916a01670a23