离线应用PWA-service work

1.有时候希望没有网络的时候,也可以正常的访问对应的页面，就需要用到service work 进行对应的配置，可以当页面的配置也可以多页面的配置，单页面配置比较麻烦就以uniapp框架为基础来配置service work

一配置 manifest 文件（此manifest和uniapp 的 manifest.不是同一个文件配置）

1.1 在配置index.html模板通过link 引入对应的manifest文件

注意事项官方的index,html 有个 noscript 标签记得去掉，

manifest内容

注意事项：start_url的路径和uniapp的web配置路径要一致比如基础路径为 /h5 这边也是对应的 /h5

{
  "start_url": "基础路径", //开始的路径 这里最好就是和uniapp的web配置路径要一直
  "name": "项目名字",
  "short_name": "项目名字",
  "icons": [
      {
          "src": "基础路径/static/pwa_icon.png",  // 如果 以 /开头 则为域名的根路径算起  如果是 ./开头 则是以manifest所在文件的位置算起
          "type": "image/png",
          "sizes": "144x144"
      }
  ],
  "display": "standalone",
  "background_color": "#1b2740",
  "theme_color": "#ffffff"
}

1.2看是否配置成功运行项目,在浏览器如果能查看到以下的内容就是配置成功,如果不是请检查以下路径的引入是否正确

二. 注册service worker

1.1 在main,js入口文件注册

注意事项

1. service worker只允许在localhost 环境或者 https 环境下才能支持允许

2. service worker只允许放在域名的根目录不能放在其他的位置其他的位置在单页面的情况下容易造成数据丢失，在本地的时候可以通过放在static进行调试

/* 离线缓存 */
if ('serviceWorker' in window.navigator) {

	const path = {
		pro: './service-worker.js',
		dev: './static/service-worker/service-worker.js'
	}
	

	window.addEventListener('load', () => {
		navigator.serviceWorker.register(path[config.devType])
			.then(registration => {
				console.log('mian注册成功');
				console.log('Service Worker registered:', registration.scope);
			})
			.catch(error => {
				console.log('注册失败');
				console.error('Service Worker registration failed:', error);
			});
	});
}

1.2.查看是否配置成功，可在浏览器开发者调试如下图看到对应的监听器就是注册成功

三,进行service worker 数据的缓存

1.1 监听资源的监听

self.addEventListener('install', (event) => {
	// 要缓存的静态文件
	let urlsToCache = [
		'/',
		FILE_NAME +'/',
		FILE_NAME +'/index.html',
		....其他的静态文件，上面三个是必须的
	]
	event.waitUntil(
		caches.open(CACHE_NAME)
		.then(cache => {
			console.log('cache',cache);
			cache.addAll(urlsToCache)
		})
	)
});

1.2 监听缓存版本的更新

//监听activite事件， 激活后通过cache的key来判断是否需要更新cache中的静态资源
self.addEventListener('activate',function (e) {
	const cacheName = [''];
    console.log('Service Worker 当前状态： activate');
    const cachePromise = caches.keys().then(function (keys) {
        return Promise.all(keys.map(function (key) {
            if(key !== CACHE_NAME) {
                return caches.delete(key);
            }
        }))
    });
    e.waitUntil(cachePromise);
    return self.clients.claim(); //激活触发Service Worker
});