- 综合排序
- 最热优先
- 最新优先
- 来自专栏劝学
ServiceWorker入门
设置成功后就输出这样子: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
61010发布于 2021-01-21 - 来自专栏Android群英传
渐进式Web应用入门-ServiceWorker
if('serviceWorker' in navigator) { //注册上一步创建的js文件 navigator.serviceWorker .register oslab-kymjs-blog'; var filesToCache = []; self.addEventListener('install', function(e) { console.log('[ServiceWorker ] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker self.addEventListener('activate', function(e) { console.log('[ServiceWorker] Activate'); e.waitUntil (function(keyList) { return Promise.all(keyList.map(function(key) { console.log('[ServiceWorker
91730发布于 2018-07-20 - 来自专栏ChenYFanの小窝
- 论如何善用ServiceWorker
此博客使用的SW 接下来我将从头开始讲述ServiceWorker的妙用。 是的，接下来的两张图你应该能显著的看到这一差距： [没有ServiceWorker中继，平淡无奇] [ServiceWorker中继，刺激拉满] 在第一张图中，用户和服务器的关系直的就像电线杆，用户想要什么 剥离层层加成，安装的代码只有一行 navigator.serviceWorker.register('/sw.js') 其中，/sw.js即为ServiceWorker脚本所在，由于安全性，你不能加载跨域的 为了方便判断脚本是否能够加载，我们还要判断navigator里有无sw这一属性'serviceWorker' in navigator。 页面与SW通信 / Build Communication with Page and ServiceWorker 施工中
4.3K21编辑于 2022-01-18 - 来自专栏TopFE
serviceWorker 初尝试, 提升用户体验,改善前后端交互方式
我细细思考了一会,突然灵光乍现,一个词出现在我的脑海里了, serviceWorker serviceWorker简介: Service Worker 是一种 Web Worker。 serviceWorker作用: 1.网络代理，转发请求，伪造响应 2.离线缓存 3.消息推送 4.后台消息传递 Service Worker优势及典型应用场景 1、离线缓存：可以将H5 实现思路: 简单介绍一下serviceWorker之后,让我来说一下实现思路 首先,当用户点击页面的数据库备份按钮时, 这时触发一个 serviceWorker的postMessage 方法,进入 serviceWorker }); } }) } (function() { if ('serviceWorker' ('sw.js'); navigator.serviceWorker.addEventListener('message', function (event) {
91120编辑于 2022-01-24 - 来自专栏前端架构
ServiceWorker工作机制与生命周期：资源缓存与协作通信处理
在 《web messaging与Woker分类：漫谈postMessage跨线程跨页面通信》介绍过ServiceWorker，这里摘抄跟多的内容，补全 Service Worker 理解为一个介于客户端和服务器之间的一个代理服务器 navigator.serviceWorker.register('./sw.js', {scope: '. navigator.serviceWorker.register('. 而在页面的JS文件中，监听 navigator.serviceWorker 的 message 事件即可收到信息。 // index.js navigator.serviceWorker.register('.
2.1K20发布于 2021-07-03 - 来自专栏采云轩
Web Worker
创建 ServiceWorker // index.js if ('serviceWorker' in navigator) { window.addEventListener('load', function ); }); } 只要创建了 ServiceWorker，不管这个创建 ServiceWorker 的 html 是否打开，这个 ServiceWorker 是一直存在的。 安装 ServiceWorker // serviceWorker.js const CACHE_NAME = 'cache-v1'; // 需要缓存的文件 const urlsToCache = [ '/style/main.css', '/constant.js', '/serviceWorker.html', '/page/index.html', '/serviceWorker.js 总结 类型 Worker SharedWorker ServiceWorker 通信方式 postMessage port.postMessage 单向通信，通过addEventListener 监听serviceWorker
1.4K50编辑于 2022-04-27 - 来自专栏柒八九技术收纳盒
Web性能优化之Worker线程(下)
serviceWorker.js // 处理相关逻辑 main.js navigator.serviceWorker.register('. ❞ serviceWorker.js // 处理相关逻辑 main.js // 注册成功，成功回调（解决） navigator.serviceWorker.register('. if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker 该属性会返回激活的 ServiceWorker 实例，即「控制页面的实例」： navigator.serviceWorker .register('. /serviceWorker.js') .then(() => { if (navigator.serviceWorker.controller) { navigator.serviceWorker
3K20编辑于 2022-08-25 - 来自专栏云原生实践
Ant Design Landing
/Home'; import * as serviceWorker from '. /serviceWorker'; ReactDOM.render(<App />, document.getElementById('root')); // If you want your app /serviceWorker' in .. /MyApp\src 的错误 仔细查看后是 serviceWorker.js 没有下载下来，直接将serviceWorker.js复制到src目录下即可 // This optional code is navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being
2.1K11编辑于 2022-03-30 - 来自专栏IMWeb前端团队
PWA之离线缓存（一）
从图中可以看出，用户访问某个URL的时候， 服务器返回相应的资源文件，此时会调用navigator.serviceWorker.register('/teacher/sw.js') ， 下载sw.js serviceWorker会被废弃掉。 当执行完sw文件后，出触发install事件， 此时可以调用cache API去缓存想要的静态资源 。 注意， 如果缓存失败， serviceWorker也将装载失败 。 待serviceWorker装载完成后， 触发activate事件。serviceWorker准备就绪。 ' in navigator) { navigator.serviceWorker.register('/teacher/sw.js').then(function 可以在注册的时候调用update()方法 navigator.serviceWorker.register('/teacher/sw.js').then(function (registration)
2.3K21发布于 2019-12-03 - 来自专栏樯橹代码
pwa-之service worker 离线文件处理
' in navigator) { navigator.serviceWorker.register( 'service-worker.js', { scope : './' } ).then( function(serviceWorker) { document.getElementById('status').innerHTML ' in navigator) { navigator.serviceWorker.register( 'service-worker.js', { scope: './' } ).then( function(serviceWorker) { document.getElementById('status').innerHTML = 'successful'; } : './' } ).then( function(serviceWorker) { document.getElementById('status').innerHTML
76720发布于 2019-09-03 - 来自专栏樯橹代码
pwa-之service worker 基本概念
{ scope: './' } ).then(function(serviceWorker) { document.getElementById('status' 卸载service worker 通过调用unregister()方法卸载service worker serviceWorker.unregister().then(function() { printState(serviceWorker.state); serviceWorker.addEventListener('statechange', function(e) 或者在chrome中输入：chrome://serviceworker-internals/ 如果列表里面没有的话，说明没有service worker正在运行 ? 在chrome://serviceworker-internals/页面中，可以看到每个service worker下面有几个按钮。
1.3K31发布于 2019-09-03 - 来自专栏零域Blog
前端浏览器存储初探
--serviceWorker.html--> <! /serviceWorker.js"></script> </html> // service worker 注册 if (navigator.serviceWorker) { navigator.serviceWorker.register /serviceWorker.js', './main.css', '. /serviceWorker.html']) }) ) }); // 读取缓存 self.addEventListener('fetch', function(e) { console.log /msg-serviceWorker.js', {scope: './'}) .then((reg) => { console.log(reg); })
43420编辑于 2022-03-25 - 来自专栏YuanXin
Service Worker离线缓存实战
因为 serviceWorker 也会浪费资源和网络 IO，不能因为它而影响正常情况下（网络信号 ok 的情况）的使用体验。 拦截作用域 之后，我们需要用 serviceWorker 线程来拦截资源请求，但不是所有的资源都能被拦截，这主要是看 serviceWorker 的作用域：它只管理其路由和子路由下的资源文件。 但对于 ServiceWorker 本身的代码更新，需要别的机制。 可以看到资源都通过 ServiceWorker 缓存加载进来了。 参考链接 本文全部代码地址 Service Worker 生命周期 百度团队：怎么使用 ServiceWorker Web Worker 开发模式
1.9K10发布于 2020-04-20 - 来自专栏random
Service Worker 图片加载失败处理
web worker](http://www.ruanyifeng.com/blog/2018/07/web-worker.html) 使用 1.注册 // 兼容判断 if ("serviceWorker sw.js", {scope: '/'}) .then(function(registration) { // 注册成功 console.log( "ServiceWorker registration.scope ) }) .catch(function(err) { // 注册失败 console.log("ServiceWorker */ self.addEventListener("install", e => { console.log("[ServiceWorker] Installed") // skipWaiting 消息 navigator.serviceWorker.addEventListener('message', function (event) { // 接受数据， console.log
1.7K20发布于 2019-09-11 - 来自专栏逸鹏说道
变种XSS：持久控制
/ServiceWorkersDemos 首先 serviceWorker 只有在 https 页面中才可以调用 regist。 而 serviceWorker 需要 Promise 支撑，目前支持的浏览器如下： ? 支持 serviceWorker 的浏览器： ? firefox 默认关闭 serviceWorker，可以通过 about:config 打开开关： ? 支持 fetch 方法（抓包）的浏览器： ? 开始尝试攻击： 首先在 https 站点中找到一个 Xss，利用 Xss 注册一个 serviceWorker.registration 实例： navigator.serviceWorker.register 可以看到，这时候 serviceWorker 已经成功注册了 刷新页面，此时返回内容以及被修改了： ? 这时候再看正常页面，也被攻击了： ? 首页也是相同的情况： ?
1.5K60发布于 2018-04-10 - 来自专栏前端基础
Web Notification桌面推送消息
title, options) 以上的问题其实都很好解决，MDN 上有很多配置可以去看一下，配置啥，图标呀，图片呀，标题呀，是否强制用户交互呀，等等的操作都在MDN 有介绍，接下来的我觉得才可以看看 ServiceWorker 线程中展现通知 不知道ServiceWorker 的肯定知道PWA吧，其实是一个东西，不过我今天并不讲那个东西，我只是讲一下，如何利用ServiceWorker 和 Notification配合， 当有消息通知来之后，如果当你tab 不在当前页面，就跳转到 消息通知的页面，案例可以去看一下 twitte ServiceWorker 传送门 以下操作默认你已经看完上面的，并且已经配置好了 ServiceWorker focusOrOpenWindow(event); break; default: // NOOP break; } }); 然后接下来 再全局挂载，比如我的是global if ('ServiceWorker ' in window) { navigator.serviceWorker .register('service-worker.js') .then(function(registration
2.2K20发布于 2020-04-30 - 来自专栏为了不折腾而去折腾的那些事
使用传统前端技术增强客户端缓存能力
而这两个能力，都是 ServiceWorker API 实现的。 （添加桌面图标这个需求，我不需要，就不介绍了，感兴趣可以自行搜索） 我在之前的重构文章中有简单聊过访客数据，其中有一部分访客使用的客户端并不支持 ServiceWorker，所以在使用它的时候，需要使用能力探测的方式引入 ，比如： try { ('serviceWorker' in navigator) && navigator.serviceWorker.register('/sw.js'); } catch (error try { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.min.js').then(function ); }).catch(function(err) { console.error('ServiceWorker registration failed: ', err);
93810编辑于 2023-03-05 - 来自专栏鱼头的Web海洋
Service Worker初探
navigator.serviceWorker.register('serviceworker.js', { scope: '/' }) 如何使用 下面我们根据一个简单的示例，看一下Service Worker window.onload = function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register navigator.serviceWorker.controller) { try { navigator.serviceWorker.register('serviceworker.js // serviceworker.jsconst VERSION = self. /serviceworker.js') navigator.serviceWorker.ready.then((registration) => { document.getElementById
1.6K20发布于 2020-09-22 - 来自专栏京程一灯
W3C TPAC 大会上的 Service workers 内容总结[每日前端夜话0xCD]
无论如何，这都是一个愚蠢的主意，因此我们把它删除了(https://github.com/w3c/ServiceWorker/pull/1415)。 GitHub issue (https://github.com/w3c/ServiceWorker/pull/1415). id=201584). self.serviceWorker 在 service worker 中，很难获得对自己的 ServiceWorker 实例的引用。 有关废弃标签的 GitHub issue (https://github.com/w3c/ServiceWorker/issues/626)。 GitHub issue (https://github.com/w3c/ServiceWorker/issues/1475).
1.2K10发布于 2019-10-13 - 来自专栏IMWeb前端团队
WebWorker简介
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 has additional functionality beyond what's available in shared workers, and it has a longer lifespan serviceworker 由于service worker运行于后台，它和当前的Web页面完全独立 由于安全问题，ServiceWorker 只能在 HTTPS 环境下运行, 另外localhost 也OK。
94390发布于 2018-01-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号