Skip to content

Lab 7: Web Share API

Jump to bottom
Christian Liebel edited this page Jan 31, 2018 · 1 revision

The Web Share API is a relatively new addition to the web platform. It’s a draft specification allowing to share objects using a native share dialog. Hence, Chrome for Android is the only browser supporting it. But following the principle of progressive enhancements, in this lab we will also enable other browsers and platforms to enable sharing (in an old-school way 😉).

1. Switch Branch

Please run the following commands on your command line, e.g. in the root ngeurope-2018-pwa root folder:

$ git reset --hard
$ git clean -df
$ git checkout workshop/lab7

2. Check Browser Support

In the demo application, navigate to the Features page. Find Web Share API in the list. If the toggle switch is activated, your browser supports this feature. Isn't this a cool page?

3. Progressive Enhancement

Let’s implement the principle of Progressive Enhancement. Extend the ShareService (client/src/modules/shared/services/share.service.ts) by implementing the following logic in the share method:

  • Use the FeatureService to detect if the Web Share API BrowserFeatureKey.WebShareAPI is available.
  • If Web Share API is available, call the _share method.
  • Otherwise, call the _sendMail method.

4. Share an Item

Implement the _share method. The Web Share API is triggered by calling navigator.share. You might refer to this Web Share API documentation.

5. Test Web Share API

Click the sharing button next to a to-do item.

On a device with support for Web Share API, the native share dialog should come up.

On a device lacking support for Web Share API, an email dialog should come up instead.

Clone this wiki locally