B. Hazlo funcionar (con videos)

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

  2. Descarga el archivo /src/pwab.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, pwabase. 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 pwabase

  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. El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.

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

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

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

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

  17. El archivo public/sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.

  18. 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.

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

  20. 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 desplegar 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