Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps - Closing the Web-Gap to Mobile

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

Frank Jogeleit

November 14, 2019
Tweet

More Decks by Frank Jogeleit

Other Decks in Programming

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. Project Fugu • https://goo.gle/fugu-api-tracker • Font Table -> local installed

    fonts • Periodic Background Sync • User Idle detection • … many more! Fugu API Tracker
  14. 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