j-ServiceWorker

jComponent 20 · jcomponent@20 component

Die Komponente registriert /sw-jcomponent.js und sendet ihr die Asset-Liste, die Cache-Version und den Offline-Fallback aus ihrer Datenquelle. Stellen Sie die Anwendung über HTTPS oder localhost bereit und platzieren Sie den Worker an der Stamm-URL, damit er die Anwendungsseiten verarbeiten kann.

Diese Komponente ist etwas Besonderes. Zunächst müssen Sie den folgenden Code in eine Datei einfügen, z. B. sw-jcomponent.js und platzieren Sie es auf public (z. B. 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)}))})})}

Die Komponente wird mit diesem _service worker_code kommunizieren.

Konfiguration:

expire {String}-Verlaufdaten von Benutzern Speicher (Default: 1 day) we empfehlen nicht, dies zu ändern
debug {Boolean} ermöglicht debug-Modus. Es erneuert alle Vermögenswerte (so dass Sie die Version nicht ändern müssen) (Default: false)
datasource {String} Weg zur Datenquelle (Datenquelle ist ein Objekt)

Datenquelle Struktur:

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

Gut zu wissen:

PATH kann als dynamische Version verwendet werden. Die Assets werden sofort aktualisiert (ohne dass die Seite neu geladen werden muss), z. B. SET('version', '1.35')
Nachdem Sie etwas zu Assets hinzugefügt/entfernt haben, müssen Sie die Version nicht erhöhen
fallback führt eine Offline-Version von HTML aus. z.B. fallback: '/offline.html'
Assets können alles sein: Schriftarten, Teilseiten, CSS-Dateien, Javascript-Dateien
Es funktioniert nur in Einzelseitenanwendungen wie this oder this

Verwendung:

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

Quelle: Total.js Komponenten. Copyright Denis Granec. MIT-Lizenz.