serviceWorker

最新推荐文章于 2023-09-06 21:51:38 发布
最新推荐文章于 2023-09-06 21:51:38 发布
阅读量320 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42894622/article/details/106812726
版权 
// html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

// index.js
/**
 * 特性：
 * 1. 没有访问 DOM 的权限
 * 2. Service Worker 只能被使用在 https 或者本地的 localhost 环境下。
 * 3. 以通过 postMessage 接口把数据传递给其他 JS 文件；
 * 4. 完全异步，无法使用XHR和localStorage
 * 5. 可以使用cache storage/indexedDB缓存数据
 * 6. 可以拦截全站请求从而控制你的应用
 * 7. 一旦被 install，就永远存在，除非被 uninstall或者dev模式手动删除
 */

// 1. 注册
// 在同一个 Origin 下，我们可以注册多个 Service Worker。但是请注意，这些 Service Worker 所使用的 scope 必须是不相同的。
if('serviceWorker' in window.navigator){
	window.addEventListener('load',() => {
		// 1.1 注册函数register(path,configuration)接收两个参数
		// 第一个是 service worker 文件的路径，请注意：这个文件路径是相对于 Origin ，而不是当前 JS 文件的目录的；第二个参数是 Serivce Worker 的配置项，可选填，其中比较重要的是 scope 属性。它是 Service Worker 控制的内容的子目录，这个属性所表示的路径不能在 service worker 文件的路径之上，默认是 Serivce Worker 文件所在的目录；
		const sw = navigator.serviceWorker;
		const killSW = window.killSW || false;
		if(!sw){
			console.log('The browser does not support serviceWorker');
			return;
		}
		if(!!killSW){
			sw.getRegistration('./sw.js').then(reg => {
				// 手动注销
				reg.unregister();
				// 清除缓存
				caches &&　caches.keys && caches.keys().then(keys => {
					keys.forEach(key => {
						caches.delete(key);
					});
				});
			});
			return;
		}
		sw.register('./sw.js',{scope:'./'}).then(reg => {
			// 注册成功：
			console.log('success',reg)
			
			// 4. 通讯
			const mesChannel = new MessageChannel();
			// 4.1 从页面到sw
			// 4.1.1/4.4.1 页面发送消息
			sw.controller && sw.controller.postMessage('this message is from page,to sw!',[mesChannel.port2]);
			
			// 4.4 使用message channel通信
			// 4.4.4 使用MessageChannel接收sw发送到页面的消息
			mesChannel.port1.onmessage = e => {
				console.log(e.data);
			}
			
		}).catch(err => {
			// 注册失败
			console.log('Registration for serviceWorker failed!' + err)
		})
		
		// 当我们在注册 Service Worker 时，如果使用的 scope 不是 Origin ，那么navigator.serviceWorker.controller 会为 null。
		// 这种情况下，我们可以使用 reg.active 这个对象下的 postMessage 方法，reg.active 就是被注册后激活 Serivce Worker 实例。
		// 但是，由于 Service Worker 的激活是异步的，因此第一次注册 Service Worker 的时候，Service Worker 不会被立刻激活， reg.active 为 null，系统会报错。我采用的方式是返回一个 Promise ，在 Promise 内部进行轮询，如果 Service Worker 已经被激活，则 resolve 。
		/**
			sw.register('./sw.js',{scope:'./'}).then(reg => {
				// 注册成功：
				console.log('success',reg)
				return new Promise(resolve =>{
					const timer = setInterval(() => {
						if(reg.active){
							clearInterval(timer);
							resolve(reg.active);
						}
					},100)
				})
			}).then(sw => {
				sw.postMessage('this message is from page,to sw!');
			}).catch(err => {
				// 注册失败
				console.log('Registration for serviceWorker failed!' + err)
			});
		 */
		
		// 4.2.1 页面接收从sw发送的消息
		sw.addEventListener('message',e => {
			console.log(e.data);
		});
		
	})
}


// sw.js
// 在默认情况下，Service Worker 必定会每24小时被下载一次，
// 如果下载的文件是最新文件，那么它就会被重新注册和安装，但不会被激活，
// 当不再有页面使用旧的 Service Worker 的时候，它就会被激活。
// 2. 注册之后监听安装事件install
self.addEventListener('install',e => {
	console.log('sevice worker install...');
	
	// 5.1 缓存指定静态资源
	const staticCache = [
		'./index.js',
	];
	// CacheStroage 在浏览器中的接口名是 caches ，
	// 我们使用 caches.open 方法新建或打开一个已存在的缓存；
	// cache.addAll 方法的作用是请求指定链接的资源并把它们存储到之前打开的缓存中。
	// 由于资源的下载、缓存是异步行为，所以我们要使用事件对象提供的 event.waitUntil 方法，它能够保证资源被缓存完成前 Service Worker 不会被安装完成，避免发生错误。
	e.waitUntil(
		caches.open('sw_demo_v1').then(cache => {
			return cache.addAll(staticCache);
		})
	);
})
const cacheNames = ['sw_demo_v2']; // cache storage白名单
// 3. 安装成功后，监听激活事件
self.addEventListener('activate',e => {
	console.log('sevice worker activate...');
	
	// 5.3 清理cache storage
	e.waitUntil(
		caches.keys().then(keys => {
			return Promise.all([
				keys.map(key => {
					if(!cacheNames.includes(key)){
						return caches.delete(key); // 删除不在白名单的cache storage
					}
				})
			]);
		}).then(() =>{
			// 立即接管所有页面
			self.clients.claim();
		})
	);
	
})

// 4.1.2/4.4.2 接收页面发送的消息
self.addEventListener('message',e => {
	console.log(e.data);
	// 4.2 从sw发送消息到页面
	// 4.2.1 sw发送消息
	e.source.postMessage('this message is from sw.js,to page!');
	// 4.4.3 使用MessageChannel，从sw发送消息到页面
	e.ports[0].postMessage('this message is from sw.js,to page!Use messageChannel!');
})

// 4.3 以上的通讯方式sw只能对消息来源的页面发送消息，以下可以不受限制发送消息
self.clients.matchAll().then(clientArr => {
	console.log('sw管理的页面：',clientArr);
	if(clientArr.length){
		// 对页面发送消息
		clientArr[0].postMessage('this message is from sw.js,to client[0]!');
	}
});

// 5. 缓存资源
/**
 * 注意：
 * 1. 当用户第一次访问页面的时候，资源的请求是早于 Service Worker 的安装的，所以静态资源是无法缓存的；只有当 Service Worker 安装完毕，用户第二次访问页面的时候，这些资源才会被缓存起来；
 * 2. Cache Stroage 只能缓存静态资源，所以它只能缓存用户的 GET 请求；post请求的数据可以缓存到indexedDB
 * 3. Cache Stroage 中的缓存不会过期，但是浏览器对它的大小是有限制的，所以需要我们定期进行清理；
 */
// 5.2 动态缓存静态资源:监听fetch事件
// 页面的路径不能大于 Service Worker 的 scope，不然 fetch 事件是无法被触发的。
self.addEventListener('fetch',e => {
	const request = e.request;
		
	// 非GET请求
	if(request.method !== 'GET'){
		e.respondWith(
			// ...
		);
		return;
	}
	// HTML页面请求
	if(request.headers.get('Accept').indexOf('text/html') !== -1){
		e.respondWith(
			// ...
		);
		return;
	}
	// get接口请求
	if(request.headers.get('Accept').indexOf('application/json') !== -1){
		e.respondWith(
			// ...
		);
		return;
	}
	// GET请求 且 非页面请求时 且 非get接口请求（一般请求静态资源）
	// 使用事件对象提供的 respondWith 方法，它可以劫持用户发出的 http 请求
	e.respondWith(
		// 使用用户的请求对 Cache Stroage 进行匹配，如果匹配成功，则返回存储在缓存中的资源；
		caches.match(request).then(res => {
			return res || 
				// 如果匹配失败，则向服务器请求资源返回给用户，并使用 cache.put 方法把这些新的资源存储在缓存中。因为请求和响应流只能被读取一次，所以我们要使用 clone 方法复制一份存储到缓存中，而原版则会被返回给用户
				fetch(request).then(response => {
					const responseCopy = response.clone();
					caches.open('sw_demo_v2').then(cache => {
						cache.put(request,responseCopy);
					});
					return response;
				}).catch(err => {
					console.log(err);
				});
		})
	);
})
八月的猪猪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Service Worker -- 特殊的Web Worker
liuyahui_0126的博客
10-18 3648
在介绍service之前，先引入一下PWA（由Google的Chrome团队创造），技术支持主要是ServiceWorker和Web App Mainfest PWA是一种webapp模型，是一种渐进的web app，利用一些web特性，配合ui使用，增强web app的用户体验。（手机使用Safari 进入 mi.com 将它保存在手机桌面上，点击桌面上相应快捷方式时，不会再显示url）。 ...
ServiceWorker
04-30
firebase console 面板 , Web API key , project ID 用于添加到 web端 的js里 ，不是 sw 环境里； 然后初始化环境，如果使用自己sw.js 生产 messaging.useServiceWorker 添加 serviceWorkerRegistion 参数；...
Service Worker ——这应该是一个挺全面的整理
weixin_33670786的博客
05-27 1552
我在之前有空的时候粗略学习了一下 Service Worker ；最近有空，所以花时间再去学习了下。我在这里整理了下，希望对大家有帮助。 同时，如果文章中有错误或者描述不当的地方，欢迎大家能够帮我指正，谢谢。 PS：文章很长，含有大量示例代码。大家可以慢慢看：） 介绍 作为一个比较新的技术，大家可以把 Service Worker 理解为一个介于客户端和服务器之间的一个代理服务器。在 Servi...
Service Worker初探
chiuwingyan的博客
03-07 587
前言 service worker是PWA(Progressive Web App,是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。)的重要组成部分，W3C 组织早在 2014 年 5 月就提出过 Service Worker 这样的一个 HTML5 API ，主要用来做持久的离线缓存，也是Web Worker的升级版。 科普 Service Worker Service...
service worker
kalinux的博客
11-15 1152
提出场景 一个网页有三个tab页，普通人登录只能访问tab. A，管理人员登录可以访问A，B，而超级管理员可以访问A，B，C。 现在要求做一个提示功能，即所有人如果未登录，会提示未登录；普通人登录并访问B或C，会提示无权限访问B接口、C接口；管理人员登录并访问C，会提示无权限访问C接口； 解决办法 理论上，前端发起fetch请求，根据后端的报错信息可以进行提示，但是因为该项目已经开发完毕；并且包含很多个fetch请求，逐个更改很麻烦，所以使用service worker，把所有的请求与响应全部拦截，.
Service Worker —这应该是一个挺全面的整理
最新发布
qq_40229790的博客
09-06 798
作为一个比较新的技术，大家可以把 Service Worker 理解为一个介于客户端和服务器之间的一个代理服务器。在 Service Worker 中我们可以做很多事情，比如拦截客户端的请求、向客户端发送消息、向服务器发起请求等等，其中最重要的作用之一就是离线资源缓存。
service-turtle:使用ServiceWorker灵活的HTTP请求拦截
05-13
服务龟 使用ServiceWorker的HTTP模拟页内代理 ... 您也可以在Firefox中加载ServiceWorker（在about:config页面中打开Service Worker之后），但是Firefox实现了不同的通信模型，因此无法将命令发送到Se
js代码-serviceworker.js
07-15
ServiceWorker是JavaScript的一种后台线程，它在浏览器的背景下运行，独立于主线程，主要用于离线缓存、推送通知和背景同步等Web应用程序增强功能。这个`serviceworker.js`文件显然包含了实现这些功能的代码。让我们...
service-worker-demo:Service Worker 的小演示
06-30
Service Worker 是浏​​览器的新规范，用于解决离线问题并提供 Web 应用程序功能，而这些功能仅适用于本机应用程序。 Service Worker API（在 Chrome Canary 中）的当前实现专注于支持规范的离线功能，但它也可以...
PWA系列 - Service Workers 异常处理
weixin_34235135的博客
07-10 718
前言 前端在写PWA页面时， 经常会遇到ServiceWorker注册失败， 或ServiceWorker执行具体业务逻辑时失败， 但又连不上devtools， 或者连上了而从devtools能获取到的异常信息非常有限。本文详细分析一下ServiceWorker异常处理相关的问题。 线程退出时机 ServiceWorker规范中提到，Service...
最简单的 Service Worker，一看就懂
m0_52966679的博客
11-06 330
最简单的PWA应用制作，不需要vue，不需要npm，只要一个代码编辑器，一个浏览器，就能制作一个高级的PWA应用
初识 Service Worker
qq_34185872的博客
04-14 901
Service Worker 是一种在 Web 平台上运行的脚本，它能够拦截和处理网络请求、管理应用程序的缓存、实现离线访问等功能。使用 service worker，你可以将 app 设置为首先使用缓存资源，从而即使在离线状态，也可以提供默认的体验，然后从网络获取更多数据（通常称为“离线优先”）。这已经在原生 app 中可用，这是经常选择原生 app，而不是选择 web app 的主要原因之一。它是一种 JavaScript 工作线程，无法直接访问 DOM。
Service Worker 简单学习
xiaopi3的博客
08-16 678
Service Worker 是PWA核心，是一种特点：无法操作DOM、只能使用HTTPS和localhost。
service worker相关知识
转身
05-24 2566
service worker是浏览器运行在后台，与网页主线程独立的另一个线程，这种工作子线程的出现通常是为了做一些比较耗费性能的计算，有需要时再和主线程通讯，告知主线程计算结果，这样将渲染与计算独立开开，就避免了阻塞情况。 service worker本质上充当web应用程序、浏览器与网络（可用时）之间的代理服务器，它会拦截网络请求并根据网络是否可用来采取适当的动作，更新来自服务器的资源，是web worker的一种，它是一个注册在指定源和路径下的事件驱动worker。 特点： ...
使用Service Worker功能接口，增强你的网站缓存和离线功能
04-28 1305
这里有一些实例网页: Google开发者文档, 宝可梦图鉴。按下面的步骤来把玩一下吧：打开你的浏览器（拒绝IE和多年未更新的古董！），访问这些网页，确认网页加载完成后关闭它们。断开你的网络连接（拔网线）。重新在浏览器里打开这些页面。震惊！！我们仍然可以正常的访问并浏览页面的内容。（这就是Service Worker的强大）打开其他网站如google.com再试试，果不其然我们看到了熟悉的小恐龙。
service worker介绍
neal1991的专栏
05-02 1322
原文：Service workers explained 译者：neal1991 welcome to star my articles-translator , providing you advanced articles translation. Any suggestion, please issue or contact me LICENSE: MIT 那么它
ServiceWorker详解
热门推荐
u013853928的博客
01-15 1万+
原生App拥有web应用通常所不具备的离线体验，定时的默默更新，消息通知推送等功能。而新的Service Worker 标准让在web app上拥有这些功能成为可能。
Service Worker概念和应用介绍
翾的博客
01-15 1万+
Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理. Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。你可以完全控制应用在特定情形（最常见的情形是网络不可用）下的表现。 Service worker运行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值