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?

Werner Raath · Accepted Answer · 2020-04-30 06:45:06Z

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, 2020 at 6:45

Werner Raath

1,5224 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2020-03-19 13:37:15Z

0

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

answered Mar 19, 2020 at 13:37

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

Werner Raath Over a year ago

I've added more context to the question

abraham · Accepted Answer · 2020-03-20 12:40:10Z

0

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

answered Mar 20, 2020 at 12:40

abraham

48.2k10 gold badges108 silver badges158 bronze badges

2 Comments

Werner Raath Over a year ago

So how does one test this in development do you think?

abraham Over a year ago

Android emulator would probably work. Or a tool like ngrok so you can load the dev site on your phone.

Collectives™ on Stack Overflow

PWA: Getting Web Share API to work in development

3 Answers 3

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Linked

Related