Progressive Web Apps
0 recomendaciones•638 vistas
El documento detalla las características y beneficios de las Progressive Web Apps (PWAs), destacando su capacidad de funcionar en diversas plataformas y ofrecer una experiencia de usuario fluida. Se discute la implementación de PWAs, incluyendo el uso de service workers y el proceso de registro, así como su integración en tiendas de aplicaciones. Además, se mencionan principios como la mejora progresiva y la importancia de la accesibilidad para asegurar que todos los usuarios puedan utilizarlas sin importar el contexto.
![{
"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](https://image.slidesharecdn.com/pwa-net-conf-ar-2017-171026233051/85/Progressive-Web-Apps-69-320.jpg)
![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](https://image.slidesharecdn.com/pwa-net-conf-ar-2017-171026233051/85/Progressive-Web-Apps-77-320.jpg)
![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](https://image.slidesharecdn.com/pwa-net-conf-ar-2017-171026233051/85/Progressive-Web-Apps-81-320.jpg)
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