Qué es el service worker de Angular?

Clase 8 de 31 • Curso de PWA con Angular 2018

Clase anteriorSiguiente clase

Resumen

Service Worker:

Son un archivo mas
Están escritos en JS
Funcionan como un proxy, es decir que interceptan las llamadas en red. Esto es muy importante para las PWA porque te permite mostrar información a tus usuarios sin necesidad de tener internet
Se detienen cuándo no están en uso
Solo funcionan sobre HTTPS
Sus métodos están basados en promesas. --> Curso de Fundamentos de JS

##Ventajas:

Confiabilidad: provee recursos estáticos, dinámicos y extensos desde caché.
Performance: Solamente hace llamados remotos cuando es necesario.
Push notifications: Notificaciones push para re-atraer a tus usuarios.
Te permite crear tu propio sistema de caching.

Ludwring Liccien

student•

Service-Worker es la piedra “Angular” de una PWA

Jesus Sandrea

student•

El ❤️ de PWA

Julio J Yépez

student•

La razón por la que es requisito indispensable ejecutar los ServiceWorkes (en producción) sobre URLs seguras HTTPS es porque con ellos tu aplicación puede tener acceso a funcionalidades e información local en tu navegador, que al ser intercambiadas / transmitidas entre el servidor y tu pc pudieran ser interceptadas y modificadas por desarrolladores inescrupulosos con técnicas de hacking conocidas como MAN (man in the middle), entre otras.

Es un riesgo que se minimiza al exigir a los desarrolladores tener instalados certificados digitales en sus servidores web que aseguren el intercambio de información de manera segura, encriptada y protegida.

Fuente

Alex Eugenio Gavidia Donayre

student•

Interesante

Luis Fernando Chacha Montenegro

student•

Marco Antonio Soria Erickson

student•

Estoy usando angular 7.1.4 y al crear mi app con el comando "ng new pwa --service-worker", por alguna razon no me creo el service worker ni los archivos de configuracion. Despues de una breve googleada vi como puedes agregar los service workers a un proyecto existente con el comando "ng add @angular/pwa --project nombre-de-proyecto" espero le sirva a alguien ;)

Alex Eugenio Gavidia Donayre

student•

Buen aporte

Julio J Yépez

student•

Características de los Service Workers:

Están escritos en Javascript (es simplemente un archivo más)
No tienen acceso al DOM
Funcionan como Proxy
Su ejecución se deteiene cuando no están en uso
Funcionan sólo sobre HTTPS
Sus métodos están basados en Promesas

Ramón Fajardo Fernández

student•

me estoy perdiendo un poco, entonces PWA no me sirve para sustituir una Pagina Web normal, en el caso que no tenga https?

Carlos Enrique Ramírez Flores

student•

Flujo del service Worker

Juan Guillermo Perez Cardozo

student•

se que dice eduardo que sw es el 80% pero nada que empezamos.

Carlos Uriel de Jesus Sánchez González

student•

Service Worker
	Es un script que se ejecuta de fondo, separado del web app, el cual da acceso a caracteristicas que no necesitan la interaccion del usuario
	Escritos en javascript, es simplemente un archivo mas
	No tienen acceso al DOM
	Funcionan como un proxy (controlan como se ejecutan las llamadas a la red)
	Son detenidos cuando no estan en uso
	Funcionan solo sobre HTTPS
	Sus metodos estan basados en promesas
	Confiabilidad
		Provee recursos estaticos, dinamicos y extenos desde cache
	Performance
		Solamente hace llamados remotos cuando es necesario
	Push Notifications
		Implementar notificaciones puch para re-atraer a los usuarios
	Te permite crear tu propio sistema de caching

Emma Estrada

student•

Un Service Worker es un archivo de Javascript que se comunica con el browser y funcionan sobre solo https. Es un intermediario y nos ayuda a interceptar llamadas que se hacen del browser a la nube creando flujos en los que nosotros podamos indicar que hará nuestra aplicación en determinados casos(cuando no hay internet por ejemplo, guardar datos en cache y después indicar que refresque cuando ya exista una conexión a la web).

Mateo Santiago Zapata Maldonado

student•

Un Service Worker es un Proxy, antes de que salga tu Fetch el Service Worker detecta tu Request y puede redireccionarlo ha cia La Cache o Dejarlo seguir a Internet, es eso.

Ramón Fajardo Fernández

student•

me estoy perdiendo un poco, entonces PWA no me sirve para sustituir una Pagina Web normal, en el caso que no tenga https?
Entendí que con PWS lo que conseguíamos es hacer una “WEB” pero podemos generar una app para android o IOS…

Stalin Alvarado

student•

asi es. solo con https

Julio Jaramillo

student•

Un service worker es un script de javascript que controla el flujo de datos en nuestro browser, este puede ser programado para que los datos puedan ser servidos en cache dando como beneficio tener una pagina web con mejor performance y continuar trabajando desde cache. Funcionan solo en HTTPS y en localhost en modo de producción. Los service worker tienen un ciclo de vida que asegura que ningún service worker este encendido si no es utilizado por el sitio web.

Jonnathan Ramiro Juma Jara

student•

un service worker es un archivo que le dice al navegador como se va a comportar la aplicacion

Ivan Diaz

student•

Es buena opción agregar un service worker para crear un cotizador de autos, donde consumes un servicio con catálogos de diversas marcas, modelos y tasas financieras ?

Jesús Olivares Olivares Suarez

student•

Que me recomiendas aprender primero …? IONIC ó PWA…?

Victor Aliaga

student•

depende que quieras construir, este curso te enseña a crear PWA desde tu sitio en Angular, con IONIC lo que construyes son apps hibridas que puedes subir a las diferentes tiendas de apps

Julio J Yépez

student•

Saludos @tetolivares,

Yo diría que aprendieras primero IONIC, ya que con ese framework puedes lograr construir una aplicación completa que incluso puedes compilar luego como una aplicación móvil híbrida como indica @8766dart …

Los requerimientos en general de una aplicación híbrida son menos complicados que los de una PWA, incluso los conceptos fundamentales son los mismos de una aplicación web con HTML5 … agregando plugins en javascript para ampliar funcionalidades.

Mientras que PWA, es un paso más adelante en cuanto a complejidad, por todo este concepto de ServiceWorkers y luego los requisitos de servidor para ponerlos en ejecución (HTTPS, SSL).

Sin embargo, no te desanimes. Una vez que tengas tu aplicación con IONIC, pasarla a una PWA es sólo cuestión de agregar algunos scripts y aplicar lo nuevo que aprendas en este curso.

Técnicamente, cualquier aplicación Web (incluyendo las aplicaciones híbridas creadas con IONIC, Cordova, etc.) pueden ser convertidas a fin de cuenta en PWAs sin mayores complicaciones, una vez que tienes los conocimientos fundamentales para hacerlo.

Julio J Yépez

student•

El Ciclo de vida de un Service Worker.

Qué es el service worker de Angular?

Introducción

¡Vamos a renovar este curso!

Qué son las PWAs?

PWA vs SPA

Setup del Proyecto en Mac, Windows y Linux

Presentando el Editor de Código

Generando nuestro primer PWA

Service Worker

Correr nuestro app en modo de producción

Qué es el service worker de Angular?

Gestión de versiones del Service Worker

Configuración del Service Worker y Caching Policy

Propiciando el Click to Install banner

Estilo

Comprendiendo el concepto de responsividad

Introducción a Angular Material

Instalación de Angular Material

Configuración de Angular Material en el proyecto

Datos Dinámicos

Introducción a Acceso a Datos

Implementando Firebase

Creando un servicio de conexión a Firebase

Creando vista de lista y detalle

Guardando notas en Firebase

Obteniendo notas de Firebase

Editando notas

Implementando Caching

Push Notifications

Implementando Login

Configurando Push Notifications

Cómo instalar curl en Mac, Windows y/o Linux

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Implementando Push Notifications

Cloud Functions

NativeScript: Características Nativas en un Web App con Angular

¿Dónde Aprender Más?

Service Worker: