PWA

Progressive Web APP 渐进式Web应用：用于实现离线加载能力、离线使用能力、消息推送能力的一套技术方案

APP化：图标添加到主屏，全屏运行

应用缓存：Application cache，由于编程能力差、无法清理缓存、没有路由机制，将被废弃

缓存控制：service worker + cache storage

本地存储：local storage、session storage

本地数据库：Web SQL、IndexedDB

服务器端推送：SSE、web socket

客户端推送：Web Notification

Servcie worker + Cache storage

self

主窗口中，self == window = parent

iframe中，self == window != parent

在web worker 和 service worker中，没有window，全局对象是 self

主线程中注册service worker脚本：navigator.serviceWorker.register('./serviceWorker.js');

service worker线程生命周期：installing -> installed -> activating -> activated

service worker脚本中监听事件

//service worker被安装，这时添加缓存cache.open(cacheName) -> cache.addAll(fileNames)

slef.addEventListener("install", function) 

// 当前页面的service work被激活，这时可以删除以往的缓存caches.delete(cacheName)

slef.addEventListener("activate", function)

// 请求文件，这时可以直接返回已经缓存的文件event.responseWith() -> caches.match(event.request)

slef.addEventListener("fetch", function)

Web Notification

Notification.requestPermission()   // 向用户请求允许

Notification.permission               // 用户允许状态

new Notification(title, options)  // 推送消息

Notification.close()                    // 关闭消息