带来的效果是显而易见的： 1、当我们缓存了某些资源的时候，当我们再次请求该资源的时候，我们便可以使用缓存的内容，这样的话，就可以减少网络请求了，网站的打开速度明显提升。...scope表示作用的页面的path // register函数返回Promise navigator.serviceWorker.register('/service-worker.js...{scope: '/'} 表示 Service worker 作用的范围。...需要说明的是 service-worker.js 文件被放在这个域的根目录下，这意味着 service worker 是跟网站同源的。...注意：将 service-worker.js 放到域的根目录下哦，这样 Service worker 才能拥有最大的使用范围。
作用域限制 ❝服务工作线程「只能拦截其作用域内」的客户端发送的请求 ❞ 「作用域是相对于获取服务脚本的路径定义的」。如果没有在 register()中指定，则作用域就是服务脚本的路径。...通过「根目录」获取服务脚本对应的「默认根作用域」： wl.js在https://wl.com/作用域内 navigator.serviceWorker .register('/wl.js') ....」获取服务脚本但「指定同一目录」作用域 navigator.serviceWorker .register('/wl.js', {scope: './'}) .then((serviceWorkerRegistration...」获取服务脚本但限定了「目录作用域」 navigator.serviceWorker .register('/wl.js', {scope: '....」获取服务脚本对应的「同一目录作用域」 navigator.serviceWorker .register('/foo/wl.js') .then((serviceWorkerRegistration
（准备替换旧的service woker） 3.确保整个过程中作用域页面由同一个服务工作线程（或者没有服务工作线程）控制。 4.确保每次只运行网站的一个版本。...install 根据我的理解，这个环节只在第一次打开网站时加载，一系列操作保证其原子性（要么可用，要么废弃） Activate service worker被激活，某些请求就会变成 from ServiceWorker...首先，会触发更新的情况如下 1.导航到一个作用域内的页面。 2.更新 push 和 sync 等功能事件，除非在前 24 小时内进行了更新检查。...3.调用 .register()，仅在ServiceWorker网址已发生变化时。 4.在获取更新时遵循（长达 24 小时）服务工作线程脚本上的缓存标头。...替换老的 4.skipWaiting 跳过waiting 5.手动更新 navigator.serviceWorker.register('/sw.js').then(reg => { /
通过service worker，我们可以预先缓存网站的某些资源。 我们作为资源引用的是JavaScript文件，CSS文件，图像和一些字体。...Service workers service worker是浏览器和服务器之间的脚本，主要作用是拦截请求，修改响应，以及一些其他的作用。...register的第二个参数的scope表示此service worker的作用范围是当前域名下面的根目录。 如图显示：注册成功。说明我们的浏览器是支持service worker的。...Fetch 在当前scope作用域下面的请求会触发fetch事件 Terminate 这个事件可能会发生在任何时候，主要后果就是需要浏览器做service worker的内存回收。...但是和页面是处于不同的作用域。这就意味着service worker无法访问网页的dom等其他信息。因此我们也无法通过 DevTools里面同一个tab来调试service worker。
利用 cnpm 下载http-server：npm install http-server -g 进入存放示例代码的文件目录，启动静态服务器：http-server -p 80 最后，准备下 html...因为 serviceWorker 也会浪费资源和网络 IO，不能因为它而影响正常情况下（网络信号 ok 的情况）的使用体验。...拦截作用域 之后，我们需要用 serviceWorker 线程来拦截资源请求，但不是所有的资源都能被拦截，这主要是看 serviceWorker 的作用域：它只管理其路由和子路由下的资源文件。...开发者也可以通过传递scope参数，来指定作用域。 Service Worker 最佳实践 笔者爬了很久的坑，中途看了很多人的博客，包括张鑫旭老师的文章。...但对于 ServiceWorker 本身的代码更新，需要别的机制。
/worker.js'); worker.terminate(); 通信 Worker 的作用域跟主线程中的 Window 是相互独立的，并且 Worker 中是获取不到 DOM 元素的。...这些浏览器环境可以是多个 window, iframes 或者甚至是多个 Worker，只要这些 Workers 处于同一主域。为跨浏览器 tab 共享数据提供了一种解决方案。...当你打开多个窗口的时候，SharedWorker 的作用域是公用的，这也是其特点。 示例： // index.js const worker = new SharedWorker('....); }); } 只要创建了 ServiceWorker，不管这个创建 ServiceWorker 的 html 是否打开，这个 ServiceWorker 是一直存在的。...它会代理范围是根据 scope 决定的，如果没有这个参数，则其代理范围是创建目录同级别以及子目录下所有页面的网络请求。代理的范围可以通过 registration.scope 查看。
使用service worker有几点注意： 页面必须基于https 独立于当前网页进程，不会对主线程造成影响 不能操作DOM,但可以通过postMessage与页面通信 可以拦截作用域范围内的所有请求...从图中可以看出，用户访问某个URL的时候， 服务器返回相应的资源文件，此时会调用navigator.serviceWorker.register('/teacher/sw.js') ， 下载sw.js...serviceWorker会被废弃掉。 当执行完sw文件后，出触发install事件， 此时可以调用cache API去缓存想要的静态资源 。...注意， 如果缓存失败， serviceWorker也将装载失败 。 待serviceWorker装载完成后， 触发activate事件。serviceWorker准备就绪。...sw 是挂载到navigator对象上的， 使用之前先判断是否存在 作用域：SW 的默认作用域为基于当前文件 URL 的 ./， 如果想要改变作用域，可以使用scope eg: navigator.serviceWorker.register
Service Worker的作用域 每个Service Worker都有一个有限的控制范围。...这个范围就是通过放置Service Worker的js文件的目录决定的，也就是Service Worker所在目录以及所有的子目录。...也可以通过注册Service Worker的时候传入一个scope选项，用来覆盖默认的作用域。但是，只能将作用域的范围缩小，不能将它扩大。...register方法的第一个参数是Service Worker的js文件的地址，第二个参数是规定了Service Worker的作用域。...CacheStorage因为Service Worker的作用域问题，只能控制范围内的缓存，无法控制cdn和在其他域下的接口数据。 缓存模式 缓存模式主要探讨了一个关于缓存利用率和更新的权衡问题。
渐进式 Web 应用是一个网站，它使用了某些开发技术，使其体验比普通针对移动优化的网站体验更好。...安全 - 借助于HTTPS，防止窥探，并确保内容没有被篡改 可发现 - 受益于 W3C 清单和 service Worker 注册作用域，搜索引擎可找到它们，可以识别为“应用程序”。...程序清单是一个位于您应用根目录的 JSON 文件。...ServiceWorker 是位于应用程序根目录的一个个的 JavaScript 文件。...使用 Cache Storage 还需要注意以下几点： 它只能缓存 GET 请求； 每个站点只能缓存属于自己域下的请求，同时也能缓存跨域的请求，比如 CDN，不过无法对跨域请求的请求头和内容进行修改 缓存的更新需要自行实现
Web Worker 的作用是允许主线程创建 worker 线程，使它们可以同时运行。Worker 线程主要负责处理复杂的计算任务，然后将结果返回给主线程。...使用 // 注册 Service Worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js...在本例中，可以看到 Service Worker 文件位于域的根目录，这意味着 Service Worker 范围将是这个域下的。...if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register...缺点 对系统功能的访问权限较低 与原生应用相比，PWA 对设备的系统功能访问权限相对较低，某些高级功能可能受到限制。
而 serviceWorker 需要 Promise 支撑，目前支持的浏览器如下： ? 支持 serviceWorker 的浏览器： ?...）： var url = '//victim.com/evil.js' 有人说这太难了，往根目录上传 js 文件不可能，那么可以尝试在子目录/任何一个可能的目录上传js文件， 或者和 Homakov 一样...比如：杀死该JSONP路径以及其子目录的全部接口，从而导致网站无法正常使用。 0x04 中止及防范攻击 1....只要将“清除代码”部署在一个未受感染的同域的页面里，当用户访问过后，自然就清除了。 2....Jsonp所在域不应该存在 XSS（一切类型），至少不应该存在业务页面。 如果做不到2，Jsonp 所在 url 路径下不应该存在网站业务。 域名内不应存在用户可控的 js 文件。
Service Worker 最主要的特点是：在页面中注册并安装成功后，运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。...除了使用本地开发环境调试时(如域名使用 localhost) 运行于浏览器后台，可以控制打开的作用域范围下所有的页面请求 单独的作用域范围，单独的运行环境和执行线程 不能操作页面 DOM。...如果希望改变它的作用域，可在第二个参数设置 scope范围。示例中将其改为了根目录，即对整个站点生效。...另外应意识到这一点：Service Worker 没有页面作用域的概念，作用域范围内的所有页面请求都会被当前激活的 Service Worker 所监控。...可以通过 fetch 事件可以拦截到当前作用域范围内的 http/https 请求，并且给出自己的响应。结合 Fetch API ，可以简单方便地处理请求响应，实现对网络请求的控制。
例如，作为ServiceWorker 生命周期的一部分 ❞ Cache API像 workers 一样，是暴露在 window 作用域下的。...在给定的「作用域」（scope）内，service worker能够为页面执行处理资源的相关工作。 作用域 一个service worker的作用域由其「在 Web 服务器上的位置确定」。...这是因为此页面不在已注册service worker的作用域内。 作用域限制了service worker控制的页面。...除非有很好的理由将service worker的作用域限制为origin的子集，否则应「从 Web 服务器的根目录加载service worker，以便其作用域尽可能广泛」，不必担心Service-Worker-Allowed...service worker在一个作用域内运行。在这里，作用域是整个origin，因为它是从根目录加载的。 当注册开始时，service worker的状态被设置为installing。
在 Service Worker 中我们可以做很多事情，比如拦截客户端的请求、向客户端发送消息、向服务器发起请求等等，其中最重要的作用之一就是离线资源缓存。...如果注册成功，service worker就会被下载到客户端并尝试安装或激活（见下文），这将作用于整个域内用户可访问的URL，或者其特定子集。...JS 文件的目录的 object： Serivce Worker 的配置项，可选填，其中比较重要的是 scope 属性，它是 Service Worker 控制的内容的子目录 Service Worker... console.error("Error during service worker registration:", e) }) }) 前面提到过，由于sw会监听和代理所有的请求，所以sw的作用域就显得额外的重要了...postMessage('this message is from sw.js, to page'); }) 如果在注册 Service Worker 的时候，把 scope 设置为非 origin 目录
基础使用 scope scope作用域，一开始以为是同静态资源的作用域，后来才个发现这个作用域是hmtl的作用域，即只要html页面在这个作用域里，那页面的请求就会被fetch回调捕捉到。...设置成功后就输出这样子:reg success with scope https://domain.com/sw/ navigator.serviceWorker.register('/sw.js',...console.log('reg success with scope', reg.scope) }) .catch(err => { console.log('serviceWorker
2、监听/更改请求或响应 3、使用恶意Flash跨域读取内容 4、升级反射型XSS变成存储型XSS 5、可以一直持续到SW过期 其中hook fetch来劫持请求应该是最常见的利用方式，就像下面的代码...SW的限制一：Scope 在使用navigator.serviceWorker.register()注册脚本时，我们可以在第二个参数中提供一个Scope（范围）。...这是一个类似于同源策略里域的设定，通过这个限制，我们可以将可注册的脚本限制在有限的目录内。...js在同域子目录下生效 还有另一种方式是，如果开启了Service-Worker-Awed头，那就可以通过这个头来设定scope，例如： HTTP/1.1 200 OK content-type:...text/javascript service-worker-allowed: / 值得注意的是，这个域限制现在已经无法通过..%2f或者..%5c来绕过了，当试图navigator.serviceWorker.register
将文件放到项目的根目录下，随后在构建项目服务的时候配置即可，以Tornado为例： server = httpserver.HTTPServer(app,xheaders=True,ssl_options...以本站为例，在站点根目录创建manifest.json文件： { "name": "刘悦的技术博客", "short_name": "刘悦的技术博客", "description..."start_url": "/", "scope": "/" } 由上至下，依次是 PWA 应用的名称、描述、图标文件、banner颜色、显示方式、开始页面的链接和 PWA 的作用域...以本站为例，在站点根目录创建sw.js文件，注意Service Worker文件位置一定得在根目录，如果不在根目录也要通过重写或者url映射让其可以通过根目录路径进行访问，如：https://v3u.cn...，随后使用navigator.serviceWorker.register函数来注册Service Worker。
Worker的作用域 self 和 this 指的都是 Worker 的全局作用域 因此下面两种方式是相同的 self.addEventListener('message', function(e) {...ServiceWorker A Service Worker inherits all the limitations and behaviors available to HTML5 Shared Workers...2015-06-02-service-worker.markdown 我的Demo https://github.com/lumixraku/repo/tree/master/WebWorker/ServiceWorker...ServiceWorker 和 SharedWorker The ServiceWorker is like a SharedWorker in that it: Runs in its own global...由于service worker运行于后台，它和当前的Web页面完全独立 由于安全问题，ServiceWorker 只能在 HTTPS 环境下运行, 另外localhost 也OK。
service workers 的作用范围是针对相对路径的。因此， demo/sw.js 只能相对于 demo 起作用， demo/first/sw.js 相对于 first。... 我们已经引入了下载好的文件，还需要自己在相应的目录创建一下...在这个项目中，我们可以在 app.js 注册一个新的 worker： (function(){ if ('serviceWorker' in navigator) { navigator.serviceWorker...Service Worker 周期 在开始构建 PWA 之前，你需要理解 Service Worker 的生命周期： Install 这一阶段主要是让 worker 在浏览器给定的作用域挂载。.../service-worker.jsself.addEventListener('fetch', function(e) { console.log('[ServiceWorker] Fetch',
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
