Progressive Web Application - Dark Side Path

This is my DevFest Presentation where i've spoke about the new PWA's and how they can lead us to the Dark Side of the Force !

Transcript

5. Stupid world Applications
6. Definition
7. “ Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They're reliable, fast and engaging.
9. What Does that mean ?
10. Let’s Digest a Mobile Application
11. Features !
12. - Works Everywhere | offline in most situations - Push Notifications - Instantly Loaded - Simply Fast - One Tap Away - Looks Great Everywhere
13. Let’s Talk About Modern Web !
14. Service Workers
15. Service Workers The service worker is a generic entry point for event-driven background processing in the Web Platform that is extensible by other specifications. - W3C
17. Hint : Install event is the 1st one -> thing of something creative ! self.addEventListener('install', function(event) { console.log('Hi There !'); }); JS PS : I we don’t listen to the event, it will do nothing, simply pass it to the next one, then to the next one until the Pipe line got filled !
18. self.addEventListener('activate', function(event) { console.log('Activated!', event); }); self.addEventListener('fetch', function(event) { console.log('Let\'s get some Data'); console.log(event.request.url); }); self.addEventListener('push', function(event) { console.log('Waiting for Push MSGs !'); }); JS
19. Offline Experience
21. Hide The chosen ones From the High Order
22. // [*] SW Install State self.addEventListener('install', function(event) { console.log("Install Step, let's cache some files =D"); //[*] Let's cache a bit ! event.waitUntil( caches.open('pwa').then(function(cache) { return cache.addAll([ '/', '/index.html', '/app.js' ]).then(() => self.skipWaiting()); }) JS
23. What just Happened ?
24. Where’s my Chosen ones ?
26. Hero's Resurrection Give me back my files !
27. // [*] SW Fetch Event self.addEventListener('fetch', function(event) { console.log('Let\'s get some Data'); console.log(event.request.url); event.respondWith( caches.match(event.request) .then(response => { return response || fetch(event.request); }) ); }); JS
28. Push Notification ?
29. Why Bother ?
30. FCM Firebase Cloud Messaging
31. Workflow FCM Payload FCM Payload
32. Do We Care About UX
33. Out of Page On Page
34. // [*] Special Out of Page Background Push Notifications const messaging = firebase.messaging(); messaging.setBackgroundMessageHandler(function (payload) { const notificationOptions = { body: payload.data.msg, icon: "images/icon.jpg" } return self.registration.showNotification(payload.data.title, notificationOptions); }); JS firebase-messaging-sw.js This file is required by our firebase-messaging.js lib It is basically a service-worker file ;)
35. // [*] Special Out of Page Background Push Notifications const messaging = firebase.messaging(); messaging.onMessage((notif) => { console.log(notif); let dialog = document.querySelector('dialog'); if (!dialog.showModal) { dialogPolyfill.registerDialog(dialog); } document.getElementById('message').innerHTML = notif.notification.body; document.getElementById('title').innerHTML = notif.notification.title; dialog.showModal(); dialog.querySelector('.close').addEventListener('click', () => { dialog.close(); }); }); JS Showing a Local model on Notification While Being on Page UX is different while being on page
36. One more Thing
37. Hint : Our App is fully Configured to host our Notifications! { “name” : “Application Name”, “gcm-sender_id” : “103953800507” } JSON PS : Add the code above to the manifest.json file (will get there in seconds ;))
39. Make the Web installable
42. https://github.com/houssem-yahiaoui/pwa Share the <3
43. Let the Force Be With Us All @_hcodex @houssem-yahiaoui