• En esta lección se presenta una PWA básica.

• Puedes probar el ejemplo en https://gilpgpwa.github.io/.

1. Prueba e instala, de preferencia con Chrome, el sitio https://gilpgpwa.github.io/.

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

3. Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com

4. 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 miapp.

5. Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io

6. Importa el proyecto de GitHub a Visual Studio Code

7. Edita los archivos que desees.

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

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

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

11. Coloca el archivo favicon.ico en la raíz del proyecto.

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

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

14. Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.

15. Prueba tu PWA.

16. Publica tu PWA.

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

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

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

1. Prueba e instala, de preferencia con Chrome, el sitio https://gilpgpwa.github.io/.

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

3. Crea tu proyecto en GitHub pages:

   1. Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com

   2. 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 miapp.

   3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.

   4. En la página Create a new repository introduce los siguientes datos:

      • Proporciona el nombre de tu repositorio debajo de donde dice Repository name *. Debes usar el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io

      • Mantén la selección Public.

      • Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.

      • Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.

      • Cliquea Create repository.

   5. Entra al repositorio y selecciona ⚙️ Settings, luego selecciona 📁 Pages y en la sección Branches selecciona la carpeta donde se ubicará la carpeta. De preferencia selecciona / (root) para que coloques la página en la raíz del proyecto.Si haces cambios, clic en Save.

   6. En la misma pestaña de ⚙️ Settings selecciona ◯ Actions, luego selecciona General y en Actions permissions selecciona el rediobotón Allow xxxx, and select non-xxxx, actions and reusable workflows y abajo la casilla de verificación Allow actions created by GitHub y cliquea el botón Save.

4. Importa el proyecto de GitHub a Visual Studio Code:

   1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.

   2. En Visual Studio Code, usa el botón de la izquierda para Source Control.

      

   3. Cliquea el botón Clone Repository.

   4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.

   5. Selecciona la carpeta donde se guardará la carpeta del proyecto.

   6. Abre la carpeta del proyecto importado.

5. Edita los archivos que desees.

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

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

8. Coloca el archivo favicon.ico en la raíz del proyecto.

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

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

11. Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.

12. Haz clic derecho en index.html, selecciona Open with Live Server y se abre el navegador para que puedas probar localmente el ejemplo.

13. Haz al menos una captura de la ventana de tu aplicación con orientación vertical y otra con orientación horizontal, todas ellas de 320 px como mínimo y 3,840 px como máximo.

14. Coloca las capturas en la carpeta img y asegúrate de que estén declaradas en el archivo site.webmanifest.

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

16. Cuando usas GitHub pages, antes de subir los archivos, no debes modificar el valor de VERSION en el archivo sw.js.

17. Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

    

18. Si usas GitHub pages:

    1. Entra a la página de tu repositorio y abajo a la derecha, selecciona el enlace github-pages.

    2. Se muestran los despliegues realizados. Recarga la página hasta que apareca el mensaje de tu último push con una palomita dentro de un círculo verde.

    3. A partir de este momento, espera al menos 11 minutos para modificar el valor de VERSION en el archivo sw.js y volver a subir el proyecto.

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

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

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

Haz clic en los triángulos para expandir las carpetas

• .htaccess

• archivos.txt

• favicon.ico

• index.html

• instruccionesListadoSw.txt

• jsconfig.json

• site.webmanifest

• sw.js

• css

  • estilos.css

• img

  • icono2048.png

  • maskable_icon.png

  • maskable_icon_x128.png

  • maskable_icon_x192.png

  • maskable_icon_x384.png

  • maskable_icon_x48.png

  • maskable_icon_x512.png

  • maskable_icon_x72.png

  • maskable_icon_x96.png

  • screenshot_horizontal.png

  • screenshot_vertical.png

• js

  • lib

    • registraServiceWorker.js

Versión para imprimir.

html {

 color-scheme: light dark;

 font-family: sans-serif;

}

Versión para imprimir.

const nombreDeServiceWorker = "sw.js"

try {

 navigator.serviceWorker.register(nombreDeServiceWorker)

  .then(registro => {

   console.log(nombreDeServiceWorker, "registrado.")

   console.log(registro)

  })

  .catch(error => console.log(error))

} catch (error) {

 console.log(error)

}

Versión para imprimir.

• Este archivo configura las respuestas del servidor..

• Lo utilizan principalmente servidores como Apache o Nginx.

• Configura el mime type para el archivo de manifiesto y sedhabilita el uso de la cache general de http..

AddType application/manifest+json .webmanifest

ExpiresActive On

Header set Cache-Control "max-age=1, must-revalidate"

• Este archivo ayuda a detectar errores en los archivos del proyecto.

• Lo utiliza principalmente Visual Studio Code.

• No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{

 "compilerOptions": {

  "checkJs": true,

  "strictNullChecks": true,

  "target": "ES6",

  "module": "Node16",

  "moduleResolution": "Node16",

  "lib": [

   "ES2017",

   "WebWorker",

   "DOM"

  ]

}

• En esta lección se presentó la estructura básica de una PWA.