.NET Day 19 - Progressive Web Apps for .NET Developers An Overview by Christian Liebel

.NET Day 19 - Progressive Web Apps for .NET Developers An Overview by Christian Liebel

Progressive Web Apps work anywhere from iOS to Windows, run offline and can make use of native functionality such as camera access or geolocation. Thinktecture’s Christian Liebel shows you the technological foundations of this very promising application model, demonstrates how your PWAs can integrate with the Windows Runtime and what the new Chromium-based Edge means for Progressive Web Apps.

E6cffbf3b7a5fbfee4707033ef1636f5?s=128

dotnetday

May 28, 2019
Tweet

Transcript

  1. Christian Liebel @christianliebel Consultant Progressive Web Apps for .NET Developers

    An Overview
  2. Hello, it’s me. Progressive Web Apps for .NET Developers An

    Overview Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Serverless
  3. Progressive Web Apps for .NET Developers An Overview - Das

    PWA-Anwendungsmodell - Web App Manifest - Service Worker und Cache API - Workbox: Toolkit für PWAs - Angular-Unterstützung für PWAs - Natives Look & Feel - Migrieren & veröffentlichen - Payment Request API & Apple Pay www.rheinwerk-verlag.de/4707
  4. Cross-Platform UI Frameworks & .NET Core An Overview Progressive Web

    Apps for .NET Developers ? Xamarin UWP WinForms WPF
  5. PWA! Cross-Platform UI Frameworks & .NET Core An Overview Progressive

    Web Apps for .NET Developers
  6. Google’s Idea • No app stores anymore! • Web App

    = App App • Feature parity: Push notifications, offline availability and more for web & native applications • Backwards compatibility: PWAs can also be run on non-PWA browsers, but with reduced feature set Progressive Web Apps An Overview Progressive Web Apps for .NET Developers
  7. An Overview Progressive Web Apps for .NET Developers Blazor

  8. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch

    API Web Notifications Web Workers Push API Web App Manifest HTTPS PWA Technology Overview An Overview Progressive Web Apps for .NET Developers
  9. The Power of the Modern Web Web Share API Gamepad

    API Payment Request API Generic Sensor API Web Bluetooth API Shape Detection API Web Notifications WebVR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams An Overview Progressive Web Apps for .NET Developers
  10. Platform Support PWA Status Quo An Overview Progressive Web Apps

    for .NET Developers 17 11.1 44 40 4.1 Chrome 40 11.3
  11. Platform Support Microsoft Edge uses Chromium (Blink + V8) in

    the future Edge comes to macOS Improved support for modern web APIs (~ as many as Chrome) Progressive Web Apps for .NET Developers An Overview PWA Status Quo
  12. Progressive Web Apps are not a technology, but a collection

    of features an application must/should support. “Uber Pattern” An Overview Progressive Web Apps for .NET Developers
  13. An Overview Progressive Web Apps for .NET Developers Responsive Linkable

    Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  14. https://pwa.liebel.io Progressive Web Apps for .NET Developers An Overview

  15. Progressive Web Apps for .NET Developers An Overview Responsive

  16. Reference Apps and Internal App States Goal: Directly link to

    applications or application states/views (deep link) Key technology for references in the World Wide Web: Hyperlinks Schema for hyperlinks: Uniform Resource Locator (URL) Hash Anchor (e.g. SPA) https://myapp.com/#/profile/peter.mueller HTML5 History (SPA)/Server Rendered https://myapp.com/profile/peter.mueller Linkable An Overview Progressive Web Apps for .NET Developers
  17. Distinguish Web Apps from Websites How to distinguish websites from

    apps? Idea: Add a file with metadata for apps only Advantage: Apps can be identified by search engines, app store providers etc. Web App Manifest <link rel="manifest" href="manifest.json"> Discoverable An Overview Progressive Web Apps for .NET Developers
  18. manifest.json { "short_name": "PWA Demo", "name": "PWA Demo", "icons": [

    { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Web App Manifest Title Icons Start URL Display Type Age Rating Additional Config Description Related Apps An Overview Progressive Web Apps for .NET Developers
  19. Display Modes Progressive Web Apps for .NET Developers An Overview

    Web App Manifest browser minimal-ui standalone fullscreen
  20. Icon Purposes Progressive Web Apps for .NET Developers An Overview

    Web App Manifest (any) any context (e.g. app icon) badge different space constraints/ color requirements maskable user agent masks icon as required Safe Zone Windows iOS Android
  21. Self publishing Developer publishes the App in the Microsoft Store

    under his own name Auto indexing (beta) High-quality PWAs are automatically discovered, reviewed and published in the store by Bing PWAs & Microsoft Store An Overview Progressive Web Apps for .NET Developers
  22. Benefits PWAs & Microsoft Store An Overview Progressive Web Apps

    for .NET Developers • Analytics (usage duration, installs/uninstalls, crashes etc.) • No storage quotas • Access to UWP APIs • Monetization • Ratings • Featured apps
  23. Progressive Web Apps for .NET Developers An Overview PWAs &

    Microsoft Store
  24. Web App Manifest PWA: Web app and installed app are

    one and the same, so the web app can be directly added to the home screen instead The appearance of the home screen/ programs list icon is defined by the Web App Manifest Installable An Overview Progressive Web Apps for .NET Developers
  25. An Overview Progressive Web Apps for .NET Developers

  26. manifest.json { "short_name": "PWA Demo", "name": "PWA Demo", "icons": [

    { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Installable An Overview Progressive Web Apps for .NET Developers
  27. Web Apps that feel natively Native functionality with HTML5 technologies

    • Playing audio and video • Hardware accelerated 2D/3D graphics • Gamepad • Touch input • Location-based services • Access to camera • … Progressive Web Apps for .NET Developers An Overview App-like
  28. Web Apps that feel natively Progressive Web Apps for .NET

    Developers An Overview App-like
  29. Offline capability Challenge: Connection strength varies a lot (especially en

    route) Lie-Fi: Connection strength of a public WiFi is weak or even completely offline Goal: App works offline or with a weak connection at least within the possibilities (e.g. OneNote) Hence: Local data storage is needed—synchronization/conflict management required (Web Background Synchronization) Progressive Web Apps for .NET Developers An Overview Connectivity Independent
  30. Service Worker as a controller/proxy/interceptor Progressive Web Apps for .NET

    Developers An Overview Connectivity Independent Service Worker Internet Website HTML/JS Cache fetch
  31. 1. Cache only 2. Network only 3. Cache falling back

    to network 4. Cache & network race 5. Network falling back to cache 6. Cache then network 7. Generic fallback 8. ServiceWorker-side templating Progressive Web Apps for .NET Developers An Overview Caching Strategies
  32. IndexedDB Indexed Database (IndexedDB) is a database in the browser

    capable of storing structured data in tables with keys and value Data is stored permanently (survives browser restarts) Service Worker and website share access to the same IndexedDB database (e.g. for synchronization purposes) IndexedDB can help when storing client data, whereas Service Worker helps caching server data Progressive Web Apps for .NET Developers An Overview Connectivity Independent
  33. IndexedDB Progressive Web Apps for .NET Developers An Overview Connectivity

    Independent
  34. SwUpdate The Service Worker caches a specific version of your

    application. If the user is online, you want to deliver the latest version of your app. When new versions become available, you might want to notify the user to update the application. Progressive Web Apps for .NET Developers An Overview Fresh
  35. PWAs Require HTTPS! Service workers are very powerful • Can

    answer representatively for the server • Runs outside of the tab’s/window’s lifecycle Installation of service workers is only allowed via a secure connection Exception: localhost (for development purposes) PWAs can only be delivered via HTTPS Problem: TLS certificates are required (costs/renewal) Safe An Overview Progressive Web Apps for .NET Developers
  36. HTTP sites are “Not Secure” in Chrome 68+ Progressive Web

    Apps for .NET Developers An Overview Safe
  37. Free with automatic renewal Initiative of the Linux Foundation Automatic

    domain validation (Class 1) Website/Webservice has to be public available Period of validity: Comparatively short (90 days) Usage of TLS/SSL as easy as possible Plugins are available for IIS, Apache, Microsoft Azure, Plesk, … free! Let’s Encrypt An Overview Progressive Web Apps for .NET Developers
  38. Get the user back with notifications Idea: Push the users

    to use the app again Known from social networks or games, etc. Combination of two technologies: • Web Notifications • Push API Progressive Web Apps for .NET Developers An Overview Re-Engageable
  39. Sending Push Notifications Progressive Web Apps for .NET Developers An

    Overview Re-Engageable Push Service Server 4. Send Message to Push Service endpoint 5. Response (success/fail) 1. Register for push 2. Send push information to client 6. Push to client Client(s) 3. Send push endpoint
  40. Advance with Progressive Enhancement Idea: Use available interfaces and functions

    of a system Users with modern, feature-rich browsers are getting better experience Apps are available on older browsers but with limited functionality Concept: Browser feature support grows over time—thereby more users can enjoy an increasing number of app features Progressive Web Apps for .NET Developers An Overview Progressive
  41. Progressive Web Apps for .NET Developers An Overview Web Capabilities/Project

    Fugu Shape Detection API Wake Lock API Badging API Writable Files API 9
  42. Motivation - Communicate updates without distracting the user (in constrast

    to push notifications) - Typically displays a badge on the home screen, task bar or dock - Appearance varies from platform to platform Progressive Web Apps for .NET Developers An Overview Badging API
  43. https://appsco.pe/ Reference Apps An Overview Progressive Web Apps for .NET

    Developers
  44. twitter.com Reference Apps An Overview Progressive Web Apps for .NET

    Developers
  45. Spotify Web Player Reference Apps An Overview Progressive Web Apps

    for .NET Developers
  46. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com