Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(pwa): implementa service worker y manifiest para activar pwa #86

Merged
merged 1 commit into from
Nov 10, 2019

Conversation

marianocodes
Copy link
Contributor

Descripción:
Este pull request habilita un service worker para hacer "caching" de los assets a través ServiceWorkerModule. Esto a su vez convierte la aplicación en un PWA.

Tomar en cuenta:

  • Hay un bug en el app con el modulo AngularFirePerformanceModule en local aparece este error.
    Screen Shot 2019-09-01 at 9 31 32 PMNo lo veo en production. Para evitar que este error impida el registro del service worker, el modulo se configuro para que se registre inmediatamente el app inicia como "workaround".
  • Acabo de notar que el issue fue actualizado y asociado con Crear una lista de recursos en español #73 27 para crear un icono custom. @Splaktar me avisas cuando hay una decision y actualizo el PR :D

Cambios realizados:

  1. Inclusión de Angular Service Worker
  2. Creación de manifest
  3. Actualización del orden de las rutas de más especifico a menos. Esto estaba provocando que el PWA no pudiera hacer "caching" de la pagina "acerca"

¿Como probar el código?:

  • npm run build:prod
  • cd dist/web && npx http-server -c-1 .
  • Abrir una ventana en incognito
  • Abrir los devTools > application > manifest
  • Abrir ir http://127.0.0.1:8080
  • El service worker se debio registrar correctamente
  • Seleccionar la opción de offline he ir al tab de network
  • Refrescar el tab
  • Los assets deben de mostrar fueron cargado del service worker y app de iniciar correctamente

Note: El app al iniciar va a cambiar la ruta a <host>/acerca provocando que cuando se le de "refresh" http-server intente buscar un folder o ruta con el mismo nombre, debido a que el app no esta utilizando hash para manejar las rutas. Solo se debe de borrar el /acerca del url y recargar la pagina para iniciar el app de nuevo.

Pruebas realizadas:
Mismas descritas arriba.

Resultados:

pwa

@marianocodes marianocodes added the mejora Nueva característica o solicitud label Sep 2, 2019
@marianocodes marianocodes self-assigned this Sep 2, 2019
package.json Outdated Show resolved Hide resolved
projects/web/src/app/app.module.ts Outdated Show resolved Hide resolved
projects/web/src/app/app.module.ts Outdated Show resolved Hide resolved
projects/web/src/app/app.module.ts Outdated Show resolved Hide resolved
@Splaktar
Copy link
Member

Perdón por el retraso en la revisión. Tuve que evacuar mi casa durante unos días debido al huracán Dorian.

@marianocodes
Copy link
Contributor Author

Cambios listos!

@@ -0,0 +1,51 @@
{
"name": "Angular Hispano",
"short_name": "NGHispano",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"short_name": "NGHispano",
"short_name": "ng-hispano",

@Splaktar Splaktar requested a review from a team November 10, 2019 17:25
@Splaktar
Copy link
Member

En el futuro, por favor envíe sus cambios a una rama de este repositorio en lugar de a su fork. Esto permite a los encargados de realizar cambios y fusionar el código más rápidamente.

@Splaktar Splaktar merged commit f41c7d1 into angular-hispano:master Nov 10, 2019
@Splaktar
Copy link
Member

Splaktar commented May 7, 2020

@all-contributors please add @mahcr for code

@allcontributors
Copy link
Contributor

@Splaktar

I've put up a pull request to add @mahcr! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
mejora Nueva característica o solicitud
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants