Project Fugu: Progressive Web Apps, Superpowered

Progressive Web Apps are a great cross-platform application model, even if somewhat restricted in use – until now, that is. Project Fugu is an initiative led by Google, Microsoft, and Intel. Their goal: a more capable web. Home screen icon badges and shortcuts, clipboard access, accelerated shape detection in images and native file system access are only a few examples of Fugu’s powerful APIs. In this session, Christian Liebel, PWA specialist at Thinktecture, shows you the objective of Project Fugu and demonstrates some of its APIs. Are you ready to superpower your Progressive Web App?

Transcript

1. Project Fugu
   Progressive Web Apps, Superpowered
   Christian Liebel
   @christianliebel
   Consultant
   

   View Slide

2. Hello, it’s me.
   Project Fugu
   Progressive Web Apps, Superpowered
   Christian Liebel
   Twitter:
   @christianliebel
   Email:
   christian.liebel
   @thinktecture.com
   Angular & PWA
   Slides:
   thinktecture.com
   /christian-liebel
   

   View Slide

3. Offline capability
   Push messages
   Webcam/microphone access
   File System Access
   Raw Clipboard Access
   Font Table Access
   Project Fugu
   Progressive Web Apps, Superpowered
   

   View Slide

4. Project Fugu
   Progressive Web Apps, Superpowered
   

   View Slide

5. Cross-Vendor Initiative Led By…
   Project Fugu
   Progressive Web Apps, Superpowered
   Project Fugu – A More Capable Web
   »Let’s bring the web
   back – API by API«
   Thomas Steiner, Google
   

   View Slide

6. Project Fugu
   Progressive Web Apps, Superpowered
   Project Fugu
   https://goo.gle/fugu-api-tracker
   

   View Slide

7. Process
   – Write an Explainer (https://github.com/WICG/native-file-
   system/blob/master/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/native-file-system/)
   Project Fugu
   Progressive Web Apps, Superpowered
   Project Fugu
   

   View Slide

8. 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
   Progressive Web Apps, Superpowered
   Project Fugu
   

   View Slide

9. Project Fugu
   Progressive Web Apps, Superpowered
   Project Fugu
   navigator.share({ url: 'http://example.com' });
   ShareIntent DataTransferManager
   …
   NSSharingServicePicker
   

   View Slide

10. Progressive Enhancement
    if ('share' in navigator) {
    navigator.share({ text: 'Hi!' });
    } else {
    // Fallback method
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    Project Fugu
    

    View Slide

11. Badging API
    Project Fugu
    Progressive Web Apps, Superpowered
    

    View Slide

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
    Project Fugu
    Progressive Web Apps, Superpowered
    Badging API
    

    View Slide

13. API
    Set the badge
    navigator.setAppBadge(5);
    Clear the badge
    navigator.clearAppBadge();
    Project Fugu
    Progressive Web Apps, Superpowered
    Badging API
    

    View Slide

14. Shortcuts
    Project Fugu
    Progressive Web Apps, Superpowered
    

    View Slide

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
    Project Fugu
    Progressive Web Apps, Superpowered
    Shortcuts
    

    View Slide

16. Web App Manifest Extension
    {
    "shortcuts": [
    {
    "name": "New Email message",
    "description": "Compose a new email.",
    "url": "/mails/new",
    "icons": []
    },
    {
    "name": "New Appointment",
    "description": "Create a new appointment.",
    "url": "/appointments/new"
    }
    ]
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    Shortcuts
    

    View Slide

17. Project Fugu
    Progressive Web Apps, Superpowered
    

    View Slide

18. Screen Wake Lock
    Project Fugu
    Progressive Web Apps, Superpowered
    

    View Slide

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
    Progressive Web Apps, Superpowered
    Screen Wake Lock API
    

    View Slide

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
    Progressive Web Apps, Superpowered
    Screen Wake Lock API
    https://web.dev/wakelock/
    

    View Slide

21. Shape Detection API
    Project Fugu
    Progressive Web Apps, Superpowered
    

    View Slide

22. Faces Barcodes Text
    Use Cases
    Project Fugu
    Progressive Web Apps, Superpowered
    Shape Detection API
    

    View Slide

23. Face Detection API
    if ('FaceDetector' in window) {
    const img = document.querySelector('img');
    const faceDetector = new FaceDetector();
    const faces = await faceDetector.detect(img)
    faces.forEach(face => {
    console.log('Face found!', face.boundingBox);
    });
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    Shape Detection API
    

    View Slide

24. https://liebel.io/facedet
    Project Fugu
    Progressive Web Apps, Superpowered
    Shape Detection API
    DEMO
    

    View Slide

25. Project Fugu
    Progressive Web Apps, Superpowered
    

    View Slide

26. Related: WebML
    Machine Learning for the Web (WebML)
    Goal: Low-level Web API for machine learning (Web Neural Network API)
    Microsoft, Google, Apple, Mozilla on board
    Project Fugu
    Progressive Web Apps, Superpowered
    Shape Detection API
    

    View Slide

27. Async Clipboard API
    Project Fugu
    Progressive Web Apps, Superpowered
    

    View Slide

28. 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
    Progressive Web Apps, Superpowered
    Async Clipboard API
    

    View Slide

29. Native File System API
    Project Fugu
    Progressive Web Apps, Superpowered
    

    View Slide

30. 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
    Progressive Web Apps, Superpowered
    Native File System API
    

    View Slide

31. API (may change!)
    if ('chooseFileSystemEntries' in window) {
    const handle = await window.chooseFileSystemEntries();
    const file = await handle.getFile();
    // do something with the file
    } else {
    // use fallback API or disable feature in app
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    Native File System API
    

    View Slide

32. API (may change!)
    const handle = await self.chooseFileSystemEntries({
    type: 'open-file',
    multiple: false,
    readOnly: false,
    accepts: [{
    description: 'Images',
    extensions: ['jpg', 'gif', 'png']
    }]
    });
    Project Fugu
    Progressive Web Apps, Superpowered
    Native File System API
    

    View Slide

33. https://liebel.io/paint
    LIVE DEMO
    Project Fugu
    Progressive Web Apps, Superpowered
    Async Clipboard & NativeFS
    

    View Slide

34. Project Fugu
    Progressive Web Apps, Superpowered
    Summary
    

    View Slide

35. - Project Fugu helps the web to become more and more capable
    - Project Fugu APIs could bring many more app experiences to the web
    (IDEs, productivity apps, etc.)
    - But: Web is threatened by alternative approaches and platforms,
    support for modern Web API varies from platform to platform
    - You can make a difference!
    - File bugs in browser engine bugtrackers
    - File Fugu requests: https://goo.gle/new-fugu-request
    Project Fugu
    Progressive Web Apps, Superpowered
    Summary
    

    View Slide

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

    View Slide