README.md

Step 17 - Use an API from project Fugu

In this step, you're free to implement any of the APIs from project Fugu. Fugu is a special project that is started by Google to fill the gap between native app capabilities and PWA capabilities. Read more about Unlocking new capabilities for the web on Google Developers.

Navigate to Fugu API Tracker and select a brand new API which is in origin trial stage.

Be aware of the aimed platform of the API and choose an API targeting both desktop and mobile platforms if possible.

Opt-in for origin trials

• Navigate to Chrome Origin Trials and locate the API that you've decided to experiment with.
• Click on REGISTER button.
• Enter the web origin https://localhost if you'd like to test on desktop.
• Choose the expected usage of the API.
• Accept the terms and proceed.
• Copy the token to your clipboard.

You need to create a new token if you'd like to test on emulated device as well, as it has a different web origin - https://10.0.2.2

Add the origin trial meta tag to your app

Open your index.html file and paste the following meta tag to the head of your HTML:

<meta http-equiv="origin-trial" content="the_token_from_your_clipboard">

If your app is used on multiple origins, you can paste multiple origin-trial tags with different tokens generated for each web origin.

Implement the API interface

Navigate to the docs of the chosen API and implement the API interface in your app.

An example of implementation of one of the Fugu APIs being in origin trial by the time of preparing this workshop - Badging API v2 can be seen below:

setExperimentalAppBadge() {
  if ('setExperimentalAppBadge' in navigator) {
    const unreadCount = 4;
    // @ts-ignore
    navigator.setExperimentalAppBadge(unreadCount);
  }
}

Congratulations! 🎉

Thanks for completing the workshop! You're amazing!!!

Please continue to final branch to see the complete solution and final message -> What's next?.