service workers
因为 js 是单线程的,如果有前端部分数据大量渲染和计算的情况下,会导致页面渲染非常慢,会遭到阻塞。因为 js 是会阻塞页面渲染的。有没有办法,用 service workers 在背后进行大规模的运算。比如 webgl 这样的 3d 渲染,但是 3d 存在一个很大的问题,就是 3d 模型, 3d 数据非常大。一个数据就好几M, 这种情况下就可以用 service workers,用 workers 进行渲染再进入主线程。
Service Worker是一个脚本,浏览器独立于当前网页,将其在后台运行,为实现一些不依赖页面或者用户交互的特性打开了一扇大门。在未来这些特性将包括推送信息,背景后台同步,geofencing(地址围栏定位),但它将推出的第一个首要特性,就是拦截和处理网络请求的能力,包括以编程方式来管理被缓存的相应。就是离线应用。
Service Worker 两点应用
1、使用拦截和处理网络请求的能力,去实现一个
离线应用
2、使用 Service Worker
在后台运行同时能和页面通信的能力,去实现大规模后台数据的处理
PWA
Progressive Web Apps 是一种 Web App 新模型,并不是具体指某一种前沿的技术或者某一个单一的知识点,我们用英文缩写来看就能看出,这是一个渐进式的 Web App,是通过一系列新的 Web 特性,配合优秀的 UI 交互设计,逐步的增强 Web App 的用户体验。
所谓渐进式就是手机在弱网的情况下,页面能不能加载出来。如果你的手机在离线的情况下,你的 app 能不能加载出来。
pwa 现在大概有3点的方向
1、可靠:在没有网络的环境中也能提供基本的页面访问,而不会出现‘未连接到互联网’的页面。之前这是 web app 逊色于安卓的
2、快速:针对网页渲染及网络数据访问有较好优化。比如安卓app在过度页面的时候有个好的渲染,web app 也支持
3、融入,应用可以被增加到手机桌面,并且和普通应用一样有全屏,推送等特性。这也是相较于原生 app 提出来的。
1、离线应用,service worker 只能在 https 下使用
serviceWorker.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./main.css"> </head> <body> <div class="container">service worker</div> <script src="./app.js"></script> </body> </html>
main.css
.container{ color: red; }
app.js
// 注册 serviceWorker if (navigator.serviceWorker) { navigator.serviceWorker.register('./service-worker.js', { scope: './' // 作用域 }).then(function (reg) { console.log(reg); }).catch(function (e) { console.log(e); }) } else { alert('Service Worker is not supported') }
service-worker.js
// 监听 serviceWorker install 事件 self.addEventListener('install', function(e) { // 会接受一个 promise 对象,返回成功后才会进行后续的运行 e.waitUntil( // caches 就是开启一个 cacheStorage caches.open('app-v1').then(function(cache){ console.log('open cache'); return cache.addAll([ './app.js', './main.css', './serviceWorker.html' ]) }) ) }) self.addEventListener('fetch', function(event) { // 读缓存 event.respondWith( caches.match(event.request).then(function(res) { if (res) { return res; } else { // 通过 fetch 方法向网络发起请求 fetch(url).then(function() { if (res) { // 对于新请求到资源存储到我们的 cachestorage中 } else { // 用户提示 } }) } }) ) })