Project Fugu: Bridging the Gap Between Web and Native Applications

The web has come a long way since its inception, but there are still some gaps between what web applications can do and what native applications can do. Project Fugu is an effort to bridge that gap and bring more native-like capabilities to web applications.

It's is a collaborative effort by Google, Microsoft, Mozilla, and other major players in the tech industry to make the web a more capable and user-friendly platform. The project was launched in 2019 with the goal of bringing native app-like experiences to the web platform.

The name "Fugu" comes from the Japanese word for pufferfish, which is known for its ability to inflate itself and expand its capabilities. The name is fitting because Project Fugu aims to do just that for the web platform. Additionally, it said that that kind of fish are toxic if they are not well prepared which is similar to what can happend with these kind of features where security and privacy are super important topics to consider while developing them.

For information of this team inside chromium you can visit their team site and you can also take a look at the developer-friendly landing page of the project. Additionally, you can visit the Fugu API Tracker which gives you a full list of new capabilities added by this project. You can also find this article where they explain the process and the ideas behind this project.

Let's explore some of the APIs that are part of Project Fugu and see how they can be used to create more powerful web applications.

Web Share API

The Web Share API allows web apps to easily share content with other apps on the user's device. This feature was previously only available to native apps, but now web apps can use it as well. Here's an example of how to use the Web Share API:

if (navigator.share) {
  navigator.share({
    title: 'Example Page',
    text: 'Check out this cool page!',
    url: window.location.href
  })
    .then(() => console.log('Shared successfully'))
    .catch((error) => console.log('Error sharing:', error));
} else {
  console.log('Web Share API not supported');
}

Device Capabilities API

One of the limitations of web applications compared to native applications is access to device capabilities. The Device Capabilities API is designed to address this limitation by providing a way for web applications to determine what capabilities are available on the device.

Here's an example of how the Device Capabilities API can be used to determine if the device has a camera:

if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const cameras = devices.filter(device => device.kind === 'videoinput');
  if (cameras.length > 0) {
    // The device has a camera
  } else {
    // The device does not have a camera
  }
} else {
  // The browser does not support the Device Capabilities API
}

In this example, we check if the browser supports the Device Capabilities API by checking if navigator.mediaDevices and navigator.mediaDevices.getUserMedia are available. If they are, we enumerate the devices on the device using navigator.mediaDevices.enumerateDevices() and filter for devices with kind set to 'videoinput', which corresponds to cameras. If there are any cameras, we know that the device has a camera.

Contacts API

Another limitation of web applications is access to the user's contacts. The Contacts API is designed to address this limitation by providing a way for web applications to access the user's contacts with their permission.

Here's an example of how the Contacts API can be used to display the user's contacts:

const permissions = await navigator.permissions.query({name: 'contacts'});
if (permissions.state === 'granted') {
  const contacts = await navigator.contacts.select(['name', 'email']);
  // Display the contacts
} else {
  // The user has not granted permission to access their contacts
}

In this example, we check if the user has granted permission to access their contacts using navigator.permissions.query({name: 'contacts'}). If permission is granted, we can use navigator.contacts.select() to select the contacts we want to display. In this case, we're selecting the contact's name and email.

File System Access API

The File System Access API is designed to address another limitation of web applications: limited access to the user's file system. With the File System Access API, web applications can request access to the user's file system and perform operations such as reading and writing files.

Here's an example of how the File System Access API can be used to read a file:

const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const text = await file.text();
console.log(text);

In this example, we use window.showOpenFilePicker() to display a file picker dialog and allow the user to select a file. Once a file is selected, we use the getFile() method on the file handle to get the file, and then the text() method to read the contents of the file as text.

Conclusion

Project Fugu is an exciting initiative that is bringing native app-like experiences to the web platform. By adding new features and APIs, web apps can now do things that were previously only possible with native apps. As these new capabilities become more widely available, you can expect to see a new generation of web apps that are more powerful and user-friendly than ever before.