Hackschool: Progressive Web Apps

Progressive Web Apps (PWA): 2015 von Google in Umlauf gebracht, ist es heute eines der prominentesten Buzzwords im Bereich der Webentwicklung. Sie versprechen Offlinefähigkeit, sollen installierbar sein, können Push-Benachrichtigungen und einiges mehr. Doch was steckt wirklich dahinter? Was gibt es bei der Entwicklung zu beachten und wie sieht die Unterstützung solcher PWAs auf verschiedenen Plattformen & Browsern aus?

Steffen Jahr möchte in dieser Hackschool an praktischen Beispielen zeigen, worum es sich bei PWAs handelt und welche Möglichkeiten bei der Entwicklung einer Webanwendung zur Verfügung stehen, um die versprochenen Features zu unterstützen. Zum Einsatz kommen die modernen Webtechnologien HTML5, CSS3 und JavaScript.

Transcript

1. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Steffen Jahr @steffenjahr steffen.jahr@thinktecture.com
2. Hackschool Karlsruhe Progressive Web Apps: Make the web native! Who is speaking? Steffen Jahr Software Developer @ Thinktecture AG ! steffen.jahr@thinktecture.com " @steffenjahr # https://steffenjahr.de
3. • Native development • One programming language per platform • Android: Java • iOS: Objective-C • Windows Phone: C# Progressive Web Apps: Make the web native! Hackschool Karlsruhe App development at the beginning (Source: https://www.ifixit.com/Device/iPhone_1st_Generation)
4. • Cross Platform Development • HTML5, JavaScript & CSS3 • Write once, run anywhere! Progressive Web Apps: Make the web native! Hackschool Karlsruhe App development today (Source: http://view.ionic.io/phones.png)
5. What’s next? Progressive Web Apps: Make the web native! Hackschool Karlsruhe App development in the future ?
6. • 669k Apps in Windows Store (phones and tablets included) • 29k Apps in Mac App Store • Native development • C# • Swift • Objective-C • Electron app • HTML5 • CCS3 • JavaScript Progressive Web Apps: Make the web native! Hackschool Karlsruhe What about desktop?
7. • No difference between website or app • Apps can be installed directly from browser • One programming language for all platforms • Access to native device resources Progressive Web Apps: Make the web native! Hackschool Karlsruhe What about the future?
8. The answer! • Defined by Google in 2015 • No new technology to develop applications • No new programming language needed • Describes a type of applications • Installable • Offline • Push Notifications • And much more… Progressive Web Apps: Make the web native! Hackschool Karlsruhe Progressive Web Apps
9. Properties Progressive Web Apps: Make the web native! Hackschool Karlsruhe Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
10. A real world application • Twitter Lite (introduced April 2017) • Push Notifications • Responsive • Offline • Safe • Automatic Updates • https://lite.twitter.com/ Progressive Web Apps: Make the web native! Hackschool Karlsruhe Progressive Web Apps (Source: https://lite.twitter.com/)
11. A demo project • Demo Progressive Web App • Angular with Angular CLI • Responsive • Service Worker • Offline • Push Notifications • Installable • Online: https://pwa-wishlist.herokuapp.com • Repo: https://github.com/thinktecture/pwa-wishlist Progressive Web Apps: Make the web native! Hackschool Karlsruhe PWA Wishlist
12. Let’s build a foundation • Frame of the application • Cached • Fast loading time • Content is loaded dynamically • Minimal HTML, CSS and JavaScript Progressive Web Apps: Make the web native! Hackschool Karlsruhe App-Shell (Source: https://developers.google.com/web/updates/2015/11/app-shell)
13. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo
14. • Single Page Applications = SPA • Only one page that is loaded only once • Content is replaced dynamically • No reload on links • Famous frameworks: • Angular • React • Vue.js Progressive Web Apps: Make the web native! Hackschool Karlsruhe Excursion: Single-Page Applications
15. • Lives in its own JavaScript file • Has its own thread to prevent UI blocking • Background tasks • No DOM manipulation • Can communicate with the application • Send messages with postMessage() • Proxy between app and network • Have to be installed • Available: https://jakearchibald.github.io/isserviceworkerready/ Progressive Web Apps: Make the web native! Hackschool Karlsruhe Service Worker
16. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Service Worker Service Worker Internet Website HTML/JS
17. Lifecycle Progressive Web Apps: Make the web native! Hackschool Karlsruhe Service Worker Installing Parsed Error Activated Idle Terminated fetch/ message
18. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo
19. Security first! • Progressive Web Apps require HTTPS • Only localhost is allowed for development • Security is very important because of Service Worker power • Service Worker can affect the application • Service Worker has access to network traffic Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Safe”
20. • Developing gradually • Features depending on browser support • Check for feature support: https://caniuse.com • Browser with the best support: Google Chrome • No Service Worker support (yet): Internet Explorer, Edge, Safari Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Progressive”
21. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo
22. • One layout for all devices • Phone • Tablet • Desktop • Layout reacts on resizing • Implementation with CSS3 Media Queries or CSS frameworks (that use Media Queries) • Media Queries: https://github.com/eduardoboucas/include-media • Bootstrap • Foundation • Material Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Responsive”
23. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo
24. • How to differ between a website and a Progressive Web App • Idea: Define Metadata for the application • Solution: Manifest.json • Requirement for more Progressive Web App features • Linked in index.html • Search machines can differ between website and app Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Discoverable”
25. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo
26. • Usage of native APIs • Audio • Camera • Storage • Location • No reload on site navigation • Usage of app shell • Fast loading time • Dynamic content • Development: Mobile first Progressive Web Apps: Make the web native! Hackschool Karlsruhe “App-Like”
27. • Service Worker is always up-to-date • Caches will be refreshed during update • Respects max-age of the Service Worker script • Service Worker will be reloaded every 24h at least Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Fresh”
28. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo
29. • App is available offline • Difference between app and data • App can be cached in Cache Storage through Service Worker • Data should be cached in a local storage (LocalStorage, IndexedDB) Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity Independent”
30. Offline strategies • Cache only • Network only • Cache, falling back to network • Cache & network race • Network falling back to cache • Cache then network • Generic fallback • https://jakearchibald.com/2014/offline-cookbook/ Progressive Web Apps: Make the web native! Hackschool Karlsruhe ”Connectivity Independent”
31. Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity independent” App Cache Storage Database Server Internet fetch HTTP Service Worker
32. Fetch-API • No usage of XMLHttpRequest • Fetch API is more powerful • Usage of Cache API • Promise based • No-CORS-Requests if server doesn’t support CORS • Streaming responses • Abort requests • Report progress • Helps Service Worker to act as proxy between app and network • Service Worker uses API to respond network requests from cache Progressive Web Apps: Make the web native! Hackschool Karlsruhe ”Connectivity Independent”
33. Browser storage • Used to store app data • Different types • Local Storage (only few MB) • Only key – value • Service Worker has no access to Local Storage • IndexedDB (depends on browser) • More powerful then Local Storage • Provides indexes • Has own query language • Supports transactions Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity Independent”
34. Data Sync • How is data synced with the server? • Sync in the app • Sync on interval • Sync on action • Sync within the app can crash the application Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity Independent”
35. The Progressive Web App way to sync data • Use of Sync API • Available in Service Worker • Syncs data in Service Worker instead of the application • Two types of sync: • Sync • Periodic sync • Periodic sync is not implemented yet • Sync API is only implemented in Google Chrome Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Connectivity Independent”
36. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo
37. Please come back • Bring back users to the application • Progressive Web Apps can use notifications • Look like native app notifications • Also notifications on desktop • App needs authorization for notifications Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Re-engageable”
38. Push API • Service Worker can receive push data from the server • Supported by: • Google Chrome • Mozillla Firefox • Every Browser has its own Push Service • Chrome: Firebase Cloud Messaging • Firefox: Mozilla Push Service • Push messages only can be received from this Push services (yet) Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Re-engageable”
39. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo
40. • Installable without App Store • Browser shows banner to install • Needs information in Manifest.json • Icon (144x144) • Name • User has visited site at least twice, with at least five minutes between visits • Installable depends on Service Worker Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Installable”
41. • App is linkable because it is a web application • State of the application is controlled by URL • https://pwa-wishlist.herokuapp.com/#/features • Very complex to implement in conventional desktop applications Progressive Web Apps: Make the web native! Hackschool Karlsruhe “Linkable”
42. • Web Share API • Share data with other applications • Only available in Chrome Beta for Android • Web Share Target API • Make your application a share target • Payment Request API • Start payment request • Only available in Edge and Chrome for Android • Web Bluetooth API • Interact with bluetooth devices • Only available in Chrome Progressive Web Apps: Make the web native! Hackschool Karlsruhe More APIs
43. Progressive Web Apps: Make the web native! Hackschool Karlsruhe Demo
44. Advanced tools for Progressive Web Apps • sw-toolbox • Provides common caching strategies for dynamic data (API Calls) • https://github.com/GoogleChrome/sw-toolbox • sw-precache • Includes sw-toolbox • Creates Service Worker with filled caches for static files (HTML, CSS, JavaScript, images, …) • Also provides common caching strategies • https://github.com/GoogleChrome/sw-precache Progressive Web Apps: Make the web native! Hackschool Karlsruhe Tools
45. Lighthouse • Tool from Google • Chrome-Extension or Node module • Checks different indicators if your app works like a Progressive Web App • Service Worker • Performance • App-Like • HTTPS Progressive Web Apps: Make the web native! Hackschool Karlsruhe Tools
46. Progressive Web Apps with Angular • Mobile Toolkit • Not up-to-date • Alpha version • @angular/service-worker • Creates a Service Worker • Push Notifications • Caching • @angular/app-shell • Not up-to-date • Combines client and server side rendering Progressive Web Apps: Make the web native! Hackschool Karlsruhe Excursion: Angular
47. • Progressive Web Apps can be the future • Depends on support of browser companies • Especially Apple has done nothing for Service Workers • Payment has to be solved • No App Stores === No payment • Payment Request API can be the right way • Google and Microsoft are pushing hard! • New APIs are coming Progressive Web Apps: Make the web native! Hackschool Karlsruhe A glance across the border
48. • Livin’ On The Edge • Browser support is not optimal • Great way to extend current applications • Progressive Web Apps can be built for Android devices • Apple is forced to act because of Androids overwhelming market share Progressive Web Apps: Make the web native! Hackschool Karlsruhe Summary
49. Thank you! Questions? Repository https://github.com/thinktecture/pwa-wishlist https://github.com/steffenjahr/service-worker-demo Contact @steffenjahr steffen.jahr@thinktecture.com