En la cuarta clase del curso de desarrollo de PWA con WordPress vamos a realizar una toma de contacto creando un “Hola mundo” con una PWA.
En esta lección vamos a comenzar a escribir código empezando por una pequeña prueba para desarrollar nuestra propia PWA y ver cómo funciona. Vamos a aprovechar todos los conocimientos adquiridos en las lecciones anteriores para poder ponerlos en práctica y crear nuestra primera aplicación.
La idea es crear un fichero index.html muy sencillo y crear un manifest.json que nos ayude a transformarlo en una aplicación PWA que finalmente instalaremos en nuestro ordenador para ver que realmente funciona. ¡Empecemos!
¡Así de fácil! Ya sabemos de qué va esto de las PWA. Ahora toca adentrarse en el manifest.
Para hacer esta lección en mi caso me he dejado preparado una serie de iconos para usar en la aplicación ya que es obligatorio que nuestra PWA tenga un icono que la represente dentro del manifest. Podéis utilizar cualquier imagen o vuestro propio logo para que quede más chulo.
Insertaremos un pequeño service worker ya prefabricado para que podamos probar el funcionamiento de la PWA una vez la instalemos en nuestro ordenador a través de Google Chrome. No os preocupéis porque no necesitamos conocimientos avanzados para poder entender la instalación de este fichero Javascript y las librerías necesarias.
Como deberes os animo a que investiguéis más sobre las opciones más avanzadas en cuanto a service worker que nos ofrece Microsoft en su plataforma PWABuilder para que podáis experimentar con vuestro “hola mundo” añadiendo más funcionalidades y opciones.
¡Por cierto! Que no se os olvide que si tenéis cualquier duda o comentario podéis escribirnos a través del panel de soporte en boluda.com :)
Todos los capítulos de este curso:
- Curso de PWA para WordPress #1. ¿Que es PWA?
- Curso de PWA para WordPress #2. Funcionamiento y características de una PWA
- Curso de PWA para WordPress #3. Estructura y configuración del app manifest
- Curso de PWA para WordPress #4. Toma de contacto: Hello world PWA
- Curso de PWA para WordPress #5. Usando WordPress como PWA
- Curso de PWA para WordPress #6. Optimizando el theme de WordPress para PWA
- Curso de PWA para WordPress #7. Plugins para convertir WordPress en PWA
- Curso de PWA para WordPress #8. Configurando nuestro WordPress PWA
- Curso de PWA para WordPress #9. Notificaciones push
- Curso de PWA para WordPress #10. Testeando nuestra PWA