Aplicaciones web progresivas: las más cercanas a las aplicaciones nativas con HTML5 y JavaScript

Aplicaciones web progresivas: las más cercanas a las aplicaciones nativas con HTML5 y JavaScript

Las aplicaciones nativas para dispositivos Android e iOS tienen varias ventajas importantes sobre las aplicaciones web desarrolladas con HTML5 y JavaScript. Por ejemplo, las aplicaciones nativas pueden acceder a la cámara, el sistema de archivos y otras funciones del dispositivo, mientras que las aplicaciones web solo pueden hacerlo con reservas. Sin embargo, cada vez se pueden recrear más funciones que solían ser exclusivas de las aplicaciones nativas a través de JavaScript, por lo que las diferencias entre las aplicaciones web y las aplicaciones nativas se están reduciendo. Las llamadas aplicaciones web progresivas son apenas inferiores a las aplicaciones clásicas.

HTML5 y CSS3 fueron solo el comienzo

Con HTML5, el lenguaje de marcado para la web ha dado un gran paso adelante. Aparte de una mejor semántica, el soporte de Internet móvil fue otro objetivo principal de HTML5.

Se introdujeron tipos de entrada especiales para formularios, que muestran teclados específicos de casos en teléfonos inteligentes y tabletas, para direcciones de correo electrónico y entrada numérica.

Diferentes teclados según el campo de entrada

Las opciones de animación CSS3 le permiten hacer que su sitio web se mueva de una manera eficiente en recursos, sin tener que depender de JavaScript.

Aumento del número de API de JavaScript para compatibilidad con dispositivos móviles

Aparte de la usabilidad y el diseño, las muchas funciones móviles son una de las principales razones por las que las aplicaciones son interesantes en primer lugar. En los últimos años, se introdujeron varias API de JavaScript, diseñadas específicamente para dispositivos móviles.

Uno de ellos es la API de geolocalización, que tiene acceso a la información de ubicación de un dispositivo, así como la API de orientación del dispositivo, que le permite acceder a la orientación del dispositivo.

Las API que permiten la transmisión de audio y video, así como la captura, aún están en desarrollo. La API de vibración y estado de la batería le permite configurar alarmas de vibración y consultar el porcentaje de batería.

Al observar el estado actual de los diferentes API de JavaScript, notará que una gran cantidad de ellos fueron diseñados específicamente para terminales móviles.

Configuración de notificaciones y servicios en segundo plano

Con la API de notificaciones, es posible crear notificaciones desde hace un tiempo. Sin embargo, siempre es necesario tener abierto en el navegador el sitio web que envía la notificación.

Notificación ejecutada por un sitio web

Con la nueva API push y la API service-worker, ya no es necesario abrir el sitio web respectivo. La API service-worker registra un JavaScript que se ejecuta independientemente del sitio web. Podemos comparar esto con los servicios en segundo plano de las aplicaciones móviles nativas.

navigator.serviceWorker.register(”/app.js”)

El ejemplo registra el archivo «app.js» como trabajador de servicio. Este archivo y el script que contiene se ejecutan independientemente del sitio web. Esto se hace utilizando un servicio del navegador que siempre se ejecuta en segundo plano. Este archivo nos permite configurar y ejecutar notificaciones push.

self.addEventListener("push", function(e) {
    const optionen = {
    body: "Text",
    icon: "/icon.png",
    badge: "/badge.png"
  };

  event.waitUntil(self.registration.showNotification("Title", options));

});

Es posible una implementación simple de la API push usando la biblioteca Push.js. Aquí, también puede encontrar soluciones de respaldo para navegadores más antiguos, lo que le permite configurar sus notificaciones sin preocupaciones.

Utilice los trabajadores del servicio para descargar todos los archivos necesarios para su uso sin conexión. Idealmente, dependiendo de la aplicación, se podrá utilizar sin conexión a Internet.

Web-App-Manifest: modo de pantalla completa e icono en la pantalla de inicio

Eventualmente, puede usar el manifiesto de la aplicación web, de modo que la apariencia de su aplicación web no sea diferente a la de una aplicación nativa.

Es un archivo JSON que está integrado en el documento HTML.

Entre otras cosas, el archivo define cómo se mostrará la aplicación web en la pantalla de inicio. Así, puedes definir un nombre, un nombre corto, así como los iconos en diferentes tamaños.

 "short_name": "My App",
  "name": "My Super Awesome App",
  "icons": [
    {
      "src": "icon.png",
      "type": "image/png",
      "sizes": "48x48"
    }
 ],
  "start_url": "app.html"
 }

“Start_url” también le permite ingresar una URL de inicio diferente que se carga cada vez que accede a la aplicación web a través de la página de destino.

Con el atributo «mostrar», es posible mostrar la aplicación web sin ningún elemento del navegador, como la barra de direcciones.

"display": "standalone";

También puede ingresar un color de fondo usando «background_color». Si lo desea, la visualización de la aplicación se puede vincular a una determinada orientación del dispositivo. Las opciones «paisaje» y «retrato» están disponibles a través de «orientación».

Una vez que haya configurado un trabajador de servicio y haya colocado un manifiesto de aplicación web, el Chrome móvil muestra una insignia en el borde inferior de la página mientras se carga, lo que le permite colocar la aplicación web en la pantalla de inicio.

Insignia para la instalación de una aplicación web

Sin embargo, la insignia solo se mostrará si ha visitado un sitio web al menos dos veces en dos días diferentes, dentro de las dos semanas.

A estas alturas, a más tardar, su aplicación web no se puede diferenciar de otras aplicaciones nativas. Al acceder a ella a través de la pantalla de inicio, no puede saber que la aplicación web se cargó en un navegador. Además de eso, son posibles muchas funciones, como notificaciones y otras funciones del dispositivo.

Sin embargo, se debe cumplir otro requisito: su aplicación web debe ejecutarse a través de HTTPS, que se aplica a muchas API de JavaScript tal como están.

Extensión Lighthouse para Chrome

Con la extensión Faro, Chrome le proporciona una herramienta que ayuda con el desarrollo de aplicaciones web progresivas.

Ampliación del faro

Por ejemplo, le permite verificar si su aplicación web cumple con todos los criterios para agregarla a la pantalla de inicio.

#Aplicaciones #web #progresivas #las #más #cercanas #las #aplicaciones #nativas #con #HTML5 #JavaScript

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.