Progressive Web Apps
0 likes57 views
The document discusses progressive web apps (PWAs), including their benefits, key concepts like progressive enhancement and the service worker lifecycle, and how to implement features like push notifications, the app manifest, and make PWAs discoverable in app stores. Some key takeaways are that PWAs aim to provide an app-like experience to users regardless of context, use progressive enhancement to ensure functionality for all, and leverage features like the service worker to provide functionality even offline.
![{
"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](https://image.slidesharecdn.com/pwa-netconfcl-181203184359/85/Progressive-Web-Apps-58-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-netconfcl-181203184359/85/Progressive-Web-Apps-68-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-netconfcl-181203184359/85/Progressive-Web-Apps-71-320.jpg)
Progressive Web Apps
- 1. SOUTHWORKS
- 21. PWAES
- 35. PROGRESSIVEENHANCEMENTWEB type="email" Deltas de experiencia 1. ¿Soporta input para email? 2. ¿Algoritmo de validación implementado? 3. ¿Teclado virtual?
- 36. PROGRESSIVEENHANCEMENTWEB required Deltas de experiencia 1. ¿Soporta validación HTML?
- 37. PROGRESSIVEENHANCEMENTWEB aria-required="true" Deltas de experiencia 1. ¿El navegador expone la propiedad aria-required ? 2. ¿Tiene implementado la asistencia para aria-required?
- 38. required validation email validation dedicated keyboard PROGRESSIVEENHANCEMENTWEB Capabilities Experience text input required notification
- 46. PWAOAPPNATIVA?
- 50. PWAES Discoverable Network Independent Segura Re-engageable Progressive Responsive App-Like Fresh
- 55. PWAES Discoverable Instalable Network Independent Segura Re-engageable Progressive Responsive App-Like Fresh
- 56. PWAES Discoverable Instalable Linkeable Network Independent Segura Re-engageable Progressive Responsive App-Like Fresh
- 58. { "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
- 59. SERVICEWORKER
- 65. 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
- 66. CICLODEVIDA
- 67. CICLODEVIDA
- 68. 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
- 69. CICLODEVIDA
- 70. CICLODEVIDA
- 71. 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
- 72. CICLODEVIDA
- 73. CICLODEVIDA
- 74. 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
- 76. CACHEAPIS
- 78. REQUEST (URL) RESPONSE https://weather.app/index.html <!doctype html> https://weather.app/script.js console.log('test') . . .
- 81. 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
- 82. 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
- 83. 1. self.addEventListener('notificationclick', event => { 2. event.notification.close(); 3. event.waitUntil(clients.openWindow('https://weather.app/advisory')); 4. } sw.js
- 87. PWASEN ELSTORE
- 88. ALGUNOSNÚMEROS
- 90. SITIOSYTOOLS