Progressive Web Apps
•
0 recomendaciones•617 vistas
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.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (17)
Similar a Progressive Web Apps
Similar a Progressive Web Apps (20)
Más de Nicolás Bello Camilletti
Más de Nicolás Bello Camilletti (16)
Último
Último (20)
Progressive Web Apps
- 3. PROGRESSIVEWEBAPP Es un conjunto de conceptos/herramientas/etc.
- 4. WEBCOMONATIVO No es un concepto nuevo
- 5. native web
- 6. native web
- 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
- 13. PWA&ANDROID
- 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
- 30. PWAES
- 32. PROGRESSIVE
- 39. ¿QUÉESPROGRESSIVEENHANCEMENT? A veces, mono es la única opción
- 44. PROGRESSIVEENHANCEMENTWEB type="email" Deltas de experiencia 1. ¿Soporta input para email? 2. ¿Algoritmo de validación implementado? 3. ¿Teclado virtual?
- 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
- 55. PWAOAPPNATIVA?
- 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
- 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
- 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!
- 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
- 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
- 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
- 109. PWASIN THESTORE app.manifest popula la entrada: 1. name 2. description 3. icons 4. screenshots