Progressive Web App
1,Google 梦寐以求而又一直在发力的一件事 -- Web 应用移动化;
2,想要浏览器切入到移动端是相当困难的一件事,因为浏览器的运行性能是低于本地 App 的,并且 Google 也没有类似微信或者 Facebook 这种体量的用户群体
渐进式
1,让普通站点逐步过渡到 Web 应用
2,技术层面会一点点演进,比如逐渐提供更好的设备特性支持
PWA 主要采用了哪些技术手段来缩短它和本地应用或者小程序的距离
1,Service Worker
解决离线存储和消息推送的问题
2,manifest.json
解决一级入口的问题(将 Web 应用安装到桌面,在需要的时候直接从桌面打开 Web 应用,而不是每次都需要通过浏览器来打开)

Service Worker 的设计思路
1. 架构
①. JavaScript 和页面渲染流水线的任务都是在页面主线程上执行的,如果一段 JavaScript 执行时间过久,那么就会阻塞主线程
②. 为了避免 JavaScript 过多占用页面主线程时长的情况,浏览器实现了 Web Worker 的功能。Web Worker 的目的是让 JavaScript 能够运行在页面主线程之外,不过由于 Web Worker 中是没有当前页面的 DOM 环境的,所以在 Web Worker 中只能执行一些和 DOM 无关的 JavaScript 脚本,并通过 postMessage 方法将执行的结果返回给主线程。所以说在 Chrome 中, Web Worker 其实就是在渲染进程中开启的一个新线程,它的生命周期是和页面关联的。
③. 让其运行在主线程之外”就是 Service Worker 来自 Web Worker 的一个核心思想
④. Service Worker 需要为多个页面提供服务,所以Service Worker运行在浏览器进程中的,因为浏览器进程生命周期是最长的
2. 消息推送
消息推送也是基于 Service Worker 来实现的
3. 安全
必须要使用 HTTPS,Service Worker 还需要同时支持 Web 页面默认的安全策略、储入同源策略、内容安全策略(CSP)等
网友评论