Modo PWA para DLE: agregar aplicación a la pantalla de inicio

Esto es lo llamado modo PWA: Una aplicación web progresiva (PWA por sus siglas en inglés) es un tipo de software de aplicación que se entrega a través de la web, creado utilizando tecnologías web comunes como HTML, CSS y jаvascript. Está destinado a funcionar en cualquier plataforma que use un navegador compatible con los estándares. La funcionalidad incluye trabajar sin conexión, notificaciones push y al hardware del dispositivo, lo que permite crear experiencias de similares a las aplicaciones nativas en dispositivos móviles y de escritorio. Dado que una aplicación web progresiva es un tipo de página web o sitio web conocido como aplicación web, no hay ningún requisito para que los desarrolladores o s instalen las aplicaciones web a través de sistemas de distribución digital como Apple App Store o Google Play.


Todo lo que se necesita para repetir este resultado son 3 archivos de texto en su sitio web. Dado que se ha desarrollado para sitios exclusivamente en DataLife Engine, el análisis del tema será específicamente para la estructura DLE.

Como agregar las funciones de aplicación web progresiva (PWA) a la plantilla del sitio

1. Sube los archivos a la raíz del sitio.

manifest.json
service-worker.js
pwa-offline.html

2. El archivo de la plantilla main.tpl, antes de la etiqueta de cierre del </head> insertar:

<link rel="manifest" href="/manifest.json">

3. Antes del final del </body> agregar:

<script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.('/service-worker.js')
            .then((reg) => {
              console.log('Service worker ed.', reg);
            });
      });
    }
  </script>

Si te da algún tipo de error puedes utilizar el siguiente: 

 <script type="text/jаvascript">
        if ("serviceWorker" in navigator) {
          if (navigator.serviceWorker.controller) {
            console.log("[PWA Builder] active service worker found, no need to ");
          } else {
            //  Registro de ServiceWorker
            navigator.serviceWorker
              .("/service-worker.js", {
                scope: "/"
              })
              .then(function (reg) {
                console.log("[PWA Builder] Service worker has been ed for scope: " + reg.scope);
              });
          }
        }
    </script>

4 Edite el contenido del archivo manifest.json, Especificando tus enlaces a los íconos de su sitio en las secciones y demás.

      {
      "src": "/images/android-chrome-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/android-chrome-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/images/maskable_icon_x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    }
        
    ],

Especifique el color corporativo para su aplicación en las secciones:

"background_color": "#000000",
"theme_color": "#000000",

Indique el nombre de su aplicación en lugar de "name": "Tutoriales en linea", así como una descripción detallada, en lugar de

 "description": "Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad.",

Ingrese su dirección de dominio en su lugar

"start_url": "https://tutorialesenlinea.futbolgratis.org/s/posts/2021-03/1617109304_pwa_-tutoriales_en_linea.webp" target="_blank">

          En realidad, este archivo es necesario para aquellos casos en los que un clic en el icono de la aplicación de repente no pudo conectarse al sitio y se mostrará una página de código auxiliar fuera de línea en la pantalla del visitante.


          Se recomienda indicar en él la información de o, el horario de trabajo y otra información importante para los visitantes reales.

          

           Descargar archivos