Web Share Target API Kaleidoscope24.com
2023-09-09. Kaleidoscope24.com is a website that allows users to create and share colorful patterns based on their photos. The site uses the Web Share Target API, which enables web apps to receive data shared by other apps on the device. This way, users can easily share their photos from the gallery or camera app to Kaleidoscope24.com, and then edit and share their kaleidoscopic creations with others. The Web Share Target API is a simple and powerful feature that enhances the user experience and engagement of web apps.
The Share Target API is a web platform feature that allows a web app to receive shared data from other apps. This can be useful for creating web apps that can handle common tasks such as sharing photos, notes, links, or files. To use the Share Target API, a web app needs to be installed as a progressive web app (PWA) on the user's device.
The web app can then register itself as a share target by adding a share_target entry in its web app manifest. The share_target entry specifies the URL, method, enctype, and params of the share request that the web app can handle. Feature is currently available in Browser Google Chrome 89 (released 2021-03-02) and Microsoft Edge 89 (released 2021-03-04), Samsung Internet 12.0 (released 2020-06-19), Crome Android 76 (released 2019-07-30).
The code snippets below show how Kaleidoscope24.com has implemented the Web Share Target API in its manifest and service worker files. To use this API, you need to add a share_target entry to your web app manifest, specify the action URL, the HTTP method, and the parameters for the shared data.
manifest.json:
{
...
"share_target": {
"action": "/?share-target=1",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "file",
"accept": [
"image/*"
]
}
]
}
},
...
}
service-worker.js:
if (e.request.url.endsWith('/receive-shares') && e.request.method==='POST') {
return e.respondWith((async ()=>{
const formData = await e.request.formData();
const mediaFiles = formData.getAll('file');
// Create new cache 'media' and put Images
caches.open('media').then(function(cache) {
for (var i=0; i < mediaFiles.length; i++) {
cache.put('shared-image' + i, new Response(mediaFiles[i], {
headers: {'content-length': mediaFiles[i].size,
'content-type': mediaFiles[i].type,
'name':mediaFiles[i].name;
}}))}
});
return Response.redirect('./?share', 303);
})(),);
}
main.js or JavaScript in index.html:
const restoreImageFromShare = async () => {
const cache = await caches.open('media');
if (cache) {
const requests = await cache.keys();
requests.reverse().forEach(async (request) => {
const response = await cache.match(request);
const rblob = await response.blob();
const rname = await response.headers.get('name');
await readFile(rblob, rname); // function with FileReader
await cache.delete(response);
});
caches.delete('media');
// Modify the URL without reloading the page
// https://www.30secondsofcode.org/js/s/modify-url-without-reload/
// Current URL: https://kaleidoscope24.com/?share
const nextURL = 'https://kaleidoscope24.com/';
const nextTitle = 'Kaleidoscope24.com';
const nextState = { additionalInformation: 'URL without ?share' };
// This will create a new entry in the browser's history, without reloading
window.history.pushState(nextState, nextTitle, nextURL);
// This will replace the current entry in the browser's history, without reloading
window.history.replaceState(nextState, nextTitle, nextURL);
}
};
// Feature detection and run
if (location.search.includes('share')) { restoreImageFromShare() }
For example, a web app might specify that it can receive shared URLs or images. When a user shares content from another app, the OS will check the manifest of installed web apps to determine which apps can handle the shared content. The user can then select the web app from the share menu, and the shared data is sent to the chosen web app, which can then process it accordingly.
In summary, the Web Share Target API enhances the interoperability of web apps with other apps and services on a device by allowing them to act as recipients for shared content, with the configuration details specified in their manifest files. This API simplifies the sharing of data between web apps and contributes to a more seamless user experience.
Specification: Web Share Target APIDemo: Web Share Target Demo
