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

Produktivitäts-PWAs mit Angular auf Desktopniveau

Produktivitäts-PWAs mit Angular auf Desktopniveau

Progressive Web Apps (PWA) sind ein plattformübergreifend einsetzbares Anwendungsmodell auf Webbasis. Dank Project Fugu, einer Initiative der Chrome-Beitragenden Google, Microsoft und Intel, wird das Web um noch mächtigere Features erweitert. Damit können Entwickler endlich auch Produktivitäts-Apps wie Büro- und Bearbeitungsprogramme oder IDEs sinnvoll ins Web bringen. In dieser Session zeigt Ihnen Christian Liebel, wie Sie mit Angular Produktivitäts-Apps auf Desktopniveau entwickeln können – Zugriff auf das Dateisystem und die Zwischenablage sowie Dateizuordnungen inklusive.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

February 22, 2022
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. The image part with relationship ID rId3 was not found

    in the file. The image part with relationship ID rId3 was not found in the file. The image part with relationship ID rId3 was not found in the file. Special Day “Modern Business Applications” Thema Sprecher Datum, Uhrzeit Web-APIs mit async/await: Wobei hilft’s und wie funktioniert’s? Sebastian Gingter DI, 22. Februar 2022, 10.45 bis 11.45 Web Components in modernen Web-Apps: Hype oder Heilsbringer? Peter Kröner DI, 22. Februar 2022, 12.15 bis 13.15 Produktivitäts-PWAs mit Angular auf Desktopniveau Christian Liebel DI, 22. Februar 2022, 14.30 bis 15.30 Blazor WebAssembly in der Praxis: 5 Dinge, die Sie kennen sollten Christian Weyer DI, 22. Februar 2022, 16.00 bis 17.00 Serverless Kubernetes mit Azure Container Apps Thorsten Hans DI, 22. Februar 2022, 18.00 bis 19.00
  2. Christian Liebel @christianliebel Consultant Produktivitäts-PWAs mit Angular auf Desktopniveau

  3. Hello, it’s me. Angular meets Project Fugu Produktivitäts-PWAs auf Desktopniveau

    Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  4. https://paint.js.org – Productivity app – Draw images – Lots of

    actions & tools – Installable – Read/save files – Copy/paste images from/to clipboard – Share files to other apps – Register for file extensions Demo Use Case Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  5. Paint PWA Capabilities Progressive Enhancement Agenda Produktivitäts-PWAs auf Desktopniveau Angular

    meets Project Fugu
  6. Canvas – Plain bitmap for the web – Cross-platform, hardware-

    accelerated graphics operations – Supports different contexts (2D, 3D: WebGL, WebGL 2.0) – Supported on all evergreen browsers and on IE 9+ Paint Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  7. Canvas 2D Context fillRect(x, y, width, height) strokeRect(x, y, width,

    height) beginPath() moveTo(x, y) lineTo(x, y) fill() stroke() Paint Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  8. Pointer Events Paint Users nowadays use different input methods, cross-platform

    apps should cover all of them Pointer Events offer an abstract interface to catch all input methods (pointerdown, pointermove, pointerup) event.offsetX/event.offsetY contain the pointer’s position relative to the listener Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  9. Bresenham Line Algorithm The user may move faster than the

    input can be processed For this case, we need to remember the previous point and interpolate the points in between The Bresenham line algorithm calculates the missing pixels between two given points Paint Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  10. Paint PWA Capabilities Progressive Enhancement Agenda Produktivitäts-PWAs auf Desktopniveau Angular

    meets Project Fugu
  11. Web App Manifest Service Worker Produktivitäts-PWAs auf Desktopniveau Angular meets

    Project Fugu
  12. Web App Manifest Distinguishes Web Apps from Websites JSON-based file

    containing metadata for apps only Apps can be identified by search engines, app store providers, etc. PWA Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  13. manifest.webmanifest { "short_name": "Paint", "name": "Paint Workshop", "theme_color": "white", "icons":

    [{ "src": "icon.png", "sizes": "512x512" }], "start_url": "/index.html", "display": "standalone", "shortcuts": [/* … */] } PWA Names Icons Display Mode Shortcuts Start URL Theme color (status bar/window bar) Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  14. Manifest Display Modes PWA browser minimal-ui standalone fullscreen Produktivitäts-PWAs auf

    Desktopniveau Angular meets Project Fugu
  15. Manifest Icon Purposes (any) any context (e.g. app icon) monochrome

    different color requirements (at risk) maskable user agent masks icon as required PWA Safe Zone Windows iOS Android Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  16. Manifest Shortcuts PWA Secondary entrypoints for your application (e.g., home

    screen quick actions, jump lists, …) Static definition in Web App Manifest Dynamic API may follow in the future Supported by Google Chrome for Android Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  17. Service Worker PWA Service Worker Internet Website HTML/JS Cache fetch

    Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  18. NgServiceWorker Angular CLI supports Service Worker generation by simply adding

    PWA support: ng add @angular/pwa One-size-fits-all Service Worker Pre-defined functionality, limited customizability PWA Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  19. Paint PWA Capabilities Progressive Enhancement Agenda Produktivitäts-PWAs auf Desktopniveau Angular

    meets Project Fugu
  20. Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu

  21. Project Fugu Capabilities »Let’s bring the web back – API

    by API« Thomas Steiner, Google Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  22. Capabilities https://goo.gle/fugu-api-tracker Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu

  23. Browser Capabilities navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker

    Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  24. File System Access API Some applications heavily rely on working

    with files (e.g. Visual Studio Code, Adobe Photoshop, …) File System Access API allows you to open, save and override files and directories Shipped with Google Chrome 86 Capabilities Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  25. Async Clipboard API Allows reading from/writing to the clipboard in

    an asynchronous manner (UI won’t freeze during long-running operations) Reading from the clipboard requires user consent first (privacy!) Supported by Chrome, Edge and Safari Capabilities Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  26. Paint PWA Capabilities Progressive Enhancement Agenda Produktivitäts-PWAs auf Desktopniveau Angular

    meets Project Fugu
  27. Overview Use available interfaces and functions of a system (opposite

    of Graceful Degradation) Users with modern, feature-rich browsers get a better experience Apps are available on older browsers, but with limited functionality Concept: Browser feature support should grow over time—thereby more users can enjoy an increasing number of features Progressive Enhancement Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  28. Overview if ('serviceWorker' in navigator) { navigator.serviceWorker.register(…) .then(() => /*

    … */); } In JavaScript: check whether an API/feature is available. If yes—use it! Otherwise: 1. Disable the functionality 2. Fall back to an alternative API (if available) Progressive Enhancement Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  29. New powerful APIs regularly ship with new releases of Chromium-based

    browsers Some only add minor finishing touches, others enable whole application categories as productivity apps to finally make the shift to the web Some APIs already made their way into other browsers (e.g., Web Share) Fugu process makes sure that capabilities are implemented in a secure, privacy-preserving manner Let’s make the web a more capable platform! Summary Produktivitäts-PWAs auf Desktopniveau Angular meets Project Fugu
  30. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com