Progressive Web Applcations

This is an initial workshop for the Progressive Web Application for the NG/JS Algeria Meetup

Transcript

2. Progressive Web Applications
3. I am Houssem Yahiaoui Telerik Developer Expert | GDG Manager You can find me at : @_hcodex
4. Definition
5. “ 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.
6. What Does That Mean ?
7. Let’s Digest a Mobile Application
8. Features !
9. - Works Everywhere | offline in most situations - Push Notifications - Instantly Loaded - Simply Fast - One Tap Away - Looks Great Everywhere
10. BUT
12. Simply Because they were Created, Conceived to be so Great ! Quote : - Crazy Random Guy
13. App Vs. Web !
14. Some Statistiques !
15. 1,032,xxx,xxx Website According To : internetlivestats.com
16. 4 Billions ++ Phone sold According to internetlivestats
17. Let’s Talk About Modern Web !
18. 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
19. SHOW ME
20. 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 !
21. Actually We Have
22. 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
24. Caching Mechanism … more
25. Browser Cache API
26. self.addEventListener(‘activate', function(event) { event.waitUntil( caches.open('proapp').then( function(cache) { return cache.addAll([ '/', '/index.html', '/index.html?homescreen=1', '/?homescreen=1', '/styles/main.css', '/scripts/main.min.js', '/sounds/airhorn.mp3' ]) }) ); });
28. 1 – Create an Application Over : https://console.cloud.google.com 2 – Enable GCM in your Application.
29. Copy & Keep This
30. Copy & Keep This
31. Hint : Our App is fully Configured to host our Notifications! { “name” : “Application Name”, “gcm-sender_id” : “Project ID” } JSON PS : Add the code above to the manifest.json file (will get there in seconds ;))
32. Hint : This will Do something in our Browser ! navigator.serviceWorker .register('sw.js') .then( function(reg) { console.log(‘Hello There !’, reg); reg.pushManager.subscribe({ userVisibleOnly: true }).then( function(sub) { console.log(‘endpoint:’, sub.endpoint); }); }); JS
33. Hint : Usual We Use a Web Portal | Notification Manager ! curl --header “Authorization: key=App_Secret_Key” --header “Content-Type: application/json” https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"Local ID\"]}" CURL PS : I used CURL (available in Linux/MacOS Easily configured in WinOS) to launch the GCM call !
34. • Exec Pipe Line Install Wait Activate Service Worker fetch push
35. Tooling !
36. SW-Toolbox Just Use Chrome You will Get it ;)
37. WEB M ANAFEST A JSON file that let our Web Application, a Mobile Like one in term of : 1 – Home Screen Presence. 2 – Splash Screen Presence. 3 – Short Naming. 4 – Application Starting Point.
38. { "name": "NG/JS Algeria Meetups", "short_name": "NG/DZ", "background_color": "#3B3838", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [ ] } NG/DZ
40. Use A
41. https://app-manifest.firebaseapp.com/
42. Q/A
43. @_hcodex See ya !