引言

在前段时间吧,云游君的一个小项目让我初次知道了有PWA这种东西,今天逛提莫博客发现mix-space也支持,并且发现微博也支持。它可以将网页缓存到手机本地,并在桌面创建快捷方式,使其离线状态也能使用。

云游君的项目弹出PWA提示 提莫的博客弹出PWA提示 微博移动端页面弹出PWA提示

之前为什么没发现呢,因为我一般用的夸克,很少用小米浏览器看页面,夸克貌似不支持(?)。


一、何为PWA?

我觉得有必要科普一下awa。它是网络用语,是指用来卖萌的表情。字母a看起来像是睁大的眼睛星星眼,w看作嘴巴,这就是一个撒娇可爱的表情。和今天我们讲的PWA毫无关联,嗯……那我说个P…

PWA 全称为 Progressive Web App,中文译为渐进式 Web APP。

其目的是通过各种 Web 技术实现与原生 App 相近的用户体验。也就是说,只要你使用浏览器,就可以实现免除下载或者是快速下载就能直接使用软件。比如微博、淘宝等。

PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018 年迎来重大突破,全球顶级的浏览器厂商,Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。

也就是说,使用软件时,并不需要再花时间去应用商店下载客户端,也就不会占用手机的内存容量,只需要一点网络流量就可以让你快速方便的使用到原本软件里的功能。而 PWA 所占用的存储容量可能才区区的几M而已。与微信里的「小程序」,小米的“快应用”,和苹果的“轻应用”虽然原理不同,但使用方式上基本类似。

其实呢PWA就是通过网页技术,把网页端的内容做了打包处理,然后封装成适合手机来使用的应用程序,但主要数据的传输大多数都是通过网络来实时的获取和计算,所以也就不再需要大容量的客户端了。现在不仅是在安卓或是苹果的手机上,同时也包括了电脑上都是可以使用 PWA。

在手机上只需要用浏览器打开对应的网址,然后选择在桌面添加“书签”就完成了。之后要启用程序只需要点击桌面的图标就可以了。而在电脑会多了一个安装的过程,但安装很非常快,因为它只是是仅仅创那家一个特殊的类似快捷方式的图标而已。也只是会调用非常小的存储容量。并且卸载起来也异常方便,不存在会有卸载不干净的情况。

目前,在Windows 10 上的 Edge 浏览器,iOS 11.3,MacOS 10.13以后的系统,以及 android 系统上都可以使用。也就是说只要是:Chrome、FireFox、Edge、Safari(iOS)的,或者是其它基于谷歌浏览器内核的也支持。并且其它内核的浏览器也都在开发中。这样就算对于一些配置并不高的机型也可以较为流畅的运行程序,也就不会因为总是需要升级应用版本和系统版本而苦恼。

其它的好处还包括没有乱七糟的权限,运行运存小等等。关键是还可以像原生软件一样的推送消息通知功能。要知道,原本在用网页浏览器访问很多时候是无法接受到推送消息的。

PWA在之前一段时间内还是比较火的,像什么推特、饿了么、哔哩哔哩、豆瓣、飞猪、百度天气等等都支持。而且越来越多的其它软件也都纷纷在跟进。

有人曾说过这样一句话:

老旧的手机千万不要扔掉,拿来安装上 “PWA” 可以继续发光发热。

可以说,PWA不是某一项技术,或者某一个新的产物;而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准,可以从安全、性能和体验三个方面,优化我们的Web App。所以,其实PWA本质上依然是一个Web App。

PWA包含的技术:

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

二、添加PWA支持

由于暂时不是我的刚需,小米手机浏览器将网页添加到桌面(快捷方式)也能起到差不多的效果,所以以后我再折腾吧。

想给hexo博客添加PWA的小伙伴可以参考以下博文:


参考内容: