美文网首页
浏览器 -- 渐进式网页应用(PWA)

浏览器 -- 渐进式网页应用(PWA)

作者: _路明非_ | 来源:发表于2019-12-04 21:59 被阅读0次

    Progressive Web App
    1,Google 梦寐以求而又一直在发力的一件事 -- Web 应用移动化;
    2,想要浏览器切入到移动端是相当困难的一件事,因为浏览器的运行性能是低于本地 App 的,并且 Google 也没有类似微信或者 Facebook 这种体量的用户群体

    渐进式
1,让普通站点逐步过渡到 Web 应用
2,技术层面会一点点演进,比如逐渐提供更好的设备特性支持

    PWA 主要采用了哪些技术手段来缩短它和本地应用或者小程序的距离
    1,Service Worker
解决离线存储和消息推送的问题
    2,manifest.json
解决一级入口的问题(将 Web 应用安装到桌面,在需要的时候直接从桌面打开 Web 应用,而不是每次都需要通过浏览器来打开)

Service Worker 结构示意图

    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)等

相关文章

网友评论

      本文标题:浏览器 -- 渐进式网页应用(PWA)

      本文链接:https://www.haomeiwen.com/subject/kahrgctx.html