search

shuangmianxiaoQ / study-note

日常学习或工作笔记
6 stars 1 forks source link

PWA 入门 #18

Open shuangmianxiaoQ opened 5 years ago

shuangmianxiaoQ commented 5 years ago

PWA 关键技术

Web APP Manifest

通过一个清单文件向浏览器暴露web应用的元数据，包括名字、icon和url等，例如create--react-app的manifest.json文件：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

这个清单的成员还有很多，就像是PWA的户口本，承载着web应用与操作系统集成能力的重任。

Service Worker

  1. 特性

    • 可编程的Web Worker
    • 像一个位于浏览器与网络之间的客户端代理，可以拦截、处理、相应流经的HTTP请求
    • 配合Cache Storage API，可以自由管理HTTP请求文件粒度的缓存

  2. 生命周期 Service Worker Lifecyle

  3. 缓存策略 Cache and Network Race (Fastest)

  4. Push Notification

    • Push API的出现让推送服务具备了向web应用推送消息的能力
    • Push API不依赖web应用与浏览器是否激活，所以即使在web应用与浏览器未打开时，也可以通过后台进程接受推送消息并调用Notification API向用户发出通知