Una PWA funciona a partir de una serie de elementos que vamos a detallar a continuación.
Fichero Manifest.json
Es el fichero donde se recogen los datos que se usarán para la instalación de la PWA en el dispositivo del usuario: el título, los colores corporativos, las imágenes de instalación, etc.
Fichero Sw.js
Es el fichero Javascript desarrollado para usar las funcionalidades de la PWA. Implementa un sistema de eventos que se producen en el navegador y que se conocen con el nombre de Service Worker.
En esencia, un Service Worker viene a ser un intermediario entre la aplicación web -en el servidor-, el navegador del usuario, y la red o conexión a internet que comunica ambos.
Para implementar la instalación como aplicación, lo que se le indica al navegador (de ser compatible) es que nos avise una vez cargada la página, para poder mostrar un botón de instalación, además de que también nos avise si el usuario hace clic en el botón, para poder iniciar el proceso de instalación a partir de los datos del manifest.json.
Para las notificaciones Push, lo que se hace es registrar en el navegador que queremos que nos avise si se envía desde el servidor una notificación al dispositivo del usuario en cuestión (cuando el usuario se suscribe a las notificaciones se le asigna un identificador global único), de forma que, incluso estando el navegador o la aplicación cerrada, se mostrará dicha notificación.
Diseño web responsive
Los díseños web responsive se caracterizan por cambiar la distribución y los contenidos de la página en función del tamaño de la pantalla del dispositivo donde se visualiza. Esto es importante para que nuestro eCommerce se vea correctamente en los dispositivos móviles de los clientes, tanto si se visualizan desde el navegador, como si se visualizan desde la aplicación instalada localmente.