• Web Share for Modern Web Apps
  • Originally written by Janaka Ekanayake
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Proofreader: Chorer, Usualminds

More recently, Windows and Chrome OS support for Web sharing and Web Share apis has attracted a lot of attention from Web developers.

Have you been exposed to the Web Share API? I’m sure many of you have heard of this term. The Web Share API has been around for a while, but initially only mobile devices supported the Web Share API.

Web Share API – quick demo

You can quickly test the Web Share API by following these steps to Share data between Web pages and other applications.

  1. First, make sure you’re using the latest version of Chrome.
  2. Open your browser, open the link, and click the Share button.
  3. You can open any app that allows sharing. It also supports sharing with nearby devices.
  4. Once you hit Share, you can view the shared data in the target app. I’m using mail as an application here. As shown in the figure, the application adds text data from the Web Share API to the E-mail body.

I hope you’ll be happy after you try it! At least that was my first impression when I looked at the Web Share demo in my browser.

Use Web Shares in practice

Share links and text

You can use a simple share() method to share the links and text you want. The following code snippet can help you complete Web Share:

if (navigator.share) {
    navigator.share({
        title: 'juejin.cn'.text: 'Visit the Nuggets Developer Community'.url: 'https://www.juejin.com/',
    }).then(() = > console.log('Share the success! '))
        .catch((error) = > console.log('I encountered an error when sharing... ', error));
}
Copy the code

Share files

File sharing is a little different from URL sharing — you must first call navigator.canshare () to confirm that you canShare files, and then you can add an array of files when you call navigator.share().

if (navigator.canShare && navigator.canShare({files: fileArr})) {
    navigator.share({
        files: fileArr,
        title: 'My Photo Book'.text: 'The North Pole de Vacation',
    }).then(() = > console.log('Share the success! '))
        .catch((error) = > console.log('I encountered an error when sharing... ', error));
} else {
    console.log('Your browser does not support sharing these files... `);
}
Copy the code

Shared goals

To be a sharing target, an application needs to meet some criteria set by Chrome. You can browse this help document to see these conditions.

To register in the Web application manifest, you must add a share_target. This alerts the browser to consider the application as a possible sharing option, as shown below:

  1. Receive basic information
  2. Receive the file
  3. Receive application changes

You must use the Web Share Target API to declare the Share Target. It can specify files and content to share with other applications:

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

However, transferring files between installed applications is easier. You can share links, files, and more.

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

Web Share API – Features and limitations

function

  • With Web Share, your Web application can use the sharing functionality provided by the system just like a platform-specific native application.
  • Developers can get more comprehensive sharing options.
  • You can customize sharing targets and devices within devices. As a result, you can speed up page loading.
  • The Web Share API helps you Share text, urls, and files. In addition, Web Share has been expanded to support sharing.
  • It works with Chrome OS, Chrome for Windows, Safari, and The Chromium kernel browser for Android.

limitations

However, no matter how good this feature is, it has a number of drawbacks and limitations.

  • First, Web Share is available only to sites accessed through HTTPS.

  • Also, you can’t call it with an operation like onload, it has to be called by the user’s interaction. For example, the user can invoke it with a click.

  • In addition, Chrome for Mac is still working on this feature.

summary

The Web Share API is a modern Web platform feature that makes it easier to Share content between social networks, SMS, and registered target applications.

Chrome is one of the major browsers that supports the Web Share Target API. Plus, Safari supports it.

However, the Web Share API should be triggered by user initiative to reduce inconvenience and abuse.

Thank you for reading. Feel free to share your experiences in the comments below.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.