Progressive Web Apps- Make the web native!

What are PWAs and how can I build one? The term PWA describes the technologies you can use to develop a new type of web application. Push notifications, offline possibilities and installable apps are only a few of the application's properties. But there is more...

Steffen Jahr from Thinktecture will give you a short overview about Progressive Web Apps and their features.

PWA-Wishlist Repo: https://github.com/thinktecture/pwa-wishlist

Transcript

1. Progressive Web Apps: Make the web native! KarlsruheJS Steffen Jahr @steffenjahr steffen.jahr@thinktecture.com
2. KarlsruheJS 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, Swift § Windows Phone: C# Progressive Web Apps: Make the web native! KarlsruheJS App development at the beginning (Source: https://www.ifixit.com/Device/iPhone_1st_Generation)
4. § Cross Platform Development § HTML5, JavaScript & CSS3 § Apache Cordova § Write once, run anywhere! Progressive Web Apps: Make the web native! KarlsruheJS App development today (Source: http://view.ionic.io/phones.png)
5. What’s next? Progressive Web Apps: Make the web native! KarlsruheJS 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 § CSS3 § JavaScript Progressive Web Apps: Make the web native! KarlsruheJS Wait! 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! KarlsruheJS What about the future?
8. The answer! § Term defined by Google in 2015 § No new technology to develop applications § No new programming language needed § Describes a type of application § Installable § Offline § Push Notifications § And much more… Progressive Web Apps: Make the web native! Hackschool Karlsruhe Progressive Web Apps
9. Characteristics Progressive Web Apps: Make the web native! KarlsruheJS Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
10. Please come back § Bring back users to the application § Progressive Web Apps can use notifications § Look like native app notifications § Also notifications on desktop § Application needs authorization for notifications Progressive Web Apps: Make the web native! KarlsruheJS Re-engageable
11. Push API § Service Worker can receive push data from the server § Supported by: § Google Chrome § Mozilla 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! KarlsruheJS Re-engageable
12. § 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 § Available: https://jakearchibald.github.io/isserviceworkerready/ Progressive Web Apps: Make the web native! KarlsruheJS Service Worker Service Worker Internet Website
13. § 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) Progressive Web Apps: Make the web native! KarlsruheJS Connectivity Independent
14. 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 Progressive Web Apps: Make the web native! KarlsruheJS Connectivity Independent
15. 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 Progressive Web Apps: Make the web native! KarlsruheJS Connectivity Independent
16. 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! KarlsruheJS Connectivity Independent
17. § 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! KarlsruheJS Installable
18. Progressive Web Apps: Make the web native! KarlsruheJS Demo
19. Workbox § Provides common caching strategies § Also provides offline analytics (based on Google Analytics) § Available for different build tools § https://workboxjs.org/ Progressive Web Apps: Make the web native! KarlsruheJS Tools
20. Lighthouse § Tool from Google § Chrome-Extension or Node.js module § Checks different indicators if your application works like a Progressive Web App § Service Worker § Performance § App-Like § HTTPS Progressive Web Apps: Make the web native! KarlsruheJS Tools
21. § 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 § Payment Request API § Web Bluetooth API Progressive Web Apps: Make the web native! KarlsruheJS A glance across the border
22. § 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! KarlsruheJS Summary
23. Thank you! Questions? Repository https://github.com/thinktecture/pwa-wishlist Contact @steffenjahr steffen.jahr@thinktecture.com