Progressive Web Apps: Make the web native! KarlsruheJS Steffen Jahr @steffenjahr [email protected] 

KarlsruheJS Progressive Web Apps: Make the web native! Who is speaking? Steffen Jahr Software Developer @ Thinktecture AG ! [email protected] " @steffenjahr # https://steffenjahr.de 

§ 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) 

§ 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) 

What’s next? Progressive Web Apps: Make the web native! KarlsruheJS App development in the future ? 

§ 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? 

§ 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? 

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 

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 

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 

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 

§ 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 

§ 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 

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 

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 

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 

§ 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 

Progressive Web Apps: Make the web native! KarlsruheJS Demo 

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 

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 

§ 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 

§ 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 

Thank you! Questions? Repository https://github.com/thinktecture/pwa-wishlist Contact @steffenjahr [email protected]