Start codelab

Codelab Flow

What you will learn

L Last updated on 14/06/18 W Web Share API

In this codelab you will learn how to use the Web Share API which allows you easily trigger the native Android share dialog, passing either a URL or text or both to share.

Creating the javascript - share.js

It is important to note the following checklist for the Web Share API to work;

  1. You must be served over HTTPS
  2. You can only invoke the API in response to a user action, such as a click
  3. You can also share any URL, not just URLs under your website's current scope
  4. And you may also share text without a URL

To add web-share to your existing progressive web app then create an empty js file called web-share.js in a js folder as shown below.

your-project/js/web-share.js

Next thing to do is to copy the code below to the empty web-share.js.

This code allows you to use the Web Share API for your PWA. In the code snippet, we have comments explaining what each line of the code does. Read through.
Once invoked it, will bring up the native picker (as in the demo pwa on your phone) and allow you to share the data with the app (whatsapp, facebook, twitter, etc) chosen by the user.
   
// pwa fire for developers - codelab - web share api - add-on
// https://pwafire.org/developer/
// Authored by maye edwin https://twitter.com/MayeEdwin1
// this web app share add-on works magically when on your mobile device;
(function () {
    'use strict';
    // check if share API is supported or not
    if (navigator.share !== undefined) {
      document.addEventListener('DOMContentLoaded', function() {
        // select the html element with the class as "share"
        var shareBtn = document.querySelector('.share');
        // add share button event listener
        shareBtn.addEventListener('click', function(event) {
          // web share API
          navigator.share({
          // pick the default title of your page in the title tag
            title: document.title,
          // change the text of your share as you may like; to e.g desc of your pwa
            text: 'This is PWA Fire Web Share API Demo PWA #pwafire #MeetMaye',
            url: window.location.href
          })
          .then(function() {
            console.info('PWA Fire Demo shared successfully!');
          })
          .catch(function (error) {
            console.error('Wooooooo! Some magic failed in sharing:', error);
          })
        });
      });
    }
  })();
    

Add web-share.js to your page

In your page, add the following code at the bottom just before the end of the body tag :::: depending with the directory in which you have saved web-share.js

<script src="assets/js/web-share.js"></script>

Add a share button or icon

It is time now to add the share button or icon on your page after configuring the web-share.js file above to fit your web app needs. We need to create a button or icon with its class as share.

Add the code below to your page to define the share button for your progressive web app and save.

<a href="#work" class="button share">Share now</a>

Yay! Done! Visit your web app on your phone now and click the your share button. You should see the native picker which allows you to share your PWA with the app (whatsapp, facebook, twitter, etc) you choose.

Mr. PWA Fire's Son Dance Mr. PWA Fire's Son Dance

While on your phone, click the button below to demo our web-share add-on!

What's next?

We shall be publishing another codelab on how to add push notifications to your progressive web app. Taking these codelabs allows you to build small but exciting web experiences for your target users.

Support

Donate a Star and Contribute in any way. Be sure to follow us on Twitter. If you use web-share kindly let us know via info@pwafire.org or JUST simply Tweet us

License

Copyright PWA Fire, 2018. Licensed under an MIT License.

FORK ON GITHUB