PWA-渐进式 Web 应用

前言

在之前秋招的时候, 被面试官问过相关知识, 但是由于当时面试、学校毕业等原因没有系统地学习, 关于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主要支持数据的缓存与读取.