• Latest
  • Trending
Using the native web share JavaScript API

Using the native web share JavaScript API

July 7, 2022
Co-Creation Hub’s edtech accelerator puts $15M towards African startups

Co-Creation Hub’s edtech accelerator puts $15M towards African startups

February 20, 2023
Data Leak Hits Thousands of NHS Workers

Data Leak Hits Thousands of NHS Workers

February 20, 2023
EU Cybersecurity Agency Warns Against Chinese APTs

EU Cybersecurity Agency Warns Against Chinese APTs

February 20, 2023
How Your Storage System Will Still Be Viable in 5 Years’ Time?

How Your Storage System Will Still Be Viable in 5 Years’ Time?

February 20, 2023
The Broken Promises From Cybersecurity Vendors

Cloud Infrastructure Used By WIP26 For Espionage Attacks on Telcos

February 20, 2023
Instagram and Facebook to get paid-for verification

Instagram and Facebook to get paid-for verification

February 20, 2023
YouTube CEO Susan Wojcicki steps down after nine years

YouTube CEO Susan Wojcicki steps down after nine years

February 20, 2023
Inaugural AfCFTA Conference on Women and Youth in Trade

Inaugural AfCFTA Conference on Women and Youth in Trade

September 6, 2022
Instagram fined €405m over children’s data privacy

Instagram fined €405m over children’s data privacy

September 6, 2022
8 Most Common Causes of a Data Breach

5.7bn data entries found exposed on Chinese VPN

August 18, 2022
Fibre optic interconnection linking Cameroon and Congo now operational

Fibre optic interconnection linking Cameroon and Congo now operational

July 15, 2022
Ericsson and MTN Rwandacell Discuss their Long-Term Partnership

Ericsson and MTN Rwandacell Discuss their Long-Term Partnership

July 15, 2022
  • Consumer Watch
  • Kids Page
  • Directory
  • Events
  • Reviews
Wednesday, 29 March, 2023
  • Login
itechnewsonline.com
  • Home
  • Tech
  • Africa Tech
  • InfoSEC
  • Data Science
  • Data Storage
  • Business
  • Opinion
Subscription
Advertise
No Result
View All Result
itechnewsonline.com
No Result
View All Result

Using the native web share JavaScript API

by ITECHNEWS
July 7, 2022
in Data Science, Leading Stories
0 0
0
Using the native web share JavaScript API

Did you know there is a native share function you can invoke with JavaScript?

You might have seen them around on the internet.
If not, I’ve added a video demonstration of how it looks.

YOU MAY ALSO LIKE

Co-Creation Hub’s edtech accelerator puts $15M towards African startups

Data Leak Hits Thousands of NHS Workers

 

 

Interesting in adding this to your website?
Follow me along as we build it together.

JavaScript native web share API

It’s important to note this method does not work on every browser, it’s mainly built for mobile devices, but some desktop variants like Safari also support it.

Remember that you should always create your fallback share method when you use this.

The first thing we need to do is see if the current user has support for the navigator.

We can use the in method to check if the navigator holds the share functionality.

The code to determine it looks like this:

if ('share' in navigator) {
  console.log('native share available');
} else {
  console.log('provide fallback share');
}

Now we can go ahead and add a button to our webpage that we can attach a click to.

<button id="share-button">Share me</button>

We can then fetch the button by its ID.

const shareButton = document.getElementById('share-button');

And attach a listener to it.

shareButton.addEventListener('click', (event) => {
  // Do the share action
});

Inside this function, we can invoke the native share or use our fallback share mechanism.

shareButton.addEventListener('click', (event) => {
  if ('share' in navigator) {
    navigator
      .share({
        title: 'Look at this native web share',
        url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
      })
      .then(() => {
        console.log('Callback after sharing');
      })
      .catch(console.error);
  } else {
    console.log('provide fallback share');
  }
});

Let’s take a closer look at what’s going on here.

  • We attach a click handler to our button
  • We check if we have the native share option
    • Yes: We invoke it with a title and URL
    • No: We should provide some fallback

As you can see, we can even attach callbacks to our native share API.
You might want to use it to thank the user for sharing or logging some analytics event.

If you are interested, you can try it out on this CodePen.

Web share API options

In our example, we set the title and URL option. Let’s see what else we can provide.

The web share API accepts the following options:

  • title: a string that represents the title (may be ignored by the shared platform)
  • URL: the URL of the sharable link
  • text: a string representing some information about the share action
  • files: an array of files it supports quite a wide variety of file options

In total you could provide a object like this:

const file = new File([blob], 'picture.jpg', { type: 'image/jpeg' });

navigator.share({
  title: 'Web Share',
  text: 'Testing out the web share API',
  url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
  files: [file],
});

Browser support

Not all systems support this feature. However, most mobile browsers will support it.

Generally, it’s recommended to have a custom fallback modal for the share options.

Data on support for the web-share feature across the major browsers from caniuse.com

Source: Chris Bongers
Tags: Using the native web share JavaScript API
ShareTweetShare
Plugin Install : Subscribe Push Notification need OneSignal plugin to be installed.

Search

No Result
View All Result

Recent News

Co-Creation Hub’s edtech accelerator puts $15M towards African startups

Co-Creation Hub’s edtech accelerator puts $15M towards African startups

February 20, 2023
Data Leak Hits Thousands of NHS Workers

Data Leak Hits Thousands of NHS Workers

February 20, 2023
EU Cybersecurity Agency Warns Against Chinese APTs

EU Cybersecurity Agency Warns Against Chinese APTs

February 20, 2023

About What We Do

itechnewsonline.com

We bring you the best Premium Tech News.

Recent News With Image

Co-Creation Hub’s edtech accelerator puts $15M towards African startups

Co-Creation Hub’s edtech accelerator puts $15M towards African startups

February 20, 2023
Data Leak Hits Thousands of NHS Workers

Data Leak Hits Thousands of NHS Workers

February 20, 2023

Recent News

  • Co-Creation Hub’s edtech accelerator puts $15M towards African startups February 20, 2023
  • Data Leak Hits Thousands of NHS Workers February 20, 2023
  • EU Cybersecurity Agency Warns Against Chinese APTs February 20, 2023
  • How Your Storage System Will Still Be Viable in 5 Years’ Time? February 20, 2023
  • Home
  • InfoSec
  • Opinion
  • Africa Tech
  • Data Storage

© 2021-2022 iTechNewsOnline.Com - Powered by BackUPDataSystems

No Result
View All Result
  • Home
  • Tech
  • Africa Tech
  • InfoSEC
  • Data Science
  • Data Storage
  • Business
  • Opinion

© 2021-2022 iTechNewsOnline.Com - Powered by BackUPDataSystems

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Go to mobile version