Progressive Web Apps - Closing the Web-Gap to Mobile

PWAs are a valuable way to deliver mobile content and applications. With the newest Features you also have more possibilities and use cases. The presentation shows a subset of this new APIs and how they are used with different examples

Transcript

1. Closing the Web-Gap to Mobile Warum Progressive Web App's immer mehr zur echten alternative zur Native-App werden Frank Jogeleit
 move:elevator GmbH Twitter: @FrankJogeleit
 Github: https://github.com/fjogeleit
2. When is an Website called PWA? • a website which… • … using web technologies to work (load)
 without a network connection • … has a responsive design to work on most devices • … could be installed and has an splash screen for a more native app feeling • … using features like push-notifications, home- screen button, fullscreen / standalone mode PWA explained
3. What is required to call a Website PWA • The PWA is served over HTTPS • ServiceWorker to provide offline support • manifest.json - PWA configuration File • Home-Screen Icon in different sizes (for different devices) • (additional meta-tag for Safari) PWA Requirements
4. PWA nowadays • Basic-support for all major Browser (Safari, Chrome, Firefox) • ServiceWorker • Cache API • Fetch API • New Features (in development / not in for all Browsers available) • Native File Access API / FileHandler API • Web Share (Target) API • Contact Picker API • And many more What has changed
5. Native File Access API • Get access to a selected part of the users FileSystem • Get access to single Files and a whole Folder • Read additional Information of a File with the help of the 
 FileHandler API like Size, Last Modified. Mime Type • Save changed Files back to the FileSystem • Create new Files on the FileSystem in a selected Folder
 • This APIs are available in Chrome (with a origin trial access or flag) • Example: Online Editor http://fugu-edit.web.app/ Input[type=file] war Gestern
6. Web Share (Target) API • Web Share API is a simple API to share Content of your PWA with other Apps or PWA’s like Twitter, Instagram, … • Web Share Target API can used to share external content to your App. • You define your PWA as Share Target over the manifest.json • You can configure how the content ist send • As POST Request with encryption to share images • As GET Request for simple text based informations • You can handle the complete share data processing local with the service worker fetch API • Example: https://qr-code-reader.webdev-jogeleit.de/ Share Buttons everywhere!
7. Contact Picker API • Request permissions to your Contacts • Pick on ore more Contacts and access predefined values from the selected values • Get the result and use it to send SMS / Emails / … or use it to populate a contact form • Example: https://fugu-journal.web.app/ Another way to share content or prepopulate a contact form
8. Background Fetch API • See download progress in your notifications • Start multiple downloads and pause them while offline • Example: https://bgfetch-http203.glitch.me/
 
 (https://glitch.com/edit/#!/bgfetch-http203) easier download management
9. WebAssembly ? • Believe it or not, you can’t do everything with JS but now you have a second chance with WebAssembly • Compile your Image Codec of Choice to WebAssembly to do crazy image compression
 on the Web
 
 Example: https://squoosh.app/ • Add missing browser functions like text detection / barcode scanner 
 
 Example: https://io.perceptiontoolkit.dev/ There is no JS Solution? Lets try WebAssembly
10. But they say you can’t ship your PWA in the Play- or App Store! really?
11. TWA - Trusted Web Activity • TWA is a new way to wrap your PWA based on
 Androids „Custom Tabs“ • They are rendered from the Browser and works the same way like opened in the normal Browser (but in Fullscreen) • TWAs using the same local storage as the Web Browser, so local caches, auth tokens and so on are shared between web and TWA • Your device need a browser with TWA support.
 (Chrome +72) • Android without a supporting Browser has a „Custom Tabs" fallback PWA in the Play Store? No Problem
12. PWA Builder • https://pwabuilder.com is a open source project founded by Microsoft • PWABuilder helps to build and improve your PWA development with code snippets and static analysis • It has also a simple build process to wrap your PWA in a Cordova app, so you can also ship it in the App Store • Additional wrappers for Android and Microsoft are supported TWA for Android but and what’s about the App Store?
13. Whats next?
14. Project Fugu • https://goo.gle/fugu-api-tracker • Font Table -> local installed fonts • Periodic Background Sync • User Idle detection • … many more! Fugu API Tracker
15. Questions?
16. Resources • Native File Access / FileHandler API
 Example: http://fugu-edit.web.app/
 Source Code: https://github.com/chromeos/bridging-the-native-app-gap/tree/master/fugu-edit • Web Share (Target) API - (PWA installation is required)
 Example: https://fugu-journal.web.app/
 Source Code: https://github.com/chromeos/bridging-the-native-app-gap/tree/master/fugu-journal
 
 Example: https://qr-code-reader.webdev-jogeleit.de
 Source Code: https://github.com/fjogeleit/pwa-qr-code-js • Background Fetch API - (PWA installation is required)
 Example: https://bgfetch-http203.glitch.me/
 Source Code: https://glitch.com/edit/#!/bgfetch-http203 • WebAssembly
 Example: https://squoosh.app/
 Source Code: https://github.com/GoogleChromeLabs/squoosh/
 
 Example: https://io.perceptiontoolkit.dev/
 Source Code: https://github.com/GoogleChromeLabs/perception-toolkit
 Examples and Source Code