移动web前端学习-HTML常用特性部分-ServiceWorker

16人阅读 评论(0) 收藏 举报

ServiceWorker如果不是本地则要走https,主要分几步

    注册->激活->安装->监听与响应

    注册会有一个注册延时,需要稍等片刻,我们可以在Chrome的source中看到这个创建的过程

    注册代码如下:    

// 注册 service worker
			if('serviceWorker' in navigator) {
				navigator.serviceWorker.register('service-worker.js').then(function(registration) {
					// 注册成功
					console.log('ServiceWorker registration successful with scope: ', registration.scope);
				}).catch(function(err) {
					// 注册失败
					console.log('ServiceWorker registration failed: ', err);
				});
			}

创建一个service-worker.js

var cacheVersion = 0;
var currentCache = {
	offline: 'offline-cache' + cacheVersion
};
const cachePage = [
	"index.html",
	"service-worker.js",
	 "offline.html",
	"canvas-yibiaopan.html",
	"js/mui.min.js",
	"css/mui.min.css",
	"js/common.js",
	"fonts/mui.ttf"
];

// 缓存更新
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          // 如果当前版本和缓存版本不一致
          if (cacheName !== currentCache.offline) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('install', event => {
	event.waitUntil(
		//open缓存名
		caches.open(currentCache.offline).then(function(cache) {
			//增加缓存内容
			return cache.addAll(cachePage);
		})
	);
});

//监听请求
self.addEventListener('fetch', event => {
	var fetchurl = event.request.url;
	console.log(fetchurl);
	if(event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
		event.respondWith(fetch(event.request.url).catch(error => {
				//返回缓存中的资源				
				if(fetchurl.indexOf("/") != -1){
					fetchurl = fetchurl.substring(fetchurl.lastIndexOf("/")+1,fetchurl.length);
				}
				if(fetchurl.indexOf("?") != -1){
					fetchurl = fetchurl.substring(0,fetchurl.indexOf("?"));
				}
				console.log(fetchurl);
				return caches.match(fetchurl);
				
			})
		);
	} else {
		event.respondWith(caches.match(event.request)
			.then(function(response) {
				return response || fetch(event.request);
			})
		);
	}
});

里面包含了强制激活更新缓存、安装和监听三个过程。

Serviceworker独立于浏览器,只能通过请求和响应交互,里面缓存的文件不会因浏览器关闭而清除。

查看评论

计算机科学与技术部分图书书评

这些文摘是我在2003年逛BBS上摘得的。感觉很好,一直没有机会传上来。这是工大计算机版的文章,不知哪些高校的BBS上还有这种专业水准得书评,指导人学习。第一是OS部分:“今天闲来无事,整理了一下我的...
  • huaboy
  • huaboy
  • 2004-04-07 21:57:00
  • 1342

《移动Web前端高效开发实战》书籍源码

  • 2017年09月13日 12:36
  • 37.18MB
  • 下载

移动web前端学习-HTML常用特性部分-Canvas仪表盘(canvas-yibiaopan.html)

<!DOCTYPE html> <html> <head> <title>仪表盘...
  • u011008834
  • u011008834
  • 2018-04-17 17:38:00
  • 10

从零开始,学习web前端之HTML基础

web前端之html基础
  • yuzhiqiang_1993
  • yuzhiqiang_1993
  • 2017-02-28 11:52:35
  • 3246

荐书丨移动Web前端高效开发实战

一线互联网公司Web前端团队实战经验总结涵盖移动Web前端开发各个关键技术环节国内从2012年开始,移动端设备流量呈现大面积爆发式增长,到2017年已经达到75%,预计2018年这一比例会达到79%。...
  • csdnsevenn
  • csdnsevenn
  • 2017-09-22 00:00:00
  • 339

前端html与css学习笔记总结篇(超详细)

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师web网站架构师自己创业转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才...
  • qq_36368586
  • qq_36368586
  • 2016-11-20 16:53:31
  • 4963

HTML5-Service Worker实现离线页面访问

如果提到HTML5的新API,WebSocket ,Web Workers大家应该比较熟悉。WebSocket是用于简述请求数量的新协议,Web Workers是用于实现浏览器的多线程。而今天要介绍的...
  • qiqingjin
  • qiqingjin
  • 2016-06-10 23:27:38
  • 2665

WEB前端-HTML-常用标签

各种符号要想在页面上显示各种符号,需要根据html的符号对照表来进行编写。 详细请点这里p&br&hrp 表示段落,默认段落上下会有行间距; br 是换行,自闭和标签; h...
  • qq_34409701
  • qq_34409701
  • 2016-08-12 01:05:01
  • 6991

html开头部分

不是很严格的xhtml html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content...
  • qq_38409944
  • qq_38409944
  • 2018-02-07 11:29:02
  • 125

WEB前端开发必备的辅助软件工具

转自:http://www.wpbars.com/web-tool/ 转自:http://zhidao.baidu.com/question/101406399.html 转自:http://ww...
  • IT_ORACLE
  • IT_ORACLE
  • 2013-06-14 15:45:14
  • 1982
    个人资料
    等级:
    访问量: 0
    积分: 42
    排名: 0
    文章分类
    文章存档