DOM lib: add support for navigator.share

[OliverJAsh]

The window.navigator Navigator interface has a new property share https://developers.google.com/web/updates/2016/09/navigator-share.

Would it be possible to add this to the DOM lib typings?

I am currently shimming the type locally:

type ShareOptions = { title: string; text: string; url: string };

type NavigatorShare = (options: ShareOptions) => Promise<{}>;

interface Navigator {
  share?: NavigatorShare;
}

[mhegazy]

This does not seem to have a spec yet. we only include definitions in the library when they reach at least a working draft status.

[saschanaz]

There is a spec, but not WD yet.

[pablo-gonzalez]

Hi

Is this the spec you were waiting for?

https://wicg.github.io/web-share/

https://github.com/WICG/web-share/blob/master/docs/explainer.md

Thanks in advance,
Pablo

[jpradeep2003]

Hi @OliverJAsh , I need to use WebShareApi in my Ionic/Angular app. Can you please explain your workaround i.e. "I am currently shimming the type locally". Any pointers on how to "shim a type locally"?

[RyanCavanaugh]

18 months later the linked repo appears to have no activity and it's still not in Desktop Chrome at time of writing. Closing.

[renchap]

Spec Level 1 (sharing text / links) is now implemented in Safari (Desktop & iOS) as well as on Android Chrome (source)

Level 2 (sharing files / images) is being discussed and implementation is ongoing in Chrome.

Would it be possible to get typings for Level 1?

[DASPRiD]

For anyone looking for a temporary solution, you can add this to your global.d.ts for level 1 support:

type ShareData = {
    title? : string;
    text? : string;
    url? : string;
};

interface Navigator
{
    share? : (data? : ShareData) => Promise<void>;
}

[Magnielcz]

For level 2 support, i recommend this one. files property should be FileList, but Filelist is readonly and can't be created dynamicaly. That's why I choose File[] instead.

Also, important notes from developers.google.com:

When calling navigator.canShare() for files, shareData cannot contain other members. If you need title, text, or url you'll need to add them afterwards.

type ShareData = {
    title? : string;
    text? : string;
    url? : string;
    files?: File[];
};

interface Navigator
{
    share? : (data? : ShareData) => Promise<void>;
    canShare?: (data?: ShareData) => boolean;
}

[thebugger2000]

For level 2 support, i recommend this one. files property should be FileList, but Filelist is readonly and can't be created dynamicaly. That's why I choose File[] instead.

Also, important notes from developers.google.com:

When calling navigator.canShare() for files, shareData cannot contain other members. If you need title, text, or url you'll need to add them afterwards.

type ShareData = {
    title? : string;
    text? : string;
    url? : string;
    files?: File[];
};

interface Navigator
{
    share? : (data? : ShareData) => Promise<void>;
    canShare?: (data?: ShareData) => boolean;
}

Could you expand this into a tiny demo, and maybe post it to your git hub. I'm doing a Ionic/Angular/Capacitor PWA with and this my achilles heel. I've put a button in the index.html then click it from some typescript document.getElementByID, but that's really Jerry rigged.
My main goal is to trigger a shared image (for a instagram post) from the safari browser some how.

[DASPRiD]

How about this instead of facilitate that requirement?

type ShareData = {
    title? : string;
    text? : string;
    url? : string;
    files?: ReadonlyArray<File>;
};

interface Navigator
{
    share? : (data? : ShareData) => Promise<void>;
    canShare?: (data?: ShareData) => boolean;
}

[thebugger2000]

I'm in ionic 4/Angular 8/ Capacitor as a PWA:

global.d.ts:
import { Capacitor as _Capacitor } from './definitions';
declare const Capacitor: _Capacitor;
declare const Plugins: import("./core-plugin-definitions").PluginRegistry;

// Added code - begin
export { Capacitor, Plugins };
type ShareData = {
title? : string;
text? : string;
url? : string;
};

interface Navigator
{
share? : (data? : ShareData) => Promise;
}
// Added code - end

then how should i reference this? I tried adding
...
constructor (public navigator: Navigator){
}
click(){
navigator.share({url:"www.google.com"});
}
...

it doesn't recognize the share method. That's why I was wondering if someone could make a small demo of it.

My goal is to have the pwa popup the local instagram app popup with a post ready to process for the users when they click a button in my app.

Any help would be appreciated.

[alireza-mh]

why this issue has been closed?
share property is not still inside the Navigator type.

[saschanaz]

I guess because the availability is way too limited for now.

[aghp]

Port

[anton-bot]

need to reopen this, 90% of browsers on mobile supports navigator.share

[Magnielcz]

need to reopen this, 90% of browsers on mobile supports navigator.share

Agree, it's up to the programmer to detect if the browser supports this feature or not. I don't see reason, why this should not be included in the library.

[saschanaz]

This feature is admittedly widely supported on mobile devices, while desktops have poor support.

@orta and @sandersn, what's the policy for a situation like this? Sharing is definitely more useful on mobile, so should we accept this?

[orta]

I lean on to the side of yes for the level 1 support for this API.

I have used this API myself in two separate projects, and re-implemented it in a React Native app - it's probably never going be broken and it's not really a valuable for desktops in the same way - so it's unlikely to make it to firefox.

[saschanaz]

I lean on to the side of yes for the level 1 support for this API.

In that case I'll open a PR for this.

so it's unlikely to make it to firefox.

It's implemented in Firefox, just waiting for Microsoft to release the relevant API in stable builds.

[orta]

Ha, nice work - that PR is a good read too. 👍