Progressive Web Apps - .NET Conf CO 2017
•
0 recomendaciones•415 vistas
A short introduction to Progressive Web Apps shown in .NET Conf Co 2017. The idea was to understand what is a PWA, what is needed to implement one and show some examples.
Recomendados
Recomendados
Más contenido relacionado
Similar a Progressive Web Apps - .NET Conf CO 2017
Similar a Progressive Web Apps - .NET Conf CO 2017 (20)
Más de Nicolás Bello Camilletti
Más de Nicolás Bello Camilletti (16)
Último
Último (20)
Progressive Web Apps - .NET Conf CO 2017
- 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 WA Windows 8
- 10. WEBAPPSENWINDOWS Pinned Sites Windows 7 Packaged WA Windows 8 Hosted Web Apps Windows 10
- 11. WEBAPPSENWINDOWS Pinned Sites Windows 7 Packaged WA Windows 8 PWA 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 Gratis App core iPhone iPad Android Phone Android Tablet Windows MacOS Web Other PWA-capable
- 27. PRINCIPIOSDEPWA
- 30. PWAES
- 40. ¿QUÉESPROGRESSIVEENHANCEMENT? A veces, mono es la única opción
- 45. PROGRESSIVEENHANCEMENTWEB type="email" Deltas de experiencia 1. ¿Soporta input para email? 2. ¿Algoritmo de validación implementado? 3. ¿Teclado virtual?
- 47. PROGRESSIVEENHANCEMENTWEB aria-required="true" Deltas de experiencia 1. ¿El navegador expone la propiedad aria-required ? 2. ¿Tiene implementado la asistencia para aria-required?
- 48. required validation email validation dedicated keyboard Capabilities Experience text input required notification PROGRESSIVEENHANCEMENTWEB
- 56. PWAOAPPNATIVA?
- 60. PWAES Discoverable Network Independent Segura Re-engageable Progressive Responsive App-Like Fresh
- 65. PWAES Discoverable Instalable Network Independent Segura Re-engageable Progressive Responsive App-Like Fresh
- 68. PWAES Discoverable Instalable Linkeable Network Independent Segura Re-engageable Progressive Responsive App-Like Fresh
- 71. { "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" } WEBAPP MANIFEST Meta Tags 2.0
- 72. SERVICE WORKER Actua como servidor proxy entre la web app, el browser y la conexión (cuando está disponible)
- 73. Solo HTTPS No tiene acceso al DOM Solo request asyncronicos Ejecuta separado del sitio Un service worker por alcance SERVICE WORKERS PROPIEDADES
- 77. 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
- 78. CICLODEVIDA
- 79. CICLODEVIDA
- 80. 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
- 81. CICLODEVIDA
- 82. CICLODEVIDA
- 83. 1. self.addEventListener('activate', event => { 2. var keepList = ['assets-v1']; 3. 4. event.waitUntil( 5. caches.keys().then(cacheNameList => { 6. return Promise.all(cacheNameList 7. .map(cacheName => { 8. if (keepList.indexOf(cacheName) === -1) { 9. return caches.delete(cacheName); 10. } 11. })); 12. }) 13. ); 14. } sw.js
- 84. CICLODEVIDA
- 85. CICLODEVIDA
- 86. 1. self.addEventListener('fetch', event => { 2. event.respondWith( 3. caches.match(event.request).then(response => { 4. return response || fetch(event.request) 5. .catch(() => { 6. return caches.match('/fallback.htm1'); 7. }); 8. }) 9. ); 10. } sw.js
- 88. CACHEAPIS
- 90. CACHES API ANATOMY REQUEST (URL) RESPONSE https://wea.app/index.html <!doctype html> https://wea.app/script.js console.log('hi') . . . key / value storage
- 91. Cache API URL-addressable resources -----or ----- Indexed DB Other data
- 93. 1. navigator.serviceWorker.register('sw.js') 2. .then(reg => { 3. return reg.pushManager.getSubscription() 4. .then(subscription => { 5. if (subscription) return subscription; 6. return registration.pushManager.subscribe({ 7. userVisibleOnly: true, 8. applicationServerKey: appPubkey 9. }); 10. }); 11. }) index.html
- 94. 1. self.addEventListener('push', event => { 2. var payload = event.data ? 3. event.data.text() : 'no payload'; 4. event.waitUntil( 5. registration.showNotification('WEATHER ADVISORY', { 6. body: payload, 7. icon: 'icon.png' 8. }) 9. ); 10. } sw.js
- 95. 1. self.addEventListener('notificationclick', event => { 2. event.notification.close(); 3. event.waitUntil(clients 4. .openWindow('https://wea.app/advisory')); 5. } sw.js
- 102. 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
- 104. PWASENLOSSTORES app.manifest popula la entrada: 1. name 2. description 3. icons 4. screenshots
- 110. ¿Preguntas?