Home / PWA and Offline / Share Target Link Saver
Share Target Link Saver in JavaScript, Free with Live Demo
Free link saver PWA in plain JavaScript. Install it and it appears in your phone's share menu, saving any link you share. Share links back out with the Web Share API.
Runs on: Web Share, Share Target. Share target: installed PWA on Android (Chrome, Edge, Samsung Internet) and ChromeOS. Web Share: Android, iPhone, Safari, Edge and Chrome on Windows and ChromeOS.
What is the Share Target Link Saver?
Install this app on Android and it shows up next to WhatsApp and email when you share a link from any app. Pick it, and the link lands in your reading list with its title.
The manifest declares a share_target, so the system opens the page with the shared title, text and URL in the address. The Web Share API sends saved links back out through the normal share sheet.
Good for
- Reading lists and bookmark tools
- Apps that collect links or photos
- Making a PWA feel native on Android
- Learning the Web Share API
What this project does
- Appears in the system share sheet once installed
- Saves the title, text and URL that other apps share
- Share any saved link back out, or the whole list as a text file
- Tags and search
- Test the share target right here with the simulate button
How it works
- Register as a targetThe manifest declares share_target with an action URL and the names of the title, text and url parameters.
- Receive a shareWhen you share to the app, the OS opens index.html?title=...&text=...&url=... and the page saves it.
- Share back outnavigator.share() opens the native share sheet with a saved link, or with a file when canShare allows it.
The key JavaScript
This is the heart of the project. The full file has the rest, including the screen layout and error handling.
// manifest.webmanifest
"share_target": {
"action": "./index.html",
"method": "GET",
"params": { "title": "title", "text": "text", "url": "url" }
}
// index.html: read what was shared
const p = new URLSearchParams(location.search);
if (p.has("url") || p.has("text")) saveLink(p.get("title"), p.get("url") || p.get("text"));
// Share back out
await navigator.share({ title: link.title, url: link.url });How to use it
- Click Download HTML file above.
- Open the file in a code editor, like VS Code.
- Run it from a local server with
npx serve .so the camera, microphone and AI features are allowed. - Change the text and colors, then upload it to GitHub Pages, Netlify or your own site. It is one file with no build step.
Questions people ask
What is a Web Share Target?
It is a manifest setting that lets an installed web app receive shares from other apps, the same way native apps do.
Does it work on iPhone?
The Web Share API for sending works in Safari. Receiving shares as a target is not supported on iOS yet.
How do I test it without a phone?
Use the Simulate a share button. It opens the page with the same address parameters the system would send.
More PWA and Offline projects
021. Offline-first Todo PWA
A todo app you can install that works with no internet
022. Expense Tracker PWA
A spending tracker with charts that syncs when back online
023. Reminder Notifications
A reminder app with Done and Snooze buttons in the notification
024. Local Markdown Editor
A Markdown editor that saves real files on your disk
026. Multi-tab Sync
Open it in several tabs and watch them stay in sync