New buzzword or the next big thing? Progressive Web Apps

Since the term Progressive Web Apps (PWA) appeared they are celebrated as the end of the app stores. They can receive push notifications and available offline. Also, they can sync data in the background and can be installed without any app store. But, how can this be achieved and how does it work? And which technologies are used?

Steffen Jahr shows you an overview about the technical insights of Progressive Web Applications with the aid of a demo application.

Transcript

1. Progressive Web Apps: New buzzword or the next big thing? FrankenJS Steffen Jahr @steffenjahr steffen.jahr@thinktecture.com
2. FrankenJS New buzzword or the next big thing? Progressive Web Apps Who is speaking? Steffen Jahr Software Developer @ Thinktecture AG ! steffen.jahr@thinktecture.com " @steffenjahr # https://steffenjahr.de
3. A short summary New buzzword or the next big thing? Progressive Web Apps FrankenJS Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
4. § Heart of every PWA § Lives in its own JavaScript file § Has its own thread to prevent UI blocking § No access to DOM § Background tasks § Can communicate with the application § Send messages with postMessage() § Proxy between application and network § Has to be installed § Availability: https://jakearchibald.github.io/isserviceworkerready/ New buzzword or the next big thing? Progressive Web Apps FrankenJS Service Worker Service Worker Internet Website
5. Lifecycle New buzzword or the next big thing? Progressive Web Apps FrankenJS Service Worker Installing Parsed Error Activated Idle Terminated fetch/ message
6. § Application is available offline § Difference between offline availability of application and its data § Application can be cached in Cache Storage through Service Worker § Data should be cached in a local storage (LocalStorage, IndexedDB) New buzzword or the next big thing? Progressive Web Apps FrankenJS Connectivity Independent
7. Fetch API § No further usage of XMLHttpRequest § Fetch API is more powerful § Usage of Cache API § Promise-based § Streaming responses § Abort requests § Report progress § Helps Service Worker to act as proxy between application and network § Service Worker uses API to respond network requests from cache New buzzword or the next big thing? Progressive Web Apps FrankenJS Connectivity Independent
8. Browser storage § Used to store application 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 than Local Storage § Provides indices § Has own query language § Supports transactions New buzzword or the next big thing? Progressive Web Apps FrankenJS Connectivity Independent
9. 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 § Microsoft Edge – in development New buzzword or the next big thing? Progressive Web Apps FrankenJS Connectivity Independent
10. Workbox § Provides common caching strategies § Also provides offline analytics (based on Google Analytics) § Available for different build tools § https://workboxjs.org/ New buzzword or the next big thing? Progressive Web Apps FrankenJS Tools
11. § Progressive Web Apps can be the future § Depends on support of browser companies § 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 § Payment Request API § Web Bluetooth API New buzzword or the next big thing? Progressive Web Apps FrankenJS A glance across the border
12. § 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 New buzzword or the next big thing? Progressive Web Apps FrankenJS Summary
13. Thank you! Questions? Repository https://github.com/steffenjahr/frankenjs-pwa Contact @steffenjahr steffen.jahr@thinktecture.com