渐进式web应用
webapp用户体验差（不能离线访问），用户粘性低（无法保存入口），pwa（Progressive Web Apps）就是为了解决这一系列问题，让webapp具有快速、安全、可靠等特点

PWA一系列用到的技术

  • Web App Manifest
  • Service Worker
  • Push Api & Notification Api
  • App Shell & App Skeleton
  • …

Web App Manifest

https
将网页添加到桌面，保留入口，类似native app

  1. {
  2.   "name": "xiao的调色板🎨", // 应用名称
  3.   "short_name": "调色板", // 桌面应用名称
  4.   "display": "standalone", // fullScreen(standalone)minimal-ui browser
  5.   "start_url": "", // 打开时的进入的网址
  6.   "icons": [], // 桌面 icon 图标，修改图标需要重新执行添加到桌面操作，icons:[{src, sizes(144x144), type(image/png)}]
  7.   "background_color": "#aaa", // 启动画面颜色
  8.   "theme_color": "#aaa" // 菜单栏颜色
  9. }

Service Worker

开启多线程，缓存页面等实现离线访问

使用 Web Workers

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers

App Skeleton

骨架屏