使用 PWA 制作专属导航页

电子书支援计划

一个以数字资源为核心的自我学习社群

在寻找优质内容和资源的道路上，我们从未妥协

在互联网的原始时代，一个优质的导航页就可以撑起一家互联网企业，比如雅虎、hao123。随着搜索技术的发展，这些产品类型逐渐被 Google、百度这样的搜索引擎取代，再发展到现在的互联网入口被一个个巨型 App 垄断，甚至于衍生出类似于微信小程序这样的入口，即 App 的操作系统化，还有诸如入口的语音化、硬件化，这大概可以写另外一篇长文了。这其中就衍生出了一种技术路径：PWA ，我们来聊聊这个。

什么是 PWA

PWA 的全称是 Progressive Web App ，翻译过来就是 渐进式增强的网页应用 。渐进式增强是 PWA 的开发宗旨，它的好处之一就是让 PWA 能够兼容所有的浏览器。
利用 Web 的技术给移动端的设备提供 App 的体验，这是 PWA 的目的。因此，PWA 经过 Google Chrome 团队的开发在可靠性、响应速度、用户体验三方面，升级了原来 Web App 的体验。所以，PWA 应用有以下的优点：
* 离线或者网络环境较差的情况下也能工作
* 响应的加载速度和原生应用没有区别
* 界面布局和原生应用相一致
* 拥有后台运行和推送通知的能力
* ......

如何使用 PWA 应用

iOS11.3 让 Safari 支持了 PWA ,我们以 iOS 系统为例，只需要把 PWA 应用添加到主屏幕，接着，在屏幕上点击 PWA 应用就能打开体验了。
添加到主屏幕的具体操作是这样的：
1. 在 Safari 里前往（已经支持 PWA ）的网站；
2. 手动点击分享图标，再点击添加到主屏幕，最后点击确定即。

要知道，PWA 应用运行在 Safari 这个浏览器中，必定需要网址链接，可是不是所有的网站都支持了 PWA 应用，而且 iOS 上又没有 Android 那样的邀请用户安装 PWA 的提示，所以你想要使用到 PWA 应用，得先前往收集有这些 PWA 应用网址链接的网站查找，比如： https://pwa-directory.appspot.com/

使用 PWA 制作导航页

先看完成品吧～

iPhone 上的效果：

Mac 上的效果：

电子书支援计划导航页链接🔗

http://t.cn/RmCXEu9