}
La integración de este archivo es en el HTML agregando el siguiente tag:
<link rel="manifest" href="manifest.json">
Para agregar varias configuraciones para distintos dispositivos agregar los siguientes tag
<title>Gestión de Casos</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Sistema de Gestión de casos">
<meta name="theme-color" content="#F0DB4F">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="../images/icono2.ico">
<link rel="apple-touch-startup-image" href="../images/icono2.ico">
<link rel="manifest" href="manifest.json">
Contenido base para el archivo sw.js es:
//asignar un nombre, versión al cache y archivos guardar
const CACHE_NAME = 'v1_cache_casos',
urlsToCache = [
'./',
'../images/icono2.ico',
'../css/bootstrap.min.css',
'../js/jquery-3.1.0.min.js',
'../js/bootstrap.min.js',
'../js/pyFunctions.js',
'../formulario/LogIn.php',
]
//durante la fase de instalación, generalmente se almacena en caché los activos estáticos
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache)
.then(() => self.skipWaiting())
})
.catch(err => console.log('Falló registro de cache', err))
)
})
//una vez que se instala el SW, se activa y busca los recursos para hacer que funcione sin conexión
self.addEventListener('activate', e => {
const cacheWhitelist = [CACHE_NAME]
e.waitUntil(
caches.keys()
.then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
//Eliminamos lo que ya no se necesita en cache
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName)
}
})
)
})
// Le indica al SW activar el cache actual
.then(() => self.clients.claim())
)
})
//cuando el navegador recupera una url
self.addEventListener('fetch', e => {
//Responder ya sea con el objeto en caché o continuar y buscar la url real
e.respondWith(
caches.match(e.request)
.then(res => {
if (res) {
//recuperar del cache
return res
}
//recuperar de la petición a la url
return fetch(e.request)
})
)
})
o utilizar el siguiente código para que se vea la pagina offLine
const OFF_LINE = './offLine.html';
self.addEventListener("fetch", function(event) {
event.respondWith(
fetch(event.request).catch(function() {
return caches.match(event.request).then(function(response) {
return response || caches.match(OFF_LINE);
});
})
);
});
Para registrar el SW se debe agregar lo siguiente:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js')
.then(reg => console.log('Registro de SW exitoso', reg))
.catch(err => console.warn('Error al tratar de registrar el sw', err))
}
</script>
