j-ServiceWorker

jComponent 20 · jcomponent@20 component

De component registreert /sw-jcomponent.js en stuurt het de assetlijst, cache-versie en offline fallback van zijn gegevensbron. Dien de applicatie via HTTPS of localhost en zet de werknemer op de root URL zodat hij de applicatiespagina's kan beheren.

In de eerste plaats moet u de code hieronder in het bestand bijvoorbeeld sw-jcomponent.js plaatsen en op de public (bijvoorbeeld myproject/public/sw-jcomponent.js) plaatsen.

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)}))})})}

De component zal communiceren met deze _service worker_code.

Configuratie:

expire {String} vervaldatum gegevens van gebruikers opslag (default: 1 day) we niet aanbevelen om dit te veranderen
debug {Boolean} maakt het mogelijk in de debug modus. Het vernieuwt activa elke oplaad (dat is niet nodig om de versie te veranderen) (default: false)
datasource {String} route naar de gegevensbron (de gegevensbron is een object)

Datasource structuur:

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

Goed om te weten:

PATH kan worden gebruikt als een dynamische versie. het vernieuwt activa onmiddellijk (zonder pagina opladen) bijvoorbeeld SET('version', '1.35')
Na het toevoegen / verwijderen van iets uit activa hoeft u geen versie te vergroten
fallback uitvoert offline versie van html. e.g. fallback: '/offline.html'
De activa kunnen alles zijn: fonts, gedeeltelijke pagina's, css-bestanden, javascript-bestanddelen
_Het werkt alleen in Single Page Applications zoals Dit is Of Dit is__

Gebruik:

<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>

De bron: Total.js componentenCopyright van Denis Granec. Mijn licentie.