Descargar para leer sin conexión
![{
"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/75/Progressive-Web-Apps-69-2048.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/75/Progressive-Web-Apps-77-2048.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/75/Progressive-Web-Apps-81-2048.jpg)
Subido porNicolás Bello Camilletti
Progressive Web Apps
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.
Más contenido relacionado
Progressive Web Apps
- 1.
- 2.
- 3. PROGRESSIVEWEBAPP Es un conjuntode conceptos/herramientas/etc.
- 4. WEBCOMONATIVO No es unconcepto nuevo
- 5.
- 6.
- 8.
- 9. WEBAPPSENWINDOWS Pinned Sites Windows 7 PackagedWeb Apps Windows 8
- 10. WEBAPPSENWINDOWS Pinned Sites Windows 7 PackagedWeb Apps Windows 8 Hosted Web Apps Windows 10
- 11. WEBAPPSENWINDOWS Pinned Sites Windows 7 PackagedWeb Apps Windows 8 Progressive Web Apps Windows 10 Hosted Web Apps Windows 10
- 12.
- 13.
- 14.
- 15.
- 20.
- 21.
- 24.
- 25. PWAS=MENORCOSTO(&TIEMPO) App core iPhone iPadPublicar 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 losApp 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.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. ¿QUÉESPROGRESSIVEENHANCEMENT? A veces, monoes la única opción
- 40.
- 41.
- 42.
- 43.
- 44. PROGRESSIVEENHANCEMENTWEB type="email" Deltas de experiencia 1. ¿Soporta inputpara email? 2. ¿Algoritmo de validación implementado? 3. ¿Teclado virtual?
- 45.
- 46. PROGRESSIVEENHANCEMENTWEB aria-required="true" Deltas de experiencia 1. ¿El navegadorexpone la propiedad aria-required ? 2. Assistive tech implementation of aria-required?
- 47. required validation email validation dedicatedkeyboard PROGRESSIVEENHANCEMENTWEB Capabilities Experience text input required notification
- 48.
- 49.
- 50.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 64. PWAES Discoverable Instalable Network Independent Segura Re-engageable ProgressiveResponsive App-Like Fresh
- 65.
- 66.
- 67. PWAES Discoverable Instalable Linkeable Network Independent SeguraRe-engageable Progressive Responsive App-Like Fresh
- 69. { "lang": "en", "short_name": "MyApp", "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 servidorproxy entre la web app, el browser y la conexión (cuando está disponible)
- 71. Solo HTTPS No tieneacceso al DOM Solo se aceptan request asyncronicos Ejecuta separado del sitio Un solo service worker por alcance SERVICE WORKERS PROPIEDADES
- 72.
- 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.
- 76. Service Worker Lifecycle Iniciala 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 Iniciala registraciónInstalling
- 79. Service Worker Lifecycle Iniciala registraciónInstalling Se completó la registraciónInstalled
- 80. Service Worker Lifecycle Iniciala 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 Iniciala registraciónActivating Ya se pueden escuchar eventosActivated Inicia la registraciónInstalling Se completó la registraciónInstalled
- 83. Service Worker Lifecycle Iniciala 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.
- 86.
- 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.
- 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.
- 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.
- 102.
- 103.
- 104.
- 105.
- 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.
- 108.
- 109. PWASIN THESTORE app.manifest popula la entrada: 1.name 2. description 3. icons 4. screenshots
- 110.
- 111.
- 112.
- 113.
- 114.