PWA: Getting Web Share API to work in development

Question

Since Google Chrome and Firefox does not support Web Share yet, I need some alternative way to test this in development.

Sharing is achieved via this example:

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
} else {
  console.warn('Cannot share in this browser')
}

Which will log for any unsupported browser:

Cannot share in this browser

Any ideas of how to get this to work for development?

score 1 · Answer 1 · answered Mar 20 '20 at 12:40

1

Most desktop browsers do not support the Web Share API. Currently Chrome is one that does not.

answered Mar 20 '20 at 12:40

abraham

46,583
10
100
152

So how does one test this in development do you think? – Werner Raath Mar 22 '20 at 07:47
Android emulator would probably work. Or a tool like ngrok so you can load the dev site on your phone. – abraham Mar 22 '20 at 19:52

score 1 · Answer 2 · answered Apr 30 '20 at 06:45

1

It seems using Chrome Dev Tools to forward the local port to a remote device is the best way to debug on mobile devices and thus test PWA functionality on a device itself.

answered Apr 30 '20 at 06:45

Werner Raath

1,322
3
16
34

score 0 · Answer 3 · answered Mar 19 '20 at 13:37

0

http://localhost is considered a secure context … or you could just set up HTTPS in your local development environment.

answered Mar 19 '20 at 13:37

Quentin

914,110
126
1,211
1,335

I've added more context to the question – Werner Raath Mar 19 '20 at 14:23

PWA: Getting Web Share API to work in development

3 Answers3