前言
在之前秋招的时候, 被面试官问过相关知识, 但是由于当时面试、学校毕业等原因没有系统地学习, 关于PWA的博客也就耽搁到了现在.
什么是PWA?
PWA(Progressive web apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势.
PWA技术其实是存在着兼容性问题, 如果浏览器不支持PWA技术,那么对原有应用不会产生影响,对于支持该项技术的浏览器,他会在原有基础上新增它的特性,让用户得到更好的体验。目前在Vue、React脚手架中已经集成了该项技术,一旦你拥有一个web app项目,那么你的PWA之旅就已经开始了。PWA的优势在于
1、提升体验(应用可添加桌面、打开应用时像原生应用)
2、离线缓存
3、后台通知
对于现在的前端开发或者所有开发而言, 网络是一个必备的条件. 一旦用户缺少网络这一必备条件, 就会让用户无法访问任何应用, 这在一定程度是会丢失用户的. 像淘宝、京东这类电商App, 一旦丢失用户就是Money上的丢失, 所以像这类App目前已经是支持了PWA技术的. PWA的主要优势点还是在于离线可访问, 但很可惜, 我特意去看过一些知名的网站(掘金、知乎等), 好像支持PWA技术的并不多(这也由于国内生态的原因, 如安卓机与IOS带来的一些问题). 但是从前端开发的角度, 学习这一部分的知识是必不可少的, 因为离线访问技术又可能在未来会成为一种趋势, 提前学习和了解才能更好成长.
离线缓存
在讲述离线缓存之前, 需要知道一点就是PWA必须运行在https或者localhost的环境下. 离线缓存主要包括2点:
1、数据缓存
2、缓存读取
Manifest.json
首先需要配置应用缓存的相关信息, 其实也就是个json配置文件manifest.json, 具体配置信息如下:
{
"name": "hello world",//应用名称
"short_name": "hello",//短名称,用于在桌面显示
"start_url": ".",//入口url
"display": "standalone",//应用的展现模式,一般来说这个模式体验最优
"background_color": "#fff",//应用的主题颜色,一般会改变你的上方菜单栏背景颜色
"description": "A simply hello world app.",//应用描述
"icons": [
{
//在不同环境下展现的应用图标
"src": "images/touch/homescreen48.png",
"sizes": "144x144",
"type": "image/png"
}
]
}
使用方式, 在html文件运用link标签, 具体如下
<link rel="manifest" href="manifest.json">
关于manifest.json的更多配置信息, 可以MDN文档参考:MDN Web App Manifest
离线缓存
离线缓存包括2部分–service worker、cache storage, 其中service worker主要支持离线访问、cache storage主要支持数据的缓存与读取.