j-ServiceWorker

jComponent 20 · jcomponent@20 component

El componente registra /sw-jcomponent.js y le envía la lista de activos, la versión de caché y el respaldo sin conexión desde su fuente de datos. Entregue la aplicación a través de HTTPS o localhost y coloque el trabajador en la URL raíz para que pueda manejar las páginas de la aplicación.

Este componente es un poco especial. En primer lugar, debe colocar el siguiente código en un archivo, por ejemplo. sw-jcomponent.js y colóquelo en public (por ejemplo, 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)}))})})}

El componente se comunicará con este código de trabajador de servicio.

Configuración:

expire {String} datos de caducidad del almacenamiento de los usuarios (predeterminado: 1 day) no recomendamos cambiar esto
debug {Boolean} habilita el modo debug. Actualizará los activos cada recarga (por lo que no es necesario cambiar la versión) (predeterminado: false)
datasource {String} ruta a la fuente de datos (la fuente de datos es un objeto)

Estructura de fuente de datos:

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

Es bueno saberlo:

PATH se puede utilizar como versión dinámica. Actualizará los activos instantáneamente (sin recargar la página), p. SET('version', '1.35')
Después de agregar/eliminar algo de los activos, no es necesario aumentar la versión
fallback realiza una versión fuera de línea de html. p.ej. fallback: '/offline.html'
Los activos pueden ser cualquier cosa: fuentes, páginas parciales, archivos css, archivos javascript.
Funciona solo en aplicaciones de una sola página como this o this

Uso:

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

Fuente: Total.js componentes. Copyright Denis Granec. Licencia MIT.