- [A][A]
Se trata de aplicaciones web que permiten la colocación de un acceso en el escritorio al igual que las aplicaciones instaladas y que se abren sobre el navegador en modo invisible, ofreciendo un aspecto idéntico a las aplicaciones instaladas.
Al ser una aplicación web sólo tiene acceso a las utilidades del dispositivo que se permite al navegador, esto va variando según los cambios que se efectúan en los navegadores.
Ofrece la posibilidad de trabajar sin conexión a Internet ya que permite guardar información en la memoria cache del dispositivo, tanto en las cookies como en los localStorage o en una base de datos local indexedDB.
Están siempre actualizadas de manera automática sin precisar la actuación del usuario, ya que al tener conexión comprueba si hay una versión más reciente de alguno de los datos y archivos de la misma.
Es muy importante saber que las PWA se basan en la cache del navegador, en ella se guardan los datos para la navegación offline y para la personalización por el usuario, por ello se ve afectada por la limpieza de la cache.
Su funcionamiento es seguro ya que precisa que la web que se consulta este bajo el sistema HTTPS de acceso protegido.
Al ser una aplicación web es multiplataforma por lo que su desarrollo se abarata, además suele compartir datos y código con el mismo apartado en la web con lo que optimizamos los recursos destinados a la aplicación.
Se programa en html5, css y javascript.
El archivo principal de la PWA es un html llamado index.html, este es el que leerá el navegador por defecto y que cargara el resto de archivos que necesite la aplicación.
Para su funcionamiento como Aplicación Web Progresiva, son imprescindibles un archivo manifiest.json en el que se define la aplicación, y un archivo sw.js en el que se define el serviceWorker encargado de implementar la cache para la navegación offline y la capacidad de instalación de la aplicación.
Lo normal es tener los estilos en uno o varios archivos css y la mecánica de la aplicación en varios archivos js que se cargan desde la index (hay que cargarlos como defer para que se haya cargado primero el html).
La aplicación la inicializamos desde la index con un disparador que espera a que se haya cargado todo y llama a una función que iniciará la aplicación.
<script>window.onload = function() { appPrep(); }</script>
Para crear una pwa y trabajar con un servidor en pruebas tipo xampp, hay que crearla en la misma posición en la que estará en el servidor.
Si estará en la raíz en el localhost también tiene que estar en la raíz y en el manifest pondremos:
"start_url": "/",
Si va en la carpeta app pues estará en localhost/app y en el manifest pondremos:
"start_url": "/app/",
Si va en la carpeta utiles/app pues estará en localhost/utiles/app y en el manifest pondremos:
"start_url": "/utiles/app/",