本文将会大体介绍PWA系列技术,但是并不会深入全面到各个细节, 更为深入的内容可以参看 https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
PWA是什么
- 渐进式web引用
- progressive web app , 是提升用户体验的一种方法,让web能够给用户原生应用的体验
- 不是指一项技术,而是引用一系列的新技术进行改进web
- PWA能用现代的web api 以及传统的渐进式增强策略来创建跨平台的web应用程序
- 任何的web app都可以用pwa来实现渐进增强
PWA的优势
- 使用与所有浏览器,因为还是旨在渐进式挣钱开发
- 能够结束service worker 实现离线访问或网络较差的情况下的正常访问
- 可将网站添加到手机主屏幕上,实现类似原生app的效果,获得原生体验,拥有首屏加载动画可以隐藏地址栏等沉浸式体验
- 可以实现消息推送,点击通知可直接打开网站,增加用户粘度
PWA核心技术包括:(一系列web技术)
- web app mainfest
- service worker
- promise / async / await: 异步
- fetch api: 前端请求,ajax、axios或者Promise的fetch
- Cache storage
- 常见的缓存策略: 确定哪些资源需要走缓存,那些资源需要走网络
- notification: 用来做通知的,在网页下面也可以实现消息通知
接下来我们将一一介绍PWA所涉及的一系列核心技术
web app mainfest
- 一个程序清单的JSON文件(即项目中引入的manifest.json), 实现在移动端可以将网站像app一样添加到主屏幕上
- 可以提供有关引用程序的信息(如名称,作者,图标和描述等)
- 作用:
(1)可以添加到桌面,有唯一的图标
(2)又启动时的动画,避免生硬过渡
(3)隐藏浏览器相关的UI,比如地址栏和菜单栏等 - 使用步骤:
(1)项目下创建manifest.json
(2)创建index.html, 并引入manifest.json
(3)在manifest.json中提供常见配置
(4)需要在https协议或者http://localhost下访问才可以
(5)用http-server或者anywhere启动测试 - manifest.json 常见配置如下:
{
// 应用的名称, 用户安装横幅提示的名字,和启动画面中的文字
"name": "HackerWeb",
// 应用的短名字, 用于主屏幕显示
"short_name": "HackerWeb",
// 指定用户从设备启动应用程序时加载的URL, 可以是相对路径或者绝对路径
"start_url": ".",
// fullscreen 全屏显示, 无状态栏
// standalone 看起来像一个独立应用,拥有独立图标和窗口, 可以包含其他UI元素,如状态栏
// minimal-ui 看起来像独立应用程序,但是会有浏览器地址栏
// browser 在传统的浏览器标签或新窗口打开
"display": "standalone",
// 用户指定启动时的过度背景颜色#fff / red
"background_color": "#fff",
// 指定应用程序的主题颜色, 应用顶部那一块的颜色
"theme_color": "#ff0000",
// 定义应用程序上下文的导航范围
// 限制了manifest可以查看的网页范围,如果用户在范围之外浏览应用程序,这返回到正常网页
"scope": "/myapp/",
// 提供有关Web应用程序的一般描述
"description": "A simply readable Hacker News app.",
// 应用程序的图标,规格有: 48x48, 72x72, 96x96, 144x144, 168x168, 192x192
"icons": [{
"src": "imgs/favicon.png",
"sizes": "64x64",
"type": "image/png"
}],
// 定义所有Web应用程序顶级的默认方向, 有如下值:
// any,natural, landscape,landscape-primary,
// landscape-secondary, portrait,portrait-primary, portrait-secondary
"orientation": "portrait-primary",
// 代表可由底层平台安装或可访问的本机应用程序
"related_applications": [{
// Google Play Store 可以找到应用程序的平台。
"platform": "play",
// 可以找到应用程序的URL。
"url": "https://play.google.com/store/apps/details?id=com.example.app1",
// 用于表示指定平台上的应用程序的ID。
"id": "com.example.app1"
}, {
"platform": "itunes", // itunes
"url": "https://itunes.apple.com/app/example-app1/id123456789"
}]
}
效果如下:
service worker
-
pwa的核心技术,可以让网页在离线或者网速比较慢的情况下依然可以访问
-
是一个独立的worker线程,独立于当前网页进程,是一种特殊的 web worker
-
优化网页性能的一个有效方法。除去,cdn , css sprite, 文件合并压缩,缓存,异步加载, 图片懒加载预加载,code spliting等
-
特点:
- 浏览器的js是运行在单线程上的,在同一时间内只能处理一件事
- web worker 是脱离主线程之外的,所以可以将一些比较耗时的任务交给web worker 做,完成之后通过postMessage方法告诉主线程
- web worker 是一个独立的运行环境,不能操作DOM和BOM,全局环境变量为self
- web worker 和service worker 都必须在http://localhost或者https服务器环境下才能生效
-
如何使用:
- 创建web worker, var worker = new Worker(“work.js”)
- 在web work中进行复杂的计算
- web work计算结束时,通过self.postMessage(msg)给主线程发消息
- 主线程通过worker.onmessage=function () {}监听消息