j-ServiceWorker

jComponent 20 · jcomponent@20 component

Komponenten registrerar /sw-jcomponent.js och skickar den tillgångslistan, cache-versionen och offline fallback från sin datakälla. Tjänar appen via HTTPS eller localhost, och placerar arbetaren på roten URL så att den kan hantera applikationssidorna.

Först och främst måste du sätta koden nedan i filen, till exempel sw-jcomponent.js och placera den på public (till exempel myproject/public/sw-jcomponent.js)

var prefix='jc';function hash(s,unsigned){var hash=0,i,char;if(!s.length)return hash;var l=s.length;for(i=0;i<l;i++){char=s.charCodeAt(i);hash=((hash<<5)-hash)+char;hash|=0;}return unsigned?hash>>>0:hash}self.addEventListener('install',()=>{self.skipWaiting()});self.addEventListener('message',function(e){if(e.data.action==='jc-sw'){var data=e.data.data;data.name=prefix+'-'+data.version+'-'+hash(data.assets.toString(),true);addcache(e.data.data)}});self.addEventListener('fetch',function(e){e.respondWith(fetch(e.request).catch(function(){return caches.match(e.request).then(function(response){if(response)return response;if(e.request.mode==='navigate'||(e.request.method==='GET'&&e.request.headers.get('accept').includes('text/html')))return caches.match('jc-offline-fallback')})}))});function addcache(data){caches.open(data.name).then(function(cache){if(data.assets&&data.assets.length)cache.addAll(data.assets);if(data.fallback){fetch(data.fallback,{mode:'no-cors'}).then(function(response){return cache.put('jc-offline-fallback',response)})}}).then(function(){caches.keys().then(function(keys){return Promise.all(keys.map(function(key){if(data.name!==key)return caches.delete(key)}))})})}

Komponenten kommer att kommunicera med denna _service worker_kod.

Konfigurera:

expire {String} utgångsdata från användarens lagring (default: 1 day) vi rekommenderar inte att ändra detta
debug {Boolean} möjliggör debug-läge. det kommer att uppdatera tillgångar varje omlastning (så du behöver inte ändra versionen) (default: false)
datasource {String} väg till datakälla (data-källa är ett objekt)

Datakälla struktur:

{
	version: '1.00',
	fallback: '/',
	assets: [
		'/js/default.js'
	]
}

Bra att veta:

PATH kan användas som en dynamisk version. Det kommer att uppdatera tillgångar omedelbart (utan sidladda) t.ex. SET('version', '1.35')
Efter att ha lagt till/avlägsnat något från tillgångar behöver du inte öka versionen
fallback utför offline-version av html. e.g. fallback: '/offline.html'
Verksamhet kan vara allt: teckensnitt, partiella sidor, css-filer, javascript-filar
_Det fungerar bara i Single Page Applications som Detta eller Detta__

Användning:

<ui-component name="serviceworker" path="version" config="datasource:mysource"></ui-component>

<script>
	var version = '1.34';
	var mysource = {
		version: version,
		fallback: '/',
		assets: [
			'/pages/settings.html',
			'/pages/articles.html',
			'/pages/dashboard.html'
		]
	};
</script>

Källa till: Total.js komponenterFörfattare Denis Granec. Min licens.