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

Project Fugu: so erobern Produktivitätsanwendungen jetzt auch das Web

Project Fugu: so erobern Produktivitätsanwendungen jetzt auch das Web

Webanwendungen sind beliebt, da Anwender ohne Installation und schwere Abhängigkeiten ihre Arbeit erledigen können. Historisch waren Web-Apps in ihren Möglichkeiten jedoch immer etwas eingeschränkt. Mit Project Fugu haben sich Google, Microsoft und Intel zusammengetan, um den Abstand zwischen Web und Native noch weiter schmelzen zu lassen. Christian Liebel von Thinktecture zeigt Ihnen, welche Schnittstellen Project Fugu ins Web bringt und wie gerade Produktivitätsanwendungen davon profitieren.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

June 29, 2021
Tweet

Transcript

  1. Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Christian

    Liebel @christianliebel Consultant
  2. Hello, it’s me. Project Fugu So erobern Produktivitätsanwendungen jetzt auch

    das Web Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  3. Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Web

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

    System Access Raw Clipboard Access Local Font Access Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web
  5. Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web

  6. Cross-Vendor Initiative Led By… Project Fugu So erobern Produktivitätsanwendungen jetzt

    auch das Web Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
  7. Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Project

    Fugu https://goo.gle/fugu-api-tracker
  8. Process – Write an Explainer (https://github.com/WICG/file-system- access/blob/main/EXPLAINER.md) – Discuss capability

    with developers, browser vendors, standard orgs – Iterate – Compile a design document – W3C TAG Review (https://github.com/w3ctag/design- reviews/issues/390) – Formal spec within Web Incubator Community Group (WICG, https://wicg.github.io/file-system-access/) Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Project Fugu
  9. Process – Implementation in Chromium – Launches behind a flag

    (chrome://flags/#enable-experimental-web- platform-features) – Origin Trial (https://developers.chrome.com/origintrials/) – Transfer to W3C Working Group + Recommendation? Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Project Fugu
  10. Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Project

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

    }); } else { // Fallback method } Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Project Fugu
  12. Badging API Project Fugu So erobern Produktivitätsanwendungen jetzt auch das

    Web
  13. 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 Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Badging API
  14. API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); Project

    Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Badging API
  15. Shortcuts Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web

  16. 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 Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Shortcuts
  17. Web App Manifest Extension { "shortcuts": [ { "name": "Direct

    Messages", "url": "/mails/new", "icons": [] }, { "name": "Notifications", "url": "/appointments/new", "icons": [] } ] } Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Shortcuts
  18. Screen Wake Lock Project Fugu So erobern Produktivitätsanwendungen jetzt auch

    das Web
  19. 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 Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Screen Wake Lock API
  20. 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); } } Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Screen Wake Lock API https://web.dev/wake-lock/
  21. https://paint.js.org LIVE DEMO Project Fugu So erobern Produktivitätsanwendungen jetzt auch

    das Web Async Clipboard & FS Access
  22. Async Clipboard API Project Fugu So erobern Produktivitätsanwendungen jetzt auch

    das Web
  23. 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(); Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Async Clipboard API
  24. File System Access API Project Fugu So erobern Produktivitätsanwendungen jetzt

    auch das Web
  25. 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? Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web File System Access API
  26. 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 } Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web File System Access API
  27. API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{

    description: 'PNG files', accept: {'image/png': ['.png']} }] }); Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web File System Access API
  28. File System Handling API Project Fugu So erobern Produktivitätsanwendungen jetzt

    auch das Web
  29. 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 Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web File System Handling API
  30. Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "image/png":

    [".png"] } }] } Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web File System Handling API
  31. API if ('launchQueue' in window) { launchQueue.setConsumer(async params => {

    const [handle] = params.files; // do something with the handle }); } Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web File System Handling API
  32. Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Summary

  33. 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! Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web Summary
  34. Q&A Project Fugu So erobern Produktivitätsanwendungen jetzt auch das Web

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