C. Hazlo funcionar (con videos)

  1. Prueba e instala, de preferencia con Chrome, el sitio https://pwamdex.web.app/.

  2. Descarga el archivo /src/pwaform.zip y descompáctalo.

  3. Crea una cuenta de email de Google por ejemplo, juanito@google.com

  4. En https://console.firebase.google.com/ selecciona la cuenta de email que acabas de crear, por ejemplo, juanito@google.com

  5. Crea un proyecto de Firebase nuevo. Por ejemplo, pwamdex. No uses IA ni Amalytics.

  6. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo juanito.

  7. Crea un repositorio nuevo. En el nombre del repositorio, pon el nombre del proyecto de firebase, por ejemplo pwamdex

  8. Importa el proyecto de GitHub a Visual Studio Code

  9. En Visual Studio Code selecciona el menú Terminal > New Terminal y al abrirse esta, teclea cmd y luego ENTER

  10. En la consola de firebase, en el costado izquierdo, en la opción Hosting y sin servidores selecciona Hosting. Añade hosting a ti sitio (Sin usar IA ni Amalytics) y sigue las instrucciones que se indican para para la consola, que básicamente son

    1. firebase login
      Si no has iniciado sesión, se abre el navegador y tienes que entrar a sesión con tu cuenta de Firebase.
    2. firebase init
      Selecciona el proyecto que ya está creado en Firebase, solo ponle hosting y emulador de hosting (selecciona que lo descargue.) Selecciona que no sea una Single page app.

  11. Edita los archivos que desees.

  12. Crea los íconos del proyecto con https://www.photopea.com/.

  13. Crea los íconos enmascarables con https://maskable.app/ a partir del archivo «icono2048.png».

  14. Coloca el archivo favicon.ico en la carpeta /public del proyecto.

  15. Coloca los otros íconos en la carpeta /public/img y asegúrate de que estén declarados en el archivo /public/site.webmanifest.

  16. El proyecto usa algunas librerías ya existentes para realizar algunas partes del proyecto. Ya están incluidos en el archivo zip, pero a continuación se indica como se incluyeron.

    Ungap custom elements
    Se descarga el archivo es.js del repositorio https://github.com/ungap/custom-elements y se coloca en la carpeta /public/ungap del proyecto
    material-tokens
    Se descarga el repositorio https://github.com/material-foundation/material-tokens y copia el contenido de la cerpeta css a la carpeta /public/material-tokens/css del proyecto, sustituyendo todo el contenido de esta última carpeta. A los temas les faltan algunos tokens más nuevos, por lo que debes hacer el siguiente paso.

  17. Para cambiar los colores, entra al sitio https://material-foundation.github.io/material-theme-builder/, selecciona los colores de tu aplicación, haz clic en Pick your fonts →. Elige font Roboto, haz clic en Export theme →. Haz clic en Export y selecciona Web (CSS) para descargar el zip que contiene los estilos que generan los colores. Descompacta el zip y copia los archivos de la carpeta css a la carpeta /public/material-tokens/css del proyecto, sobreescribiendo los archivos dark.css, para el tema osciro y light.css para el tema claro.

  18. El archivo /public/sw.js tiene una lista de los archivos que se instalan. Puedes generar la lista abriendo una terminal en Visual Studio Code e introducir la orden
    node generar-listado-sw.js
    se genera el archivo /lista_archivos_sw.txt con el listado que se puede copiar al archivo /public/sw.js.

  19. Para depurar localmente tu aplicación, teclea en la terminal
    firebase emulators:start
    Lo puedes ver en la dirección http://localhost:5000. Para detener el servidor local, en la terminal debes presionar Ctrl+C En el siguiente enlace se muestra como probar la aplicación. La forma de levantar el servidor es diferente, pero la forma de usar el navegador es la misma. Prueba tu PWA.

  20. Cada vez que vayas a publicar cambios, debes modificar el valor de VERSION en el archivo /public/sw.js para poder ver los cambios en el navegador.

  21. Cuando desarrolles, es incómodo modificar la versión cada que realizas cambios; en vez de ello desinstala la app:

    1. Abre las herramientas de depuración haciendo clic derecho en la página y selecciona Inspeccionar (o Inspect si aparece en inglés).

    2. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamoento (o Storage en inglés). Cliquea Borrar datos del sitio.

    3. Recarga la app, de preferencia haciendo clic derecho en el ícono de volver a cargar la página Ïmagen del ícono de recarga y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página Ïmagen del ícono de recarga. Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.

    4. Tanbién puedes usar la combinación de teclas Ctrl+Mayúsculas+r para forzar que se actualice temporalmente el navegador en caso de que no se vean los cambios.

    5. En la Pestaña Aplicación (o Application en inglés) selecciona Archivo de manifiesto (o Manifest file en inglés). Esta herramienta analiza la estructura del archivo de manifiesto y te indica si hay un error.

    6. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamiento en caché (o Cache storage en inglés). Aquí puedes revisar si el caché de la aplicación se llenó correctamente. En caso de que esté vacío, es que hubo algún error durante la carga y la app se ejecuta más lenta.

    7. El archivo .htaccess Solo se utiliza en servidores compatibles con apache, como Ngnx o infinity free. Sirve para quitar el cache de http y declarar el mime type de los archivos .manifest

    8. Para publicar tu aplicación, teclea en la terminal
      firebase deploy
      Te va a indicar la dirección para ver tu sitio en internet.

    9. Si quieres cerrar tu sesión de deasarrollo, teclea en la terminal: firebase logout

    10. Instala y usa tu PWA en Windows. Aunque en este video se recomienda usar Edge, al momento de actualizar el contenido, la opción más recomendada es Chrome para que te muestre las descripciones y las capturas de pantalla.

    11. Instala y usa tu PWA en Android. Al momento de actualizar las notas, tal vez no te aparezca el botón para instalar y tengas que seleccionar la acción de agregar a la pantalla principal que aparece en el menú de extensión de Chrome.

    12. Instala y usa tu PWA en iOS (iPhone y iPad).

skip_previous skip_next