A short introduction to Progressive Web Apps shown in .NET Conf UY 2017. The idea was to understand what is a PWA, what is needed to implement one and show some examples.

1. 23 al 27 de Octubre 2017.NET Conf UY v2017
Progressive Web Apps
Nicolás Bello Camilletti
Lead Developer
SOUTHWORKS

2. 23 al 27 de Octubre 2017.NET Conf UY v2017

3. PROGRESSIVEWEBAPP
Es un conjunto de conceptos/herramientas/etc.

4. WEBCOMONATIVO
No es un concepto nuevo

5. native web

6. native web

8. WEBAPPSENWINDOWS
Pinned Sites
Windows 7

9. WEBAPPSENWINDOWS
Pinned Sites
Windows 7
Packaged Web Apps
Windows 8

10. WEBAPPSENWINDOWS
Pinned Sites
Windows 7
Packaged Web Apps
Windows 8
Hosted Web Apps
Windows 10

11. WEBAPPSENWINDOWS
Pinned Sites
Windows 7
Packaged Web Apps
Windows 8
Progressive Web Apps
Windows 10
Hosted Web Apps
Windows 10

12. PROGRESSIVEWEBAPP
a.k.a. “PWA”

13. PWA&ANDROID

14. Lyft
ride.lyft.com

15. Lyft
ride.lyft.com

20. BENEFICIOSDEWEBAPPS

21. WEBAPPSANDAN
ENCUALQUIERLUGAR!

24. ONECODEBASETORULETHEMALL…

25. PWAS=MENORCOSTO(&TIEMPO)
App core
iPhone iPad Publicar en App Store
Android
Phone
Android
Tablet Publicar en Play Store
Windows Publicar en Windows Store
MacOS Publicar en Mac App Store
Web Host
Nativa
Es requerido publicar en los App store

26. PWAS=MENORCOSTO(&TIEMPO)
PWA
Publicar en los App store es opcional (o por única vez)
Host
Free
Nativa
Es requerido publicar en los App store
App core
iPhone iPad Publicar en App Store
Android
Phone
Android
Tablet Publicar en Play Store
Windows Publicar en Windows Store
MacOS Publicar en Mac App Store
Web Host
App core
iPhone iPad
Android
Phone
Android
Tablet
Windows
MacOS
Web
Other PWA-capable

27. PRINCIPIOSDEPWA

28. PWASSONSIMPLEMENTEWEBAPPS…

29. PWASSONSIMPLEMENTEWEBAPPS…
¡QUEPROVEENDEUNAEXCELENTE
EXPERIENCIADEUSUARIO!

30. PWAES

31. PWAES
Progressive

32. PROGRESSIVE

33. ¿QUÉESPROGRESSIVEENHANCEMENT?
Mono

34. ¿QUÉESPROGRESSIVEENHANCEMENT?
Stereo

35. ¿QUÉESPROGRESSIVEENHANCEMENT?
Surround Sound

36. ¿QUÉESPROGRESSIVEENHANCEMENT?
5.1 Channel
Surround Sound

37. ¿QUÉESPROGRESSIVEENHANCEMENT?
7.1 Channel
Surround Sound

38. ¿QUÉESPROGRESSIVEENHANCEMENT?
16.2 Channel Surround Sound

39. ¿QUÉESPROGRESSIVEENHANCEMENT?
A veces, mono es
la única opción

40. ¿QUÉESPROGRESSIVEENHANCEMENT?
Objectivo &
tareas principales

41. ¿QUÉESPROGRESSIVEENHANCEMENT?
Capacidades
Experiencia

42. PESEASEGURADEQUELOSUSUARIOS
PUEDANUSARTUPRODUCTO
SINIMPORTARELCONTEXTO.

43. PROGRESSIVEENHANCEMENTWEB

44. PROGRESSIVEENHANCEMENTWEB
type="email"
Deltas de experiencia
1. ¿Soporta input para email?
2. ¿Algoritmo de validación implementado?
3. ¿Teclado virtual?

45. PROGRESSIVEENHANCEMENTWEB
required
Deltas de experiencia
1. ¿Soporta validación HTML?

46. PROGRESSIVEENHANCEMENTWEB
aria-required="true"
Deltas de experiencia
1. ¿El navegador expone la propiedad aria-required ?
2. Assistive tech implementation of aria-required?

47. required validation
email validation
dedicated keyboard
PROGRESSIVEENHANCEMENTWEB
Capabilities
Experience
text input required notification

48. PESEASEGURADEQUELOSUSUARIOS
PUEDANUSARTUPRODUCTO
SINIMPORTARELCONTEXTO.

49. PWAES
Progressive Responsive

50. PWAES
Network
Independent
Progressive Responsive

54. PWAES
Network
Independent
Progressive Responsive App-Like

55. PWAOAPPNATIVA?

56. PWAES
Network
Independent
Progressive Responsive App-Like Fresh

57. PWAES
Network
Independent
Segura
Progressive Responsive App-Like Fresh

58. PWAES
Discoverable
Network
Independent
Segura
Progressive Responsive App-Like Fresh

59. PWAES
Discoverable
Network
Independent
Segura Re-engageable
Progressive Responsive App-Like Fresh

64. PWAES
Discoverable Instalable
Network
Independent
Segura Re-engageable
Progressive Responsive App-Like Fresh

65. LAAPPVAASEGUIRANDANDOENEL
BROWSER.SÓLOPODRÍAHACERMÁSCOSAS
CUANDOSE“INSTALE”.

66. WHATWEBCANDO.TODAY

67. PWAES
Discoverable Instalable Linkeable
Network
Independent
Segura Re-engageable
Progressive Responsive App-Like Fresh

69. {
"lang": "en",
"short_name": "My App",
"name": "My Totally Awesome App",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "img/launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/pwa/?utm_source=homescreen",
"display": "standalone",
"orientation": "portrait",
"background_color": "black"
}
WEBAPPMANIFEST
Meta Tags 2.0

70. SERVICEWORKER
Actua como servidor proxy entre la web
app, el browser y la conexión (cuando
está disponible)

71. Solo HTTPS
No tiene acceso al DOM
Solo se aceptan request asyncronicos
Ejecuta separado del sitio
Un solo service worker por alcance
SERVICE WORKERS
PROPIEDADES

72. PERO…PUEDOUSARLO?

74. 1. if ('serviceWorker' in navigator) {
2. navigator.serviceWorker.register('/service-worker.js')
3. .then(registration => {
4. console.log('Registered:', registration);
5. })
6. .catch(error => {
7. console.log('Registration failed: ', error);
8. });
9. }
index.html

75. CICLODEVIDA

76. Service Worker Lifecycle
Inicia la registraciónInstalling

77. 1. self.addEventListener('install', event => {
2. event.waitUntil(
3. caches.open('static-v1').then(cache => {
4. return cache.addAll([
5. '/',
6. '/index.html',
7. '/styles.css',
8. '/main.js',
9. '/fallback.html'
10. ]);
11. })
12. );
13. }
sw.js

78. Service Worker Lifecycle
Inicia la registraciónInstalling

79. Service Worker Lifecycle
Inicia la registraciónInstalling
Se completó la registraciónInstalled

80. Service Worker Lifecycle
Inicia la registraciónActivating
Inicia la registraciónInstalling
Se completó la registraciónInstalled

81. 1. self.addEventListener('activate', event => {
2. var keepList = ['assets-v1'];
3.
4. event.waitUntil(
5. caches.keys().then(function(cacheNameList) {
6. return Promise.all(cacheNameList.map(function(cacheName) {
7. if (keepList.indexOf(cacheName) === -1) {
8. return caches.delete(cacheName);
9. }
10. }));
11. })
12. );
13. }
sw.js

82. Service Worker Lifecycle
Inicia la registraciónActivating
Ya se pueden escuchar eventosActivated
Inicia la registraciónInstalling
Se completó la registraciónInstalled

83. Service Worker Lifecycle
Inicia la registraciónActivating
Ya se pueden escuchar eventosActivated
Inicia la registraciónInstalling
Se completó la registraciónInstalled
El SW se está reemplazando por otroRedundant

84. 1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. caches.match(event.request).then(response => {
4. return response || fetch(event.request).catch(() => {
5. return caches.match('/fallback.htm1');
6. });
7. })
8. );
9. }
sw.js

85. FETCH!

86. EXPUESTOAJAVASCRIPT
FETCH(),REQUESTYRESPONSE

87. 1. fetch('weather.json')
2. .then(function(response) {
3. if (response.headers.get('content-type') == 'application/json') {
4. return response.json();
5. } else {
6. throw new TypeError();
7. }
8. })
9. .then(processJSON);
index.html

88. 1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. fetch(event.request)
4. );
5. }
sw.js

89. 1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. fetch(event.request)
4. );
5. }
sw.js

90. 1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. fetch(event.request)
4. );
5. }
sw.js

91. 1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. fetch(event.request)
4. );
5. }
sw.js

93. CACHEAPIS

95. CACHES API
ANATOMY
REQUEST (URL) RESPONSE
https://weather.app/index.html <!doctype html>
https://weather.app/script.js console.log('test')
. . .
key / value storage

96. Cache API
URL-addressable resources
-----or -----
Indexed DB
Other data

97. PUSHNOTIFICATIONS

98. 1. navigator.serviceWorker.register('sw.js')
2. .then(reg => {
3. return reg.pushManager.getSubscription().then(subscription => {
4. if (subscription) return subscription;
5. return registration.pushManager.subscribe({
6. userVisibleOnly: true, applicationServerKey: appPubkey
7. });
8. });
9. })
index.html

99. 1. self.addEventListener('push', event => {
2. var payload = event.data ? event.data.text() : 'no payload';
3. event.waitUntil(
4. registration.showNotification('WEATHER ADVISORY', {
5. body: payload,
6. icon: 'icon.png'
7. })
8. );
9. }
sw.js

100. 1. self.addEventListener('notificationclick', event => {
2. event.notification.close();
3. event.waitUntil(clients.openWindow('https://weather.app/advisory'));
4. }
sw.js

101. PROGRESSIVEWEBAPPS
ENWINDOWS

102. ¿COMOHACEUNUSUARIOPARAENCONTRAR
UNAPROGRESSIVEWEBAPP?

103. AHORAMISMO:STORE&BING

104. PROGRESSIVEWEBAPPS
¿¡¿ENWINDOWSSTORE?!?

105. PWASENWINDOWSSTORE
• Presentación activa

106. PWASENWINDOWSSTORE
• Presentación activa
• Ingestión Pasiva
No hacer nada y Microsoft va a agregar tu PWA automaticamente *
* Se puede no hacerlo usando robots.txt

107. PWAINGESTIONPROCESS(PASSIVE)

108. ANULANDOLAINGESTIÓNCONROBOTS.TXT

109. PWASIN
THESTORE
app.manifest
popula la entrada:
1. name
2. description
3. icons
4. screenshots

110. DESDELAPERSPECTIVADELUSUARIO,
UNAPWAVAASERUNAAPP.

111. ¡ANUESTROSUSUARIOSNOLES
INTERESAQUETECNOLOGIAUSAMOS!
Quieren usar nuestra app

112. UNAPWAESSUPERSIMPLEDEHACERY
LOSBENEFICIOSSONIMPORTANTES.

113. BIT.LY/PWA-WORKSHOP-NETCONF
Github: https://github.com/PWA-espanol/workshop

114. ¡MUCHASGRACIAS!
@nbellocam
10/26/17 11423 al 27 de Octubre 2017.NET Conf UY v2017