WTF is PWA?

Slides from the DevoxxUK 2018 presentation by Alan Semenov that covers the basics of Progressive Web Applications

Transcript

1. #YearOfPWA @AlanSemenov WTF is PWA? Alan Semenov @AlanSemenov http://webagility.com/authors/alan-semenov
2. #YearOfPWA @AlanSemenov WTF is PWA? Alan Semenov • Development Manager at Enonic (Oslo, Norway) • Occasional Blogger at Webagility • Organiser of LondonPWA and OsloPWA meetups
3. #YearOfPWA @AlanSemenov Mobile Apps • Native citizens on any mobile device (naturally) • Almost always work offline • Direct access to device hardware • Shipped to end users via application stores • Built by mobile developers using specific programming languages and tools • Can be added to device’s Home Screen
4. #YearOfPWA @AlanSemenov Mobile Apps - Cons Discoverability • Can be downloaded and updated only via app stores • Not indexed by search engines • Cannot be shared via direct link • Difficult to reuse the code • Limited by the platform they are developed for • Excruciating process of getting app-roved : Low Maintenance : High
5. #YearOfPWA @AlanSemenov Mobile Apps - Cons H E A V Y 500+ Mb 245 Mb 250 Mb 210 Mb
6. #YearOfPWA @AlanSemenov Web Apps • No download required - just open URL • Are essentially web sites (with interaction capabilities) • Easily reusable code (HTML / CSS / Javascript) • Work across all platforms… but inside the browser • Indexed by search engines and easily discoverable • No approval needed to make your app available • They’re lightweight
7. #YearOfPWA @AlanSemenov Web Apps - Cons • They don’t look like mobile apps • Poor access to native device hardware • They require Internet access and almost never work offline • Network performance affects user experience • Not safe (anyone can build and deploy a web app)
8. #YearOfPWA @AlanSemenov Is it Native Apps vs Web Apps then?
9. #YearOfPWA @AlanSemenov Is it Native Apps vs Web Apps then? Native Web App
10. #YearOfPWA @AlanSemenov WEB DEVELOPERS C A N C R E AT E M O B I L E A P P S FINALLY
11. #YearOfPWA @AlanSemenov WTF is PROGRESSIVE WEB APPLICATIONS
12. #YearOfPWA @AlanSemenov Concept suggested in 2015 by "Progressive Web Apps are experiences that combine the best of the web and the best of apps.”
13. #YearOfPWA @AlanSemenov ✓ Progressive Works on every platform/bandwidth ✓ Responsive Will fit any device ✓ Works Offline Doesn’t depend on connectivity ✓ Native Look & Feel Native-like interaction and navigation ✓ Fresh Service Worker keeps the app up-to-date ✓ Safe Always served via HTTPS ✓ Discoverable Are indexed by Web Search Engines ✓ Engaging Engage enduser with features like Push Notifications ✓ Installable Can be added to device’s home screen ✓ Linkable Can easily be shared via URL and don’t need an app store
14. #YearOfPWA @AlanSemenov ✓ Progressive Works on every platform/bandwidth ✓ Responsive Will fit any device ✓ Works Offline Doesn’t depend on connectivity ✓ Native Look & Feel Native-like interaction and navigation ✓ Fresh Service Worker keeps the app up-to-date ✓ Safe Always served via HTTPS ✓ Discoverable Are indexed by Web Search Engines ✓ Engaging Engage enduser with features like Push Notifications ✓ Installable Can be added to device’s home screen ✓ Linkable Can easily be shared via URL and don’t need an app store
15. #YearOfPWA @AlanSemenov S E RVI C E W O R K E R is a of a
16. #YearOfPWA @AlanSemenov Service Worker is a programmable proxy-server that makes sure you NEVER see THIS:
17. #YearOfPWA @AlanSemenov Service Worker // Names of the two caches used in this version of the service worker. // Change to v2, etc. when you update any of the local resources, which will // in turn trigger the install event again. const PRECACHE = 'precache-v1'; const RUNTIME = 'runtime'; // A list of local resources we always want to be cached. const PRECACHE_URLS = [ 'index.html', ‘…’ ]; // The install handler takes care of precaching the resources we always need. self.addEventListener('install', event => { event.waitUntil( caches.open(PRECACHE) .then(cache => cache.addAll(PRECACHE_URLS)) .then(self.skipWaiting()) ); }); // The fetch handler serves responses for same-origin resources from a cache. // If no response is found, it populates the runtime cache with the response // from the network before returning it to the page. self.addEventListener('fetch', event => { // Skip cross-origin requests, like those for Google Analytics. if (event.request.url.startsWith(self.location.origin)) { event.respondWith( caches.match(event.request).then(cachedResponse => { if (cachedResponse) { return cachedResponse; } return caches.open(RUNTIME).then(cache => { return fetch(event.request).then(response => { // Put a copy of the response in the runtime cache. return cache.put(event.request, response.clone()).then(() => { is just a JavaScript file
18. #YearOfPWA @AlanSemenov Registration of a Service Worker if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); }); }
19. #YearOfPWA @AlanSemenov Test Service Worker
20. #YearOfPWA @AlanSemenov WEB MA N I F EST
21. #YearOfPWA @AlanSemenov Web Manifest { "short_name": "Devoxx", "name": “DevoxxUK 2018", "icons": [ { "src": "launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" }, { "src": "launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html", "display": "standalone", "orientation": "landscape" }
22. #YearOfPWA @AlanSemenov Web Manifest <link rel="manifest" href="/manifest.json">
23. #YearOfPWA @AlanSemenov Test Web Manifest
24. #YearOfPWA @AlanSemenov A UDI T
25. #YearOfPWA @AlanSemenov
26. #YearOfPWA @AlanSemenov B R O W S E R S UP P O RT
27. #YearOfPWA @AlanSemenov
28. #YearOfPWA @AlanSemenov
29. #YearOfPWA @AlanSemenov
30. #YearOfPWA @AlanSemenov
31. #YearOfPWA @AlanSemenov WHY?
32. #YearOfPWA @AlanSemenov CONVERSION https://www.pwastats.com/ (it’s always about)
33. #YearOfPWA @AlanSemenov https://enonic.com/pwa.rocks PWA Resources: Thank You! Stay Progressive