Save 37% off PRO during our Black Friday Sale! »

Progressive Web Apps jenseits von Mobile: Desktop-PWAs mit Fugu

Progressive Web Apps jenseits von Mobile: Desktop-PWAs mit Fugu

Progressive Web Apps (PWA) sind ein webbasiertes Anwendungsmodell: Einmal geschrieben lassen sich diese Anwendungen überall dort ausführen, wo ein halbwegs moderner Browser zur Verfügung steht – von Mobilgeräten bis hin zum Desktop. Gerade auf Windows, macOS und Linux haben PWAs ein großes Potenzial, denn hier erscheint die Lücke zwischen dem Web und nativen Anwendungsplattformen mit am größten. Um diese Lücke zu schließen, haben sich Microsoft, Intel und Google im Projekt Fugu zusammengeschlossen.

Christian Liebel zeigt Ihnen aktuelle Fugu-Schnittstellen und welche Arten von Anwendungen damit nun endlich ins Web gebracht werden können.

Melden Sie sich jetzt kostenlos zum Webinar an. Wir freuen uns auf Sie!

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

October 20, 2021
Tweet

Transcript

  1. Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Christian

    Liebel @christianliebel Consultant
  2. Hello, it’s me. Progressive Web Apps jenseits von Mobile Desktop-PWAs

    mit Fugu Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  3. Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Web

    App Manifest Service Worker
  4. ✅ Offline capability ✅ Push messages ✅ Webcam/microphone access File

    System Access Raw Clipboard Access Local Font Access Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu
  5. Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu

  6. Cross-Vendor Initiative Led By… Progressive Web Apps jenseits von Mobile

    Desktop-PWAs mit Fugu Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
  7. https://paint.js.org LIVE DEMO Progressive Web Apps jenseits von Mobile Desktop-PWAs

    mit Fugu
  8. Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Project

    Fugu https://goo.gle/fugu-api-tracker P
  9. Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Project

    Fugu Browser navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
  10. Progressive Enhancement if ('share' in navigator) { navigator.share({ text: 'Hi!'

    }); } else { // Fallback method } Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Project Fugu
  11. Badging API Progressive Web Apps jenseits von Mobile Desktop-PWAs mit

    Fugu
  12. 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 jenseits von Mobile Desktop-PWAs mit Fugu Badging API
  13. API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); Progressive

    Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Badging API
  14. Shortcuts Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu

  15. Provide secondary entry points for your application, now also for

    Progressive Web Apps added to the home screen Windows: Jump List iOS: Home Screen Quick Actions Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Shortcuts
  16. Web App Manifest Extension { "shortcuts": [ { "name": "Direct

    Messages", "url": "/mails/new", "icons": [] }, { "name": "Notifications", "url": "/appointments/new", "icons": [] } ] } Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Shortcuts
  17. Screen Wake Lock Progressive Web Apps jenseits von Mobile Desktop-PWAs

    mit Fugu
  18. Motivation - Devices go to sleep in order to reduce

    energy consumption - However, this can get bothersome in some situations (e.g. while watching a movie, while cooking, etc.) - The Screen Wake Lock API prevents the device from turning of the screen while the application has the wake lock Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Screen Wake Lock API
  19. API let wakeLockObj; if ('wakeLock' in navigator) { try {

    wakeLockObj = await navigator.wakeLock.request('screen'); console.log('👍', 'Screen Wake Lock', wakeLockObj); } catch (err) { console.error('👎', 'Screen Wake Lock', err); } } Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Screen Wake Lock API https://web.dev/wake-lock/
  20. Async Clipboard API Progressive Web Apps jenseits von Mobile Desktop-PWAs

    mit Fugu
  21. API Copy Content await navigator.clipboard.writeText('foo'); await navigator.clipboard.write(/* data */); Paste

    Content const content = await navigator.clipboard.readText(); const content = await navigator.clipboard.read(); Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Async Clipboard API
  22. File System Access API Progressive Web Apps jenseits von Mobile

    Desktop-PWAs mit Fugu
  23. Motivation - Currently, websites only have very limited access to

    the file system - Some applications heavily rely on working with files (e.g. Visual Studio Code) - Wouldn’t it be great if your web application could open files or folders from the native file system? Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu File System Access API
  24. API if ('showOpenFilePicker' in window) { const [handle] = await

    window.showOpenFilePicker(); const file = await handle.getFile(); // do something with the file } else { // use fallback API or disable feature in app } Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu File System Access API
  25. API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{

    description: 'PNG files', accept: {'image/png': ['.png']} }] }); Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu File System Access API
  26. File System Handling API Progressive Web Apps jenseits von Mobile

    Desktop-PWAs mit Fugu
  27. Motivation 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 Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu File System Handling API
  28. Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "image/png":

    [".png"] } }] } Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu File System Handling API
  29. API if ('launchQueue' in window) { launchQueue.setConsumer(async params => {

    const [handle] = params.files; // do something with the handle }); } Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu File System Handling API
  30. Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Summary

    P
  31. 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! Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu Summary
  32. Q&A Progressive Web Apps jenseits von Mobile Desktop-PWAs mit Fugu

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