on2-dev/share-api-polyfill

A polyfill for the sharing that can be used in the desktop, too, so your users can share in their Twitter, Facebook, Messenger, LinkedIn, SMS, e-mail, print, Telegram or WhatsApp.

share-api-polyfill's Issues

Absolute path url arguments do not get merged with current domain before passing through to share targets in fallback mode

I'm honestly not sure if this is documented behavior of the Web Share API but I'm seeing diverging behavior in this instance:

1. Call navigator.share with the url argument as a /-prefixed path, like /articles/123/
2. Native navigator.share interprets that into <protocol>://<current-domain-and-port>/articles/123/ when passing through to share target. Kind of how the href of an <a> element is understood correctly when it's just /articles/123/.
3. Polyfill fallback behavior does not do this and just passes through /articles/123/ as the "URL" to any share target.

I'm happy to work on this as a PR to this project but wanted to propose it first and get approval before investing the work.

npm ERR! git: Appears to be a git repo or submodule.

When installed through NPM, I get an error about the package being a git repository. Can be reproduced by creating a new project like this:

$ npm init -y                                    
Wrote to ~/share-api-test/package.json:

{
  "name": "share-api-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

$ npm install --save share-api-polyfill
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 1 package from 1 contributor and audited 1 package in 0.792s
found 0 vulnerabilities

$ npm install                          
npm ERR! path ~/share-api-test/node_modules/share-api-polyfill
npm ERR! code EISGIT
npm ERR! git ~/share-api-test/node_modules/share-api-polyfill: Appears to be a git repo or submodule.
npm ERR! git     ~/share-api-test/node_modules/share-api-polyfill
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2019-08-29T04_40_57_713Z-debug.log

It seems a similar issue was resolved by removing the .git folder of that module: react-navigation/react-native-safe-area-view#73

I can see that share-api-polyfill has a .git folder in the npm package too:

However, I don't know why it is there. According to the npm instructions, the git folder should be ignored automatically:

https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package

navigator.language detection

I think navigator.language.substr(0, 2).toLowerCase() is not good for translations. Due to Chinese has two different variations. One for Simplified Chinese (zh-CN), the other is Traditional Chinese (zh-TW). You might need to think about how to handle these.

No longer displays on desktop - Chrome 89+

The support for the Web Share API has been added to desktop as of Chrome 89. Therefore the polyfill no longer displays on desktop in Chrome/Edge.

The issue is the Windows equivalent isn't as great as it is on iOS and Android and lacks the ability to share on social media like in the polyfill.

Is there any way of utilising the polyfill rather than the native API? Can it be manually evoked via JS?

Accessibility

We should add accessibility hints to elements, so screen readers can deal with it in a way that fist best.
Also, we should auto-focus the first element as soon as it opens.

Add support to a new idiom: Estonian

Hello, can I add support for Estonian language? @rsip22 Do you need that?

File URL Support for Sharing

Can we use file URIs?

swedish translation

here comes a Swedish translation from a native Swede.

		sv: {
			shareTitle: 'Dela',
			cancel: 'Avbryt',
			copy: 'Kopiera',
			print: 'Skriv ut',
			email: 'E-mail',
			selectSms: 'Välj en kontakt'
		},

Upgrade CodeQL Action to v2

Warning: CodeQL Action v1 will be deprecated on December 7th, 2022. Please upgrade to v2. For more information, see https://github.blog/changelog/2022-04-27-code-scanning-deprecation-of-codeql-action-v1/

Add support to a new idiom: Ukrainian

Currently supported languages:

• cs
• de
• it
• da
• en
• es
• fr
• hu
• is
• ja
• ko
• nl
• ta
• pl
• pt
• ru
• sv
• sk
• tr
• zh

Add support to a new language!

Documentation improvements

There are some mistakes in the documentation with relations english words. If you prefer to fix them I can show to you or I can do it with pull request.

Congrats to project 🦀

Support for Polish and Danish Language

I'd like to use this plugin, but need support for both the Polish and Danish languages as well as the existing ones.

I'd like to contribute these if possible?

Option to disable Skype SDK

Hey,

it would be really greate to disable the loading of the Skype SDK. We don't want to send any user information to third-party vendors for privacy reasons.

Thanks!

register as share target

Think it would be grate if there where a method to register as a share target using web manifest.json
share polyfill looks at the manifest to see if there is any such config in there, register it in some centralized localStorage origin which communicates throught postMessage+iframe. all sites that you then visit automatically becomes available as a share target then.

https://web.dev/web-share-target

Add zh-TW translation

I'll send a PR very soon.

If text is empty, the error will throw

Add Polish language

PR Created :) #59

Suggest use ESLint or TypeScript + TSLint

I think use ESLint or TypeScript + TSLint can improve code quality and better version control. Especially the code format issues.

Copy, Email, and SMS functions do not support sharing text

Seems like the text is not shared when using the copy, sms or email functions. Could this be supported?

replace "idiom" with "language"

In spanish and portuguese we use the word idioma when talking about a language. The word idiom in english sounds close to idioma but has a different meaning. I think we should use the word language.

URL-encoding for Twitter

I have noticed that using special characters inside the shared text breaks links for Twitter (on desktop). (For example: '|')
The characters are passed straight into the link and Twitter has a problem with decoding it.
Unfortunately using URL-encode value (for example '%7C') in the text string makes it work for Twitter but then on Facebook & WhatsApp the code is displayed instead of the required character. (eg. 'my text %7C ....')
Only Telegram works fine with both ways.
I only test on Facebook, WhatsApp, Twitter and Telegram as I don't use other sharing options.

Wrapping my text in encodeURIComponent makes it work for Twitter but the Facebook and WhatsApp text doesn't work as it gets encoded twice.
I think this would solve the problem:

case 'twitter': {
    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${url}&hashtags=${hashtags || ''}`);
    break;
}

Add LINE

LINE is a messenger like app that is especially popular in Japan.

https://line.me/en-US/

Sharing documentation:
https://social-plugins.line.me/en/

Icon on Font Awesome:
https://fontawesome.com/icons/line?style=brands

remove ie stuff

I bet nobody use ie <= 8 anymore :)

share-api-polyfill/src/share.js

Line 173 in 8b89616

// This is required for IE8 and below.

Add support to a new idiom: Indonesian

Currently supported languages:

• cs
• de
• it
• da
• en
• es
• fr
• hu
• is
• ja
• ko
• nl
• ta
• pl
• pt
• ru
• sv
• sk
• tr
• zh

Add support to a new language!

Add support to a new idiom: Hindi

Currently supported languages:

• cs
• de
• it
• da
• en
• es
• fr
• hu
• is
• ja
• ko
• nl
• ta
• pl
• pt
• ru
• sv
• sk
• tr
• zh

Add support to a new language!

BUG REPORT: telegram share not working

Telegram sharing is not working, the scope of the constant payload is wrong.

Browser support?

Which browser does it support?
Seems it doesn't work on IE 11-, Chrome 40-. How can I make it work for these browsers?

Add support to a new idiom: Bengali

Currently supported languages:

• cs
• de
• it
• da
• en
• es
• fr
• hu
• is
• ja
• ko
• nl
• ta
• pl
• pt
• ru
• sv
• sk
• tr
• zh

Add support to a new language!

Text is not visible in dark mode

Thanks for the great project! It's very useful.

There is an issue for me, though: In my dark-themed application the text is not visible.

It looks like defining a background-color but inheriting the text color can cause unexpected consequences.
We should either make all the colours dynamic or hard code all of them. A mix is not really a go 🥹

Remove setTimeouts

They may not be reliable nor performant. We can use requestAnimationFrame when adding the backdrop and container elements to the DOM. For the removing part we can listen to the transitionend event.

Add support to a new idiom: Arabic

Currently supported languages:

• cs
• de
• it
• da
• en
• es
• fr
• hu
• is
• ja
• ko
• nl
• ta
• pl
• pt
• ru
• sv
• sk
• tr
• zh

Add support to a new language!

Add share target configurations and documentation

I have created a version of this polyfill that creates 2 classes SharePolyfill and ShareTarget this by default acts as a polyfill in addition to providing a default instance sharePolyfill

end users may then add more share targets by creating one and calling
sharePolyfill.registerShareTarget()

docs ShareTarget

if a user would like to disable native sharing they can ether reinitialize like so
shareTarget = newShareTarget({forcePolyfill:true})
alternatively one could simply override the share function
navigator.share = sharePolyfill.share

This is not really necessary though as if you can just use sharePolyfile.share() when needed and then leave navigator.share() fo use the native implementation and only fallback on sharePolyfill.

if you would like to test this implementation you can install it using
npm install git+https://github.com/syonfox/share-api-polyfill.git

<script src="/node_modules/share-api-polyfill/dist/share.js"></script>

navigator.share({url:'https://sharedgoalof.life', title: 'SGOL', text:'SO cool stuff '})

I have also added some default share targets but have yet to migrate every version help with that may be nice
here is a demo https://syonfox.github.io/share-api-polyfill/demo/
note that print still works and is simply disabled

Tested and working "gmail, yahoo, whatsapp, linkedin, telagram, facebook, twitter, get-pocket,

Purpose, I would like some feedback and for some people track down and implement a variety of share Targets.

preferably ones with no api requirement. but if for share targets that require a api we need to finish the default system for ShareTarget

If there is interest I can work towards a pull request let me know what y'all think.

how about sharing files?

One must register a service worker and register a fetch handler that can take care of them...

if a share polyfill sees that example.com have registered as a share target but don't have the service worker installed, the share polyfill must then create a hidden iframe to something like example.com/install-sw.html to pre install it and then create a POST with those files

https://web.dev/web-share-target/#accepting-files

Add support to a new idiom: Swahili

Currently supported languages:

• cs
• de
• it
• da
• en
• es
• fr
• hu
• is
• ja
• ko
• nl
• ta
• pl
• pt
• ru
• sv
• sk
• tr
• zh

Add support to a new language!

Option to provide a selector to append to instead of body

Currently the background and the share sheet appends to the body.

While it probably works for most users, but in our legacy CMS, we have smaller "apps" on the same page that need to be shared instead of the page itself so the ability to append the share sheet to a specific element would be great.

Thanks

Transpile the code in order to get iOS 10 support

The package uses spread in a couple of places, and it's not transpiled, thus iOS 10 fails with

Unexpected token '...'. Expected a property name.

specify the transition properties to avoid unexpected changes

specify the transition properties to avoid unexpected changes to the elements when animating them

Doesn't work

Trying to include this in a Vue.js project, and getting the following error:

ERROR in ./node_modules/share-api-polyfill/dist/share-min.js 
Module parse failed: Unexpected token (1:664) 
You may need an appropriate loader to handle this file type.

Doesn't seem to work in Edge

Getting the following error:

SCRIPT1028: SCRIPT1028: Expected identifier, string or number       
share-min.js (1,8218)

Avoid animation jitter by adding layers

Create a layer for the backdrop and the container in order to have them inside their own layers and avoid jitter/jankiness during the animations

bug: demo link in readme

the demo link provided in the readme don't work

Add dist/ to .gitignore

I'd like to suggest to remote/ignore dist/ folder from the repo.

Add Icelandic language

Add support for Icelandic