Crear una PWA en Vivaldi

PWA (Aplicaciones Web Progresivas) son un tipo moderno de aplicaciones, que se ejecutan en un servidor web, teniendo nosotros en nuestro equipo local solamente la interfaz de dicho programa.


Ejemplos de PWAs pueden ser Twiter, Whatsapp, Ofice 365, etc… aplicaciones que podemos iniciar desde nuestros equipos, pero donde su contenido y funciones se encuentran principalmente en un servidor web. Son web progresivas, porque las actualizaciones y mejoras son progresivas desde la parte del servidor, el usuario no necesita instalar nada…todos los cambios se realizan directamente en el servidor, o sea, son aplicaciones que progresan de forma transparente al usuario.


Con anchos de banda cada vez mayores, las PWA se están convirtiendo en herramientas muy útiles, tanto a nivel de usuario que mantendrá menos saturado su equipo como a nivel de desarrollador que podrá optimizar mucho mejor sus aplicaciones y no necesitará tener que adaptarse a entornos diferentes ni invertir en continuas actualizaciones físicas.


Todos los navegadores web basados en Chromium tienen la posibilidad de transformar cualquier página web en una PWA…en realidad no exactamente una PWA…sino que la web transformada en aplicación de escritorio se abrirá en una ventana independientemente tengamos o no abierto el navegador que la creó.

Este tipo de recurso puede resultarnos útil en algunas ocasiones. Por ejemplo, tener en una ventana independiente un chat sin necesidad de tener abierto el navegador, o usándolo en otras tareas.


EDGE, Chrome, Opera…facilitan la tarea de transformar una web abierta en una PWA, pues disponen de esa funcionalidad entre las opciones de sus menús de herramientas.




El navegador Vivaldi también está basado en Chromium, pero no dispone de una opción específica para crear versiones de escritorio de webs. La funcionalidad y el código necesario están ahí, pero no han diseñado una opción que facilite usarlo. Me resulta curioso, porque Vivaldi siempre ha sido y es muy receptivo a las sugerencias de los usuarios y esta función ha sido solicitada muchas veces.

De todas formas, podemos crear PWAs desde Vivaldi, usando un sencillo truco.


En Vivaldi navegamos a la siguiente URL local


vivaldi://apps


En esa página observaremos que en la esquina superior derecha, hay un mensaje que nos dice que no tenemos iniciada sesión el Vivaldi. No se preocupen…aunque tengamos iniciada sesión seguirá mostrando ese mensaje. El contenido de esta página se sincronizará en tu cuenta de Vivaldi sin problemas aunque se muestre ese mensaje.



Abrimos una nueva pestaña de navegación y navegamos hasta la web que queremos transformar en PWA.

Una vez en ella, arrastramos la web desde la barra de navegación hasta la pestaña de apps abierta antes.

nos quedamos encima un segundo y se abrirá la página de esa pestaña de apps.

Una vez abierta, arrastramos y soltamos la web en un lugar vacío



En el nuevo elemento insertado, hacemos clic derecho encima.

En el menú emergente seleccionamos la opción Abrir como ventana



Volvemos a hacer clic encima del elemento y ahora seleccionamos la opción Crear accesos directos



Se abrirá una notificación donde podremos seleccionar en qué lugar queremos poner un acceso directo a la aplicación PWA



Como icono usará el favicon de la misma página web y como nombre usará la URL.

Si somos detallistas, podemos tratar de personalizar ambos aspectos, el nombre y el icono.

Para ello abriremos la ubicación donde está originalmente el acceso directo.

Si hemos creado un acceso directo en el Inicio, hacemos clic derecho encima de él y en el menú emergente seleccionamos la opción Más y en el submenú la opción Abrir ubicación del archivo



En la carpeta que se abrirá veremos nuestra PWA, posiblemente entre otras que se hayan podido crear de forma automática.

Seleccionamos nuestra PWA (a la que queremos cambiarle el nombre) y pulsamos la opción Cambiar nombre y simplemente la renombramos a nuestro gusto y antojo.



El acceso directo que teníamos en el menú Inicio ya tendrá el nuevo nombre de inmediato.

Ahora veamos como cambiarle el icono.

Para este ejemplo usaré otra PWA, más que nada porque ya tenía un icono personalizado creado de antes. Es necesario que ya tengan preparado el icono que van a querer usar. Como crearlo ya es cosa de cada quien.


En la carpeta que ya tenemos abierta del ejemplo anterior…la de las apps de Vivaldi, seleccionamos la PWA a la que le queremos cambiar el icono, y en la cinta de herramientas pulsamos en Propiedades



En la ventana de Propiedades, pulsamos en el botón Cambiar icono



En el siguiente panel que se abrirá, pulsamos en Examinar



Abrimos la ubicación donde tenemos nuestro icono personalizado y lo seleccionamos haciendo doble clic encima



En las dos siguientes pantallas, aceptamos el cambio pulsando en Aceptar



Si en cualquier momento deseamos eliminar esa PWA, simplemente entramos en la URL de apps como lo hicimos al principio y hacemos clic derecho encima de la PWA que queremos eliminar y seleccionamos la opción Desinstalar de Vivaldi



Como vemos, no es muy complejo crear PWAs en Vivaldi…pero no tan cómodo ni tan amigable como lo podríamos hacer en otros navegadores. Esperemos que los desarrolladores de Vivaldi tomen nota de las solicitudes de los usuarios y no tarden en implementar esta opción dentro de su menú como ya lo han hecho otros.


Sean felices como perdices y nos leemos en otra futura y emocionante aventura

HAY QUE SER FELIZ…AUNQUE SOLO SEA POR JODER (Joaquín Sabina)

0 comentarios