Allow your PWA to receive shared content from other apps via the Share Target API.
// manifest.json - Register as a share target
{
"share_target": {
"action": "/share-handler",
"method": "GET",
"enctype": "application/x-www-form-urlencoded",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
}
// HTML page for handling shared content
// share-handler.html
<!DOCTYPE html>
<html>
<head>
<title>Share Handler</title>
</head>
<body>
<script>
const params = new URLSearchParams(window.location.search);
const sharedTitle = params.get('title');
const sharedText = params.get('text');
const sharedUrl = params.get('url');
if (sharedText) {
// Process the shared content
createNote(sharedText, sharedUrl);
window.location.href = '/notes';
}
</script>
</body>
</html>Register your PWA to handle specific file types.
// manifest.json - File handling
{
"file_handlers": [
{
"action": "/open-file",
"accept": {
"text/plain": [".txt", ".md"],
"text/csv": [".csv"],
"image/*": [".png", ".jpg", ".gif", ".webp"],
"application/pdf": [".pdf"]
}
}
]
}
// Handle opened files
if ('launchQueue' in window) {
window.launchQueue.setConsumer(async (launchParams) => {
for (const file of launchParams.files) {
const content = await file.getFile();
const text = await content.text();
// Process the file
openDocument(text, content.name);
}
});
}Register your PWA to handle URLs from your domain.
// manifest.json - URL handling
{
"url_handlers": [
{
"origin": "https://my-pwa.example.com"
}
]
}
// In the Service Worker, intercept navigation to shared URLs
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
// Handle navigation to shared URLs
const url = new URL(event.request.url);
if (url.pathname.startsWith('/shared/')) {
event.respondWith(handleSharedUrl(url));
}
}
});Register custom protocol handlers so your PWA opens when users click web+myapp:// links.
// Register protocol handler
navigator.registerProtocolHandler('web+myapp', '/handle-protocol?url=%s');
// manifest.json
{
"protocol_handlers": [
{
"protocol": "web+myapp",
"url": "/handle-protocol?url=%s"
}
]
}
// Handle protocol URL
// /handle-protocol.html
const url = new URLSearchParams(window.location.search).get('url');
if (url) {
const parsed = new URL(url);
const action = parsed.hostname;
const data = parsed.pathname;
// e.g., web+myapp://open-note/123
if (action === 'open-note') {
openNote(data.replace('/', ''));
}
}