Progressive Web Apps Done Right

Transcript

2. felipe sousa front end developer gdg fortaleza organizer
3. progressive web apps @felipz_sousa done right.
4. progressive web apps done right. @felipz_sousa
10. * responsivity
11. * mobile first * responsivity
12. * mobile first * mobile friendly * responsivity
13. why experience is important?!
15. is ugly
16. isn’t intuitive is ugly
17. Experience
18. progressive web apps
19. Fast Engaging Reliable *
20. Fast 1.
21. Load instantly even in uncertain network conditions.
23. Reliable 2.
24. Respond quickly to user interactions with silky smooth animations and no slow scrolling.
25. Engaging 3.
26. Feel like a natural app on the device, with an immersive user experience.
27. •Instalable
28. •Icons/Splashscreen •Instalable
29. •Icons/Splashscreen •Instalable •Lightweight
30. •Icons/Splashscreen •Instalable •Push Notifications •Lightweight
36. PROGRESSIVE WEB APPS IS ABOUT PROVIDE A BETTER EXPERIENCE TO YOUR USER.
37. Engaging Reliable Fast
38. Web Manifest Engaging Reliable Fast Service Worker
39. Service Workers
40. offline
41. Application Cache
43. <html manifest="example.appcache"> ... </html>
44. CACHE MANIFEST # files index.html cache.html style.css image1.png # Use from network if available NETWORK: network.html # Fallback content FALLBACK: fallback.html
45. A service worker is a script that your browser runs in the background, separate from the web page, enabling features that do not require a web page or user interaction.
46. * HTTPS is a requirement.
49. Background Sync / Push API
50. •Install •Register •Cache Control/Strategies •Update Cache •Listen Fetch Events
51. if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register(‘/sw.js') .then(function(registration) {}) .catch(function(err) {}); }); }
52. var CACHE_NAME = ‘CACHE_NAME_1’; var urlsToCache = [ '/', ‘/style.css’, ‘/script.js’, ‘/imagem.png' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); });
57. event: fetch
58. self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) .then(response => { if(response) return response; return fetch(event.request); }) ) });
59. var CACHE_NAME = ‘CACHE_NAME_1’; var urlsToCache = [ '/', ‘/style.css’, ‘/script.js’, ‘/imagem.png' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); }); self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) .then(function(response) => { if(response) return response; return fetch(event.request); }) ) });
63. Caching strategies
64. •Cache and Update •Cache Only •Cache, update and refresh •Embedded fallback •Network or cache
66. •Cache and Update •Cache Only •Cache, update and refresh •Embedded fallback •Network or cache
67. self.addEventListener('fetch', function(evt) { evt.respondWith(fromCache(evt.request)); evt.waitUntil( update(evt.request) .then(refresh) ); }); function refresh(response) { return self.clients.matchAll().then(function (clients) { clients.forEach(function (client) { var message = { type: 'refresh', url: response.url, eTag: response.headers.get('ETag') }; client.postMessage(JSON.stringify(message)); }); }); }
68. Web Manifest
69. index.html <meta name="apple−mobile−web−app−capable" content="yes"> <meta name="apple−mobile−web−app−title" content="Name App"> <link rel="apple−touch−icon−precomposed" href="path/name.png">
70. The web application manifest is a JSON file that lets you control how the web application or website is displayed to the user in areas that are typically expected to see native applications.
73. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF−8"> <title>My Page</title> <!−− manifest −−> <link rel="manifest" src="/manifest.json"> </head> <body> </body> </html>
74. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [ { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
75. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [ { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
76. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [ { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
77. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [ { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html?app=true”, "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
78. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [ { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html?app=true”, "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
79. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [ { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html?app=true”, "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
84. • Have a registered worker service on your site. • Have a manifest file with the basics configurations. • Be displayed by HTTPS. • Be visited at least twice, with at least five minutes between visits. Banner - Add to Home Screen
87. Fast Engaging Reliable *
88. Fast Engaging Reliable *
89. •Accessibility •Performance •HTML Semantic •Responsivity •Push Notifications
98. Progressive Web Apps are extensible!
102. /felipesousa
103. @felipz_sousa /felipesousa
104. @felipz_sousa /felipesousa felipesousa.me
105. thank’s! @felipz_sousa /felipesousa felipesousa.me