Convierte tu Sitio Web en App en simples pasos - Progressive Web App (PWA) en Laravel

Actualmente los sitios web están tomando una relevancia considerable, tanto que no solo basta con tener una, sino que debemos competir en diseño y usabilidad para poder captar la atención de nuestro publico objetivo. Cada vez los cibernautas son más críticos de los sitios webs. Uno de los puntos más importantes a tener en cuenta es la velocidad de carga de nuestras páginas que conforman nuestro sitio web, ya que si demora demasiado el usuario puede optar por retirarse e irse a otro sitio web. Una solución es convertir tu sitio web común en una Web App Progresiva (Progresive Web App) PWA. Esto permite que nuestros archivos de css, js, imagenes y demás puedan almacenarse en nuestro dispositivo, de esta manera cada vez que volvamos a ingresar ya estarán pre cargados. Después de que realices todos los pasos Google Chrome y otros navegadores te brindaran la opción de instalarlo como si se tratase de una app. Siempre dependerá del navegador pero la fluidez de carga mejora considerablemente y una navegación en pantalla completa. 

Opción de Instalar aplicación 

Instalando aplicación 

Vista previa de la Web App Progresiva

Para abrirla la encontramos como cualquier otra aplicación. Además se puede configurar que link se pueden abrir sin conexión. En mi caso diseñé una página exclusiva para que se muestre cada vez que se pierde la conexión. 

Implementación:

1. Crear un archivo manifest.json en la carpeta public. Puede ser en cualquier otro lugar, solo que tendrás que corregir su ubicación en los siguientes pasos. 

{
    "name": "Plataforma Tecnicor",
    "short_name": "Tecnicor",
    "icons": [
        {
            "src": "/icons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "lang": "es",
    "start_url": "/",
    "display": "standalone",
    "background_color": "white",
    "theme_color": "white"
}

2. Agregaremls estas etiquetas dentro de body de nuestros HTML para obtener la pantalla completa, color de la barra de notificaciones e icono favicon para que sea el icono de nuestra App. 

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="mobile-web-app-capable" content="yes">

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="{{ asset('icons/favicon.ico') }}" type="image/x-icon">
<link rel="manifest" href="{{ asset('manifest.json') }}">

3. Agregaremos este script a nuestra página principal, página de inicio o la primera página que ve el usuario. 

<script>
        window.onload = () => {
            'use strict';

            if ('serviceWorker' in navigator) {
                navigator.serviceWorker
                    .register('{{ asset("sw.js") }}')
                    .then(function(){ console.log("Servicio Registrado");});
            }
        }
</script>

4. Finalmente dentro de la carpeta public crearemos un archivo Javascript sw.js y dentro de ese archivo copiaremos el siguiente fragmento de código. 

  var staticCacheName = "pwa-v" + new Date().getTime();
  var filesToCache = [
    //Rutas de archivos que deseas prevalecer sin conexión 
    './assets/css/style.css',
    './assets/js/vendor-all.min.js',
    '/offline.html'
  ];

  // Instalar en caché
  self.addEventListener("install", event => {
      this.skipWaiting();
      event.waitUntil(
          caches.open(staticCacheName)
              .then(cache => {
                  return cache.addAll(filesToCache);
              })
      )
  });

  // Limpiar caché y activar
  self.addEventListener('activate', event => {
      event.waitUntil(
          caches.keys().then(cacheNames => {
              return Promise.all(
                  cacheNames
                      .filter(cacheName => (cacheName.startsWith("pwa-")))
                      .filter(cacheName => (cacheName !== staticCacheName))
                      .map(cacheName => caches.delete(cacheName))
              );
          })
      );
  });

  // Revisar caché cuando no hay conexión
  self.addEventListener("fetch", event => {
      event.respondWith(
          caches.match(event.request)
              .then(response => {
                  return response || fetch(event.request);
              })
              .catch(() => {
                  return caches.match('/offline.html');
              })
      )
  });

Captura de pantalla donde observamos a través de la herramienta DevTools de Google Chrome, los archivos que se almacenan y están disponibles de manera offline.