APLICACIONES WEB PROGRESIVAS ISIS 3710

Transcripción

1 APLICACIONES WEB PROGRESIVAS ISIS 3710

2 Aplicaciones Web Cliente Servidor

3 Aplicaciones Web

4 Aplicaciones Web

5 Aplicaciones Web Lie-Fi

6 Online-first vs. Offline-first Online-first: Fetch de una página en la red, y si este falla se muestra contenido en cache Fetch de una página en la red, y si este falla se muestra página de error que se tiene en cache, o mensaje de error

7 Online-first vs. Offline-first Online-first: Fetch de una página en la red, y si este falla se muestra contenido en cache Fetch de una página en la red, y si este falla se muestra página de error que se tiene en cache, o mensaje de error Offline-first: Header y contenido se toma de cache en el dispositivo, y luego se intenta obtener contenido de la red Header se toma de cache en el dispositivo, y luego se intenta obtener contenido de la red

8

9 Service Workers + Cache

10 Service Worker Online-first: Cliente Servidor

11 Service Worker Online-first: Cliente Servidor

12 Service Worker Online-first: X Cliente Servidor

13 Service Worker Online-first: SW X Cliente Servidor

14 Service Worker Online-first: SW CACHE X Cliente Servidor

15 Service Worker Online-first: SW CACHE X Cliente Servidor

16 Service Worker Offline-first: SW CACHE Cliente Servidor

17 Service Worker Offline-first: SW CACHE Cliente Servidor

18 Service Worker Offline-first: SW CACHE Cliente Servidor

19 Service Worker Offline-first: SW Cliente Servidor

20 Service Worker Offline-first: SW Cliente Servidor

21 Service Worker Offline-first: SW CACHE Cliente Servidor

22 Service Worker Offline-first: SW CACHE Cliente Servidor

23 Service Workers El alcance del service worker es el mismo directorio donde se encuentra el archivo sw.js

24 Service Workers El alcance del service worker es el mismo directorio donde se encuentra el archivo sw.js

25 Service Workers El alcance del service worker es el mismo directorio donde se encuentra el archivo sw.js

26 Service Workers Promesa

27 Service Workers Promesa

28

29

30 Service Workers

31 Service Worker

32 Service Workers

33 Interceptar todas las solicitudes

34 Interceptar todas las solicitudes

35 Interceptar todas las solicitudes

36 Interceptar todas las solicitudes

37 Interceptar todas las solicitudes

38 Interceptar todas las solicitudes. a recursos.jpg

39 Almacenamiento local (Browser) = localstorage + SessionStorage + IndexedDB + Cache

40 Almacenamiento local (Browser)

41 Almacenamiento local (Browser)

42 Almacenamiento local (Browser)

43 Cache

44

45 Estrategias/Patrones

46 Sin cache (Network-only)

47 Cache (Cache -only) SW Cliente Servidor

48 Cache (Cache -only) SW Cliente Servidor

49 Cache (Cache -only) SW CACHE Cliente Servidor

50 Cache (Cache -only) SW CACHE Cliente Servidor

51 Cache (Cache -only) SW CACHE Cliente Servidor

52 Cache (Cache -only) SW CACHE Cliente Servidor

53 Cache (Cache -only) Contenido estático guardado en cache

54 Cache (Cache -only) Contenido estático guardado en cache Ejemplo? Cuándo se guarda en cache?

55 Cache (Cache -only)

56 Cache falling back to network SW CACHE Cliente Servidor

57 Cache, falling back to network SW CACHE X Cliente Servidor

58 Cache, falling back to network SW Cliente Servidor

59 Cache, falling back to network SW CACHE Cliente Servidor

60 Cache, falling back to network SW CACHE Cliente Servidor

61 Cache falling back to network

62 Network falling back to cache SW Cliente Servidor

63 Network falling back to cache SW Cliente Servidor

64 Network falling back to cache SW X Cliente Servidor

65 Network falling back to cache SW CACHE X Cliente Servidor

66 Network falling back to cache SW CACHE X Cliente Servidor

67 Network falling back to cache

68 Network falling back to cache

69 Network falling back to cache

70 Network falling back to cache

71 Generic fallback SW Cliente Servidor

72 Generic fallback SW Cliente Servidor

73 Generic fallback SW X Cliente Servidor

74 Generic fallback SW CACHE Cliente Servidor

75 Generic fallback SW CACHE X Cliente Servidor

76 Generic fallback