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 Web-Basis. 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 von Thinktecture, wie Sie mit Angular Produktivitätsapps auf Desktopniveau entwickeln können – Zugriff auf das Dateisystem und die Zwischenablage sowie Dateizuordnungen inklusive.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

September 21, 2021
Tweet

Transcript

  1. Christian Liebel @christianliebel Consultant Produktivitäts-PWAs mit Angular auf Desktopniveau

  2. The image part with relationship ID rId12 was not found

    in the file. The image part with relationship ID rId12 was not found in the file. Special Day Modern Business Applications Thema Sprecher Datum, Uhrzeit Web-API mit Turbo: Deep-dive in async/await bei Backend-APIs Sebastian Gingter DI, 21. September 2021, 10.45 bis 11.45 Web Components in modernen Web-Apps: Hype oder Heilsbringer? Peter Kröner DI, 21. September 2021, 12.15 bis 13.15 Produktivitäts-PWAs mit Angular auf Desktopniveau Christian Liebel DI, 21. September 2021, 14.30 bis 15.30 Angular Unit Testing mit Jest Christian Liebel DI, 21. September 2021, 16.00 bis 17.00 SPAs in Azure betreiben - ein Leitfaden aus der Praxis Thorsten Hans MI, 22. September 2021, 17.30 bis 18.30
  3. Hello, it’s me. Produktivitäts-PWAs mit Angular 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 Produktivitäts-PWAs mit Angular auf Desktopniveau Demo Use Case
  5. Paint PWA Capabilities Produktivitäts-PWAs mit Angular auf Desktopniveau Agenda

  6. Paint PWA Capabilities Produktivitäts-PWAs mit Angular auf Desktopniveau Agenda

  7. 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 mit Angular auf Desktopniveau
  8. 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 mit Angular auf Desktopniveau
  9. 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 mit Angular auf Desktopniveau
  10. 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 mit Angular auf Desktopniveau
  11. Paint PWA Capabilities Produktivitäts-PWAs mit Angular auf Desktopniveau Agenda

  12. Produktivitäts-PWAs mit Angular auf Desktopniveau Web App Manifest Service Worker

  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": [/* … */] } Produktivitäts-PWAs mit Angular auf Desktopniveau PWA Names Icons Display Mode Shortcuts Start URL Theme color (status bar/window bar)
  14. Service Worker Produktivitäts-PWAs mit Angular auf Desktopniveau PWA Service Worker

    Internet Website HTML/JS Cache fetch
  15. Service Worker Generation ng add @angular/pwa ng build PWA Produktivitäts-PWAs

    mit Angular auf Desktopniveau
  16. Paint PWA Capabilities Produktivitäts-PWAs mit Angular auf Desktopniveau Agenda

  17. Produktivitäts-PWAs mit Angular auf Desktopniveau

  18. Project Fugu Produktivitäts-PWAs mit Angular auf Desktopniveau Capabilities »Let’s bring

    the web back – API by API« Thomas Steiner, Google
  19. 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 Produktivitäts-PWAs mit Angular auf Desktopniveau Capabilities
  20. File System Handling API Register your PWA as a handler

    for file extensions Requires installing the application first Declare supported extensions in Web App Manifest and add imperative code to your application logic Produktivitäts-PWAs mit Angular auf Desktopniveau Capabilities
  21. Q&A Produktivitäts-PWAs mit Angular auf Desktopniveau

  22. 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! Produktivitäts-PWAs mit Angular auf Desktopniveau Summary
  23. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com