Web Share API for Modern Web Apps

Using sharing options similar to mobile devices across web apps

Have you ever come across the Web Share API? At least many of you may have heard of the term. Web Share API was out there for some time now. However, the initial support for Web Share API was limited to mobile devices.

Recently, Web Share and Web Share API started to support Windows and Chrome OS, making it interesting for Web Developers.

Web Share API — Quick Demo

We can do a quick test of Web Share APIs by following the steps given below to share data with other applications from a web page.

Source: https://web-share.glitch.me/

1. First of all, make sure you use the latest version of Google Chrome.
2. Open your browser and go to this link and click the Share button.
3. You can open any other application that allows sharing. Besides, it also support sharing with nearby devices.
4. After sharing, you can view the shared data in the target application. I’ve used Mail as the application and it added the text data into email body as shown below. The data was passed from the Web Share API.

I hope you are already convinced after trying it out. At least that was my first impression while checking out the Web Share demo in my browser.

Tip: Build applications differently

OSS Tools like Bit offer a new paradigm for building modern apps.

Instead of developing monolithic projects, you first build independent components. Then, you compose your components together to build as many applications as you like. This isn’t just a faster way to build, it’s also much more scalable and helps to standardize development.

An independently source-controlled and shared “card” component. On the right => its dependency graph, auto-generated by Bit.

Using Web Share in Practice

Sharing Links and Text

You can use a simple share() method to share the links and text you want. The code snippet is given below to help you out with Web Share.

if (navigator.share) {
  navigator.share({
    title: 'google.com',
    text: 'Visit the google.com.',
    url: 'https://www.google.com/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
 }

Sharing Files

File sharing is a bit different from URL sharing. For instance, you have to call navigator.canShare(). Then you can add an array of files while invoking navigator.share()

if (navigator.canShare && navigator.canShare({ files: fileArr })) {
  navigator.share({
    files: fileArr,
    title: 'My image collection',
    text: 'The vacation at north pole',
  })
  .then(() => console.log('Sharing was successful.'))
  .catch((error) => console.log('Sharing failed', error));
 } else {
  console.log(`Your system doesn't support sharing the given files.`);
 }

Sharing Target

For an app to become a Share Target, it needs to fulfill some criteria set by Chrome. You can refer to this link to check those out.

To register in the web app manifest, you have to add a share_target. It alerts the operating system to consider the app as a possible sharing option, as shown below.

1. Accepting basic information

2. Accepting files

3. Accepting application changes

You have to use the Web Share Target API to register as a target. A target can share files and content with other applications.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
 },

However, it is easier to transfer files between installed applications. You can share multiple contents varying from URLs to files.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
 }

Web Share API — Features and Limitations

Features

• Using Web Share, your web application can use the system-provided sharing capabilities just like a platform-specific app.
• Developers get a more comprehensive range of sharing options.
• It is possible to customize the share targets and choices in their devices. Therefore, you can increase the page loading speed.
• Web Share APIs help to share text, URLs, and files. And also, Web Share has expanded its services too.
• It’s available for Chrome OS, Chrome on Window, Safari, and Android in Chromium forks.

Limitations

However, no matter how good this service is, there are several drawbacks and limitations too.

• Firstly, only the sites accessed via https can be used with Web Share.
• Another thing is, you cannot invoke it with something like an onload operation. There must be some user action for this. For instance, a user click can invoke it.
• Besides, it is still under development for Chrome for Mac.

Summary

Web Share API is a modern web platform feature to share content easier across social networks, SMS, and registered target apps.

Chrome is one major browser that supports Web Share Target API. And also, Safari supports it as well.

However, the Web Share API should be triggered by a user action, as it is developed to reduce inconveniences and abuses.

Thank you for reading. Feel free to leave a comment down below and share your experience.

Learn More

7 New Chrome APIs You Should Know

10 Tips to Improve Productivity using Chrome Dev Tools

Understanding Web Share APIs