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.

Transcript

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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)
    

    View Slide

14. Service Worker
    Produktivitäts-PWAs mit Angular auf Desktopniveau
    PWA
    Service
    Worker
    Internet
    Website
    HTML/JS
    Cache
    fetch
    

    View Slide

15. Service Worker Generation
    ng add @angular/pwa
    ng build
    PWA
    Produktivitäts-PWAs mit Angular auf Desktopniveau
    

    View Slide

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

    View Slide

17. Produktivitäts-PWAs mit Angular auf Desktopniveau
    

    View Slide

18. Project Fugu
    Produktivitäts-PWAs mit Angular auf Desktopniveau
    Capabilities
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google
    

    View Slide

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
    

    View Slide

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
    

    View Slide

21. Q&A
    Produktivitäts-PWAs mit Angular auf Desktopniveau
    

    View Slide

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
    

    View Slide

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

    View Slide