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

版权声明: https://blog.csdn.net/u011008834/article/details/79977288

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独立于浏览器,只能通过请求和响应交互,里面缓存的文件不会因浏览器关闭而清除。

阅读更多

没有更多推荐了,返回首页