小鱼儿主页高手论坛service worker是一段脚本,原生

2019-09-29 作者:小鱼儿主页高手论坛   |   浏览(168)

WebGL手艺储备指南

2015/12/22 · HTML5 · 1 评论 · WebGL

初稿出处: Tmall前端共青团和少先队(FED)- 叶斋   

小鱼儿主页高手论坛 1

WebGL 是 HTML 5 草案的一有个别,能够使得 Canvas 渲染三个维度场景。WebGL 就算还未有广泛应用,但极具潜能和想象空间。本文是本身就学 WebGL 时梳理知识系统的产物,花点时间整理出来与大家享受。

Service Worker初体验

2016/01/06 · JavaScript · Service Worker

原稿出处: AlloyTeam   

在2015年,W3C发布了service worker的草案,service worker提供了重重新的技艺,使得web app具有与native app同样的离线体验、音讯推送体验。
service worker是一段脚本,与web worker同样,也是在后台运维。作为二个独门的线程,运营碰着与普通脚本差异,所以不可能直接参加web交互行为。native app能够成功离线使用、新闻推送、后台自动更新,service worker的产出是万幸为了使得web app也足以具有类似的才具。

 

service worker可以:

  1. 后台音信传递
  2. 网络代理,转载呼吁,伪造响应
  3. 离线缓存
  4. 音讯推送
  5.  … …

本文以能源缓存为例,表达一(Wissu)下service worker是什么样行事的。

DOM成分querySelectorAll只怕让你想不到的特性表现

2015/11/07 · HTML5 · DOM, querySelectorAll

原稿出处: 张鑫旭   

Service Worker入门

2015/03/26 · JavaScript · Service Worker

初稿出处: Matt Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App具有Web应用日常所不具备的富离线体验,定期的沉默更新,新闻文告推送等功能。而新的Serviceworkers标准让在Web App上具备这么些效应成为大概。

示例

WebGL 很酷,有以下 demos 为证:

搜寻奥兹国
赛车游戏
泛舟的男孩(Goo Engine Demo)

生命周期

先来看一下多个service worker的运营周期

小鱼儿主页高手论坛 2
上图是service worker生命周期,出处

图中能够看出,贰个service worker要经历以下进程:

  1.  安装

2.  激活,激活成功之后,展开chrome://inspect/#service-workers能够查阅到如今运营的service worker

小鱼儿主页高手论坛 3

  1. 监听fetch和message事件,上面三种事件博览会开简要描述

  2. 销毁,是不是销毁由浏览器决定,假如一个service worker长期不应用照旧机器内部存款和储蓄器有数,则只怕会销毁这几个worker

一、时间当务之急,废话少说

正文所在的页面藏匿了上面那么些代码:

<img id="outside"> <div id="my-id"> <img id="inside"> <div class="lonely"></div> <div class="outer"> <div class="inner"></div> </div> </div>

1
2
3
4
5
6
7
8
<img id="outside">
<div id="my-id">
    <img id="inside">
    <div class="lonely"></div>
    <div class="outer">
        <div class="inner"></div>
    </div>
</div>

正是上面那样的变现(为了方便观察,笔者加了边框背景象和文字):

小鱼儿主页高手论坛 4

首先说点我们都知道的热热身。

  • querySelectorquerySelectorAll IE8 浏览器扶助。
  • querySelector归来的是单个DOM成分;querySelectorAll回去的是NodeList.
  • 大家日常用的多的是document.querySelectorAll, 实际上,也支持dom.querySelectorAll.例如:
JavaScript

document.querySelector("#my-id").querySelectorAll("img")

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f2fbc48034065158916-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f2fbc48034065158916-1" class="crayon-line">
document.querySelector(&quot;#my-id&quot;).querySelectorAll(&quot;img&quot;)
</div>
</div></td>
</tr>
</tbody>
</table>

采纳的正是内部这么些妹子。比方,笔者在调控台出口该选拔NodeList的尺寸和id,如下截图:
小鱼儿主页高手论坛 5

好了,上边都以生硬的,好,下边开头展现点有趣的。

大家看下上边2行轻易的查询语句:

JavaScript

document.querySelectorAll("#my-id div div");

1
document.querySelectorAll("#my-id div div");

JavaScript

document.querySelector("#my-id").querySelectorAll("div div");

1
document.querySelector("#my-id").querySelectorAll("div div");

小鱼儿主页高手论坛 6

提问:下边七个语句重回的NodeList的剧情是或不是是同样的?

给我们1分钟的时刻考虑下。

//zxx: 若是1分钟已经过去了

好了,答案是:区别等的。预计不菲人跟自个儿同样,会认为是大同小异的。

实际上:

JavaScript

document.querySelectorAll("#my-id div div").length === 1;

1
document.querySelectorAll("#my-id div div").length === 1;

JavaScript

document.querySelector("#my-id").querySelectorAll("div div").length === 3;

1
document.querySelector("#my-id").querySelectorAll("div div").length === 3;

大家只要有问号,能够在调整台测验下,下图便是本人要好测量检验的结果:

小鱼儿主页高手论坛 7

何以会那样?

率先个符合大家的明亮,不解释。这下三个言辞,为什么重返的NodeList长度是3呢?

首先,遍历该NodeList会发觉,查询的多少个dom成分为:div.lonelydiv.outerdiv.inner.

想不到,古怪,怎会是3个吗?

jQuery中有个find()措施,大家十分大概遭到这一个主意影响,导致出现了一部分体味的难题:

JavaScript

$("#my-id").find("div div").length === 1;

1
$("#my-id").find("div div").length === 1;

设若应用find方法,则是1个门户极其;由于组织和职能类似,大家很当然疑问原生的querySelectorAll也是这一个套路。真是太错特错!!

要解释,为何NodeList长度是3,只要一句话就足以了,小编非常加粗标红:

CSS选择器是独立于一切页面包车型大巴!

何以看头呢?譬如说你在页面很深的三个DOM里面写上:

<style> div div { } </style>

1
2
3
<style>
div div { }
</style>

 

方方面面网页,富含父级,只即便满足div div老爹和儿子关系的要素,全体会被入选,对啊,那一个大家应该都知道的。

这里的querySelectorAll当中的选拔器也同样是这也全局天性。document.querySelector("#my-id").querySelectorAll("div div")翻译成白话文就是:查询#my-id的子成分,同期满足万事页面下div div选用器条件的DOM成分们。

作者们页面往上滚动看看原始的HTML结构,会意识,在全局视线下,div.lonelydiv.outerdiv.inner全部都满意div div那个接纳器条件,于是,最终回到的尺寸为3.

Service Worker 是什么?

五个 service worker 是一段运维在浏览器后台进度里的本子,它独立于当下页面,提供了这几个无需与web页面交互的效能在网页背后悄悄实行的力量。在以往,基于它能够达成新闻推送,静默更新以及地理围栏等劳务,可是当前它首先要负有的职能是阻挠和拍卖网络央求,饱含可编制程序的响应缓存管理。

缘何说这一个API是一个好厉害的API呢?因为它使得开拓者能够支撑相当好的离线体验,它赋予开荒者完全调整离线数据的力量。

在service worker提议以前,别的三个提供开辟者离线体验的API叫做App Cache。然则App Cache某些局限性,比方它能够很轻易地缓慢解决单页应用的难题,可是在多页应用上会很麻烦,而Serviceworkers的出现正是为了消除App Cache的痛点。

下面详细说一下service worker有怎么着需求当心的地方:

  • 它是JavaScript Worker,所以它无法平昔操作DOM。可是service worker能够透过postMessage与页面之间通讯,把消息公告给页面,假若要求的话,让页面自身去操作DOM。
  • Serviceworker是三个可编制程序的网络代理,允许开辟者调节页面上管理的互联网伏乞。
  • 在不被利用的时候,它会友善终止,而当它再也被用到的时候,会被重复激活,所以你无法依赖于service worker的onfecth和onmessage的管理函数中的全局状态。假若您想要保存一些悠久化的新闻,你能够在service worker里使用IndexedDB API。
  • Serviceworker大批量使用promise,所以一旦你不打听怎么着是promise,那您需求先读书这篇文章。

正文的指标

本文的料想读者是:不纯熟图形学,熟稔前端,希望掌握或体系学习 WebGL 的同校。

正文不是 WebGL 的概述性小说,亦不是完好详细的 WebGL 教程。本文只期望成为一篇供 WebGL 初学者使用的纲领。

fetch事件

在页面发起http央求时,service worker能够由此fetch事件拦截诉求,而且付诸本身的响应。
w3c提供了贰个新的fetch api,用于代替XMLHttpRequest,与XMLHttpRequest最大不一致有两点:

1. fetch()方法再次来到的是Promise对象,通过then方法进行再三再四调用,降低嵌套。ES6的Promise在成为专门的学业今后,会愈发便利开辟职员。

2. 提供了Request、Response对象,假诺做过后端开垦,对Request、Response应该相比较熟练。前端要发起呼吁能够因而url发起,也足以使用Request对象发起,而且Request能够复用。但是Response用在何地呢?在service worker现身以前,前端确实不会友善给协和发新闻,可是有了service worker,就足以在阻碍央求之后据说须要发回自个儿的响应,对页面来讲,这一个日常的呼吁结果并从未分别,那是Response的一处采取。

上面是在中,笔者利用fetch api通过fliker的公然api获取图片的例子,注释中详尽表达了每一步的效用:

JavaScript

/* 由于是get央浼,直接把参数作为query string传递了 */ var URL = ''; function fetch德姆o() { // fetch(url, option)扶助四个参数,option中能够设置header、body、method音讯fetch(U凯雷德L).then(function(response) { // 通过promise 对象得到相应内容,况兼将响应内容依照json格式转成对象,json()方法调用之后回来的依旧是promise对象 // 也足以把内容转化成arraybuffer、blob对象 return response.json(); }).then(function(json) { // 渲染页面 insertPhotos(json); }); } fetch德姆o();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 由于是get请求,直接把参数作为query string传递了 */
var URL = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=your_api_key&format=json&nojsoncallback=1&tags=penguins';
 
function fetchDemo() {
  // fetch(url, option)支持两个参数,option中可以设置header、body、method信息
  fetch(URL).then(function(response) {
    // 通过promise 对象获得相应内容,并且将响应内容按照json格式转成对象,json()方法调用之后返回的依然是promise对象
    // 也可以把内容转化成arraybuffer、blob对象
    return response.json();
  }).then(function(json) {
    // 渲染页面
    insertPhotos(json);
  });
}
 
fetchDemo();

fetch api与XMLHttpRequest比较,特别简明,並且提供的法力更健全,能源获取格局比ajax更优雅。包容性方面:chrome 42开端支持,对于旧浏览器,能够通过法定维护的polyfill支持。

二、:scope与区域接纳范围

其实,要想querySelectorAll末端采取器不受全局影响,也可能有措施的,便是行使近些日子还居于试验阶段的:scope伪类,其功用便是让CSS是在某一范围Nelly用。此伪类在CSS中动用是大洋,不过也得以在querySelectorAll语句中应用:

JavaScript

document.querySelector("#my-id").querySelectorAll(":scope div div");

1
document.querySelector("#my-id").querySelectorAll(":scope div div");

包容性如下:

小鱼儿主页高手论坛 8

自个儿写此文时候是15年一月底,这几天基本上就FireFox浏览器帮助,小编估量,今后,会支撑更扩大的。为啥呢?

因为Web Components须求它,能够达成真正独立包装,不会受外部影响的HTML组件。

关于:scope现阶段帮助尚浅,时机未到,作者就没供给乱展开了,点到竣事。

Service Worker的生命周期

Service worker具有一个完全独立于Web页面包车型地铁生命周期。

要让三个service worker在您的网站上生效,你需求先在你的网页中登记它。注册八个service worker之后,浏览器会在后台默默运维贰个service worker的安装进度。

在设置进度中,浏览器会加载并缓存一些静态财富。纵然持有的公文被缓存成功,service worker就安装成功了。如果有别的文件加载或缓存失利,那么安装进程就能够倒闭,service worker就不可能被激活(也即未能安装成功)。借使发生如此的难点,别忧虑,它会在下一次再品尝安装。

当安装到位后,service worker的下一步是激活,在这一等第,你仍是能够升官二个service worker的本子,具体内容大家会在前面讲到。

在激活之后,service worker将接管全体在自个儿管辖域范围内的页面,不过假如三个页面是刚刚注册了service worker,那么它这二回不会被接管,到下二次加载页面包车型地铁时候,service worker才会生效。

当service worker接管了页面之后,它大概有三种情景:要么被终止以节约内部存款和储蓄器,要么会管理fetch和message事件,这七个事件分别发出于一个互联网诉求现身依然页面上发送了三个音信。

下图是贰个简化了的service worker初次安装的生命周期:

小鱼儿主页高手论坛 9

Canvas

熟习 Canvas 的同学都领悟,Canvas 绘图先要获取绘图上下文:

JavaScript

var context = canvas.getContext('2d');

1
var context = canvas.getContext('2d');

context上调用各样函数绘制图形,比方:

JavaScript

// 绘制左上角为(0,0),右下角为(50, 50)的矩形 context.fillRect(0, 0, 50, 50);

1
2
// 绘制左上角为(0,0),右下角为(50, 50)的矩形
context.fillRect(0, 0, 50, 50);

WebGL 同样要求得到绘图上下文:

JavaScript

var gl = canvas.getContext('webgl'); // 或 experimental-webgl

1
var gl = canvas.getContext('webgl'); // 或 experimental-webgl

然则接下去,要是想画三个矩形的话,就没这么轻松了。实际上,Canvas 是浏览器封装好的二个制图意况,在实际开展绘图操作时,浏览器依然须要调用 OpenGL API。而 WebGL API 差没有多少正是 OpenGL API 未经封装,直接套了一层壳。

Canvas 的越多学问,能够参照:

  • JS 权威指南的 21.4 节或 JS 高端程序设计中的 15 章
  • W3CSchool
  • 阮一峰的 Canvas 教程

message事件

页面和serviceWorker之间能够因而posetMessage()方法发送音讯,发送的音讯可以通过message事件接收到。

那是三个双向的历程,页面能够发音信给service worker,service worker也得以发送新闻给页面,由于那特本性,能够将service worker作为中间纽带,使得二个域名依然子域名下的八个页面能够随心所欲通讯。

这里是多少个小的页面之间通讯demo

三、结语依旧要的

参照作品:querySelectorAll from an element probably doesn’t do what you think it does

感谢阅读,迎接纠错,款待调换!

1 赞 1 收藏 评论

小鱼儿主页高手论坛 10

在大家初叶写码此前

从这个类型地址拿到chaches polyfill。

这个polyfill支持CacheStorate.match,Cache.add和Cache.addAll,而现在Chrome M40实现的Cache API还未有援救那一个点子。

将dist/serviceworker-cache-polyfill.js放到你的网址中,在service worker中通过importScripts加载进来。被service worker加载的台本文件会被电动缓存。

JavaScript

importScripts('serviceworker-cache-polyfill.js');

1
importScripts('serviceworker-cache-polyfill.js');

需要HTTPS

在开辟阶段,你可以经过localhost使用service worker,但是要是上线,就需求你的server扶助HTTPS。

您能够由此service worker威逼连接,伪造和过滤响应,特别逆天。尽管你能够约束自个儿不干坏事,也许有人想干坏事。所以为了避防别人使坏,你不得不在HTTPS的网页上注册service workers,那样大家才可以幸免加载service worker的时候不被歹徒篡改。(因为service worker权限不小,所以要桑土策画它本人被渣男篡改利用——译者注)

Github Pages正要是HTTPS的,所以它是叁个名特别减价的本来的面目实验田。

若果您想要让您的server帮衬HTTPS,你必要为你的server获得二个TLS证书。不相同的server安装方法差异,阅读辅助文书档案并经过Mozilla’s SSL config generator刺探最棒施行。

矩阵转换

三维模型,从文件中读出来,到绘制在 Canvas 中,经历了反复坐标转变。

万一有贰个最简便易行的模型:三角形,多个终端分别为(-1,-1,0),(1,-1,0),(0,1,0)。那多少个数据是从文件中读出来的,是三角形最开头的坐标(局地坐标)。如下图所示,左边手坐标系。

小鱼儿主页高手论坛 11

模型经常不会放在场景的原点,假若三角形的原点位于(0,0,-1)处,未有转动或缩放,三个极点分别为(-1,-1,-1),(1,-1,-1),(0,1,-1),即世界坐标。

小鱼儿主页高手论坛 12

绘图三个维度场景必须内定二个观看者,就算观看者位于(0,0,1)处何况看向三角形,那么三个极端相对于观看者的坐标为(-1,-1,-2),(1,-1,-2),(0,1,-2),即视图坐标。

小鱼儿主页高手论坛 13

观望者的眼眸是贰个点(这是看破投影的前提),水平视角和垂直视角都以90度,视线范围(目力所及)为[0,2]在Z轴上,观望者能够见到的区域是五个四棱台体。

小鱼儿主页高手论坛 14

将四棱台体映射为正式立方(CCV,宗旨为原点,边长为2,边与坐标轴平行)。顶点在 CCV 中的坐标,离它提起底在 Canvas 中的坐标已经很接近了,倘使把 CCV 的前表面看成 Canvas,那么最后三角形就画在图中青蓝三角形的岗位。

小鱼儿主页高手论坛 15

上述调换是用矩阵来开展的。

局地坐标 –(模型调换)-> 世界坐标 –(视图转换)-> 视图坐标 –(投影调换)–> CCV 坐标。

以(0,1,0)为例,它的齐次向量为(0,0,1,1),上述调换的代表经过能够是:

小鱼儿主页高手论坛 16

地点八个矩阵依次是看破投影矩阵,视图矩阵,模型矩阵。八个矩阵的值分别决计于:观望者的观念和视界距离,观察者在世界中的状态(地点和样子),模型在世界中的状态(地方和可行性)。计算的结果是(0,1,1,2),化成齐次坐标是(0,0.5,0.5,1),正是以此点在CCV中的坐标,那么(0,0.5)正是在Canvas中的坐标(感觉Canvas 中央为原点,长宽都为2)。

上边出现的(0,0,1,1)是(0,0,1)的齐次向量。齐次向量(x,y,z,w)能够表示三个维度向量(x,y,z)加入矩阵运算,通俗地说,w 分量为 1 时表示地方,w 分量为 0 时表示位移。

WebGL 未有提供其余关于上述转变的建制,开垦者须要亲自总结顶点的 CCV 坐标。

有关坐标转换的更加的多内容,能够参谋:

  • 管理器图形学中的5-7章
  • 改变矩阵@维基百科
  • 透视投影详解

相比较复杂的是模型转变中的绕任性轴旋转(平日用四元数生成矩阵)和投影调换(上边的事例都没收涉及到)。

至于绕大肆轴旋转和四元数,能够参见:

  • 四元数@维基百科
  • 贰个鬼子对四元数公式的求证

关于齐次向量的更加多内容,能够参照。

  • 管理器图形学的5.2节
  • 齐次坐标@维基百科

动用service workder缓存文件

下边介绍三个选择service worker缓存离线文件的事例
安不忘虞index.js,用于注册service-worker

JavaScript

if (navigator.serviceWorker) { navigator.serviceWorker.register('service-worker.js').then(function(registration) { console.log('service worker 注册成功'); }).catch(function (err) { console.log('servcie worker 注册失利') }); }

1
2
3
4
5
6
7
if (navigator.serviceWorker) {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
        console.log('service worker 注册成功');
    }).catch(function (err) {
        console.log('servcie worker 注册失败')
    });
}

在上述代码中,注册了service-worker.js作为当前路径下的service worker。由于service worker的权杖非常高,全体的代码都需即使安全可相信的,所以唯有https站点才得以应用service worker,当然localhost是多个特例。
注册截至,以往开端写service-worker.js代码。
依据前边的生命周期图,在三个新的service worker被注册之后,首先会触发install事件,在service-workder.js中,能够透过监听install事件打开一些起初化职业,只怕哪些也不做。
因为大家是要缓存离线文件,所以能够在install事件中初露缓存,不过只是将文件加到caches缓存中,真正想让浏览器采取缓存文件必要在fetch事件中梗阻

JavaScript

var cacheFiles = [ 'about.js', 'blog.js' ]; self.addEventListener('install', function (evt) { evt.waitUntil( caches.open('my-test-cahce-v1').then(function (cache) { return cache.addAll(cacheFiles); }) ); });

1
2
3
4
5
6
7
8
9
10
11
var cacheFiles = [
    'about.js',
    'blog.js'
];
self.addEventListener('install', function (evt) {
    evt.waitUntil(
        caches.open('my-test-cahce-v1').then(function (cache) {
            return cache.addAll(cacheFiles);
        })
    );
});

第一定义了亟待缓存的公文数组cacheFile,然后在install事件中,缓存那一个文件。
evt是二个Install伊夫nt对象,承袭自Extendable伊芙nt,个中的waitUntil()方法接收四个promise对象,直到这几个promise对象成功resolve之后,才会三番两次运营service-worker.js。
caches是一个CacheStorage对象,使用open()方法展开三个缓存,缓存通过名称进行区分。
得到cache实例之后,调用addAll()方法缓存文件。

那般就将文件增添到caches缓存中了,想让浏览器选拔缓存,还必要拦截fetch事件

JavaScript

// 缓存图片 self.addEventListener('fetch', function (evt) { evt.respondWith( caches.match(evt.request).then(function(response) { if (response) { return response; } var request = evt.request.clone(); return fetch(request).then(function (response) { if (!response && response.status !== 200 && !response.headers.get('Content-type').match(/image/)) { return response; } var responseClone = response.clone(); caches.open('my-test-cache-v1').then(function (cache) { cache.put(evt.request, responseClone); }); return response; }); }) ) });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 缓存图片
self.addEventListener('fetch', function (evt) {
    evt.respondWith(
        caches.match(evt.request).then(function(response) {
            if (response) {
                return response;
            }
            var request = evt.request.clone();
            return fetch(request).then(function (response) {
                if (!response && response.status !== 200 && !response.headers.get('Content-type').match(/image/)) {
                    return response;
                }
                var responseClone = response.clone();
                caches.open('my-test-cache-v1').then(function (cache) {
                    cache.put(evt.request, responseClone);
                });
                return response;
            });
        })
    )
});

经过监听fetch事件,service worker能够回来本身的响应。

率先检缓存中是还是不是曾经缓存了那几个央浼,假如有,就径直回到响应,就收缩了三次网络诉求。不然由service workder发起恳求,那时的service workder起到了壹在那之中等代理的意义。

service worker需要的历程通过fetch api完结,获得response对象现在进行过滤,查看是不是是图片文件,假如不是,就径直回到供给,不会缓存。

假使是图表,要先复制一份response,原因是request恐怕response对象属于stream,只好使用一回,之后一份存入缓存,另一份发送给页面。
那便是service worker的有力之处:拦截哀告,伪造响应。fetch api在那边也起到了一点都不小的法力。

 

service worker的换代不会细小略,只要service-worker.js的文件内容有更新,就能够采纳新的台本。可是有有些要留神:旧缓存文件的铲除、新文件的缓存要在activate事件中进行,因为可能旧的页面还在选用在此以前的缓存文件,清除之后会失掉成效。

 

在初次使用service worker的进度中,也碰到了某些主题材料,上边是中间七个

使用Service Worker

今日我们有了polyfill,而且消除了HTTPS,让大家看见到底怎么用service worker。

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:小鱼儿主页高手论坛service worker是一段脚本,原生

关键词: 小鱼儿玄机30码