Cómo convertir tu juego HTML5 desarrollado con Phaser en una PWA (Progressive Web App), con habilidad para instalarlo en el dispositivo, jugar offline y permitir el uso a pantalla completa.
Las PWA permiten disfrutar de muchas de las ventajas de las aplicaciones móviles, pero sin tener que obligar a tus usuarios a pasar por los stores de aplicaciones. Por tanto, si tienes un juego realizado con Phaser y deseas que se pueda instalar, jugar offline y a pantalla completa, en realidad no necesitas hacer todo el trabajo de publicar tu juego en un store, te sirve simplemente con disponer de una web con algunos extras que la conviertan en una Progressive Web App. En este artículo te vamos a vamos a explicar cuáles son esos añadidos y cómo puedes conseguir implementarlos.
Antes de comenzar cabe aclarar que las PWA son de aplicaciones web que pueden trabajar con muchas cosas de las reservadas para aplicaciones móviles, instalables mediante Google Play y similares, pero usando únicamente tecnologías web estándar. En Android funcionan genial, incluso en ordenadores de escritorio se pueden instalar las PWA y disfrutar de características extra. En iOS también funcionan, aunque lo cierto es que con algunas limitaciones.
Infelizmente la estrategia de Apple pasa por frenar las tecnologías web, para que los desarrolladores y empresas estén obligados a publicar sus aplicaciones en la store, de modo que todo el mundo tenga que pasar por caja y alimentar aún más la nutrida caja de ingresos de la empresa de la manzana. Es por ello que las PWA se quedan un poco cojas en iOS. Es una pena y esperamos que en futuro cambie la tendencia, para no tener un lastre en el mundo web, ahora que la anterior oveja negra (Internet Explorer) ha desaparecido.
No es mi objetivo en este momento introducir las PWA, por lo que te recomiendo acceder a la categoría de las Progressive Web App para obtener más información.
Qué necesitas para convertir un juego de Phaser en una PWA
Básicamente necesitamos lo que se conoce como Service Worker y un manifiesto, que son dos piezas fundamentales, que caracterizan las PWA. Además, el sitio web debe colocarse en un servidor web que permita SSL, es decir, tenemos que servirlo mediante https.
Manifiesto (site.webmanifest)
El manifiesto es un archivo en formato JSON que contiene metadatos sobre la PWA que estamos desarrollando. El manifiesto toma el nombre de "site.webmanifest" y lo debes de colocar en la raíz del dominio donde coloques tu aplicación.
Entre esos metadatos podemos encontrar:
- Nombre de la aplicación
- Iconos de la app
- Colores del tema
- Orientación de pantalla
- La URL de inicio
- El modo de display
Puedes encontrar más información sobre el archivo manifest en esta página.
Vamos a ver el ejemplo de manifiesto que hemos usado en nuestro juego.
{
"name": "Breakout Game",
"short_name": "Breakout",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"purpose": "maskable",
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#5E406A",
"background_color": "#243A3E",
"display": "fullscreen",
"orientation": "landscape",
"start_url": "/index.html"
}
Como ves, todas las propiedades son auto-explicativas, por lo que no creo que tengas problema en entenderlas
Por supuesto, los iconos deben estar en las rutas donde se ha indicado. Sobre éstos cabe decir que los puedes poner en cualquier formato, pero generalmente será PNG de 24 bits para que tenga transparencia por canal alpha y comportarse bien sobre cualquier tipo de fondo. Hay diversos sitios en la web que a partir de una imagen pueden generarte todo un set de iconos en diversas resoluciones.
Service worker
La pieza más importante de las PWA es el service Worker. Consiste en un archivo de código Javascript que es capaz de hacer por debajo la mayoría de la magia, para conseguir mejoras importantes, entre las que se encuentran:
- Cacheo
- Funcionamiento offline
- Funcionamiento en background
- Recepción de notificaciones
En este artículo puedes encontrar más información de service workers.
Por supuesto, realizar un Service Worker no es algo sencillo, pero afortunadamente hay herramientas que permiten generar el código del service worker a base de una declaración de configuración. El ejemplo más conocido es Workbox.
Workbox tiene un CLI que te permite crear el service worker de manera prácticamente inmediata. En este artículo no pensaba explicar el paso por paso para producir el service worker, por lo que te recomiendo leer en la propia documentación del CLI (quizás más adelante hagamos un tutorial por lo que puedes ver en el buscador a ver si se ha publicado).
Lo que sí te explico es que básicamente nuestro service worker se va a encargar de cachear los archivos que son necesarios para que el juego pueda funcionar offline. Esto son, todas las imágenes, iconos, el manifiesto, los archivos de sonido, los svg, json y por supuesto el html.
El CLI necesita que indiques toda esta configuración en un archivo, que puedes nombrar workbox-config.js y que quedaría de esta manera.
module.exports = {
"globDirectory": "./www",
"globPatterns": [
"**/*.{png,xml,js,ico,html,json,svg,webmanifest,mp3,ogg}"
],
"swDest": "www/sw.js"
};
El service worker que puedes generar con Workbox podría disponer de otros servicios. Nosotros solamente estamos explotando la característica de funcionamiento offline, para lo que es necesario realizar el cacheo de todos los archivos del juego. Es básicamente lo que hemos configurado en el anterior archivo Javascript.
Una vez instalado Workbox en tu ordenador, necesitas generar el service worker con el comando siguiente:
workbox generateSW workbox-config.js
Esto generará el archivo del service worker en la ruta indicada "www/sw.js".
Registrar el service worker
En la página web de nuestro juego que se carga para arrancarse, es decir, en el index.html, necesitamos registrar el service worker generado. Para ello usamos un poco de Javascript del lado del cliente.
El registro del service worker lo consigues con un código como este:
<script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js');
});
}
</script>
Publicar el proyecto en un servidor con https
Esta parte ya depende un poco de qué servicio de alojamiento quieras usar para la web. Como hemos dicho, para una PWA es requisito indispensable disponer de un hosting con SSL, que permita acceder por https al servidor.
Aquí las opciones básicas serían contratar un alojamiento que incluya el certificado de seguridad en una empresa de hosting, o bien usar alguno de los servicios de alojamiento gratuito en servidor seguro que existen en el mercado.
Como el sitio web consta de una única página HTML y una serie de assets normales (imágenes, javascript, audio...), el tipo de alojamiento necesario sería el más básico. Por supuesto, no requiere ningún lenguaje del lado del servidor, así que las necesidades serían perfectamente compatibles con servicios que tienen una capa gratuita como:
- GitHub Pages
- Netlify
- Firebase Hosting
- Etc.
En nuestro canal de Youtube tenemos algunos vídeos que explican cómo configurar estos servicios.
Conclusión
Con eso es todo. Gracias a estas mejoras puedes convertir tu juego Phaser en una PWA instalable en dispositivos, con posibilidad de funcionamiento offline.
Para encontrar el proyecto de la PWA del juego que hemos ido desarrollando en el Manual de Phaser, puedes acceder a este repositorio de GitHub.
Además, quizás te interese la lectura del Manual de PWA, ya que explica muchas cosas de las aplicaciones progresivas que seguramente te venga bien conocer para cubrir posibles dudas y profundizar en los temas que hemos mencionado.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...