Modo PWA para DLE: agregar aplicación a la pantalla de inicioEn el navegador web Chrome y en otros, hay una función que le permite agregar cualquier sitio (sujeto a ciertas condiciones) como una aplicación web a la pantalla principal del gadget.

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 acceso al hardware del dispositivo, lo que permite crear experiencias de usuario 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 usuarios 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.
service-worker.js : Es el servicio en sí.
manifest.json : un manifiesto que describe el nombre de la aplicación y sus íconos.
pwa-offline.html: un código auxiliar para el modo fuera de línea.
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.register('/service-worker.js')
            .then((reg) => {
              console.log('Service worker registered.', 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 register");
          } else {
            //  Registro de ServiceWorker
            navigator.serviceWorker
              .register("/service-worker.js", {
                scope: "/"
              })
              .then(function (reg) {
                console.log("[PWA Builder] Service worker has been registered 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 usuario 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.es/",
5. Edite el contenido del archivo /pwa-offline.html, Por ejemplo, en nuestro sitio se ve así
Modo PWA para DLE: agregar aplicación a la pantalla de inicio
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 contacto, el horario de trabajo y otra información importante para los visitantes reales.
Modo PWA para DLE: agregar aplicación a la pantalla de inicio
Modo PWA para DLE: agregar aplicación a la pantalla de inicio

Te sugiero seguir leyendo...

  • Autor:
  • Categorias: Tutorial Diseño Web DataLife Engine Modulo DLE WebSite webmasters

Modo PWA para DLE: agregar aplicación a la pantalla de inicio Modo PWA para DLE: agregar aplicación a la pantalla de inicio...
Tutoriales en linea
¿Te gusta el tutorial?





Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!