আধুনিক উপায়
ওয়েব শেয়ার টার্গেট API ব্যবহার করে
প্রথমে, আপনার ওয়েব অ্যাপ ম্যানিফেস্টে একটি share_target ঘোষণা করুন যা একটি action (আপনার URL যা শেয়ার করা ফাইলগুলি পরিচালনা করে), একটি method (ফাইলের জন্য "POST" ) এবং একটি enctype (ফাইলের জন্য "multipart/form-data" ) এবং একটি params অবজেক্ট তালিকাভুক্ত করে। যেটিতে একটি name সহ অবজেক্টের অ্যারে সহ একটি files সম্পত্তি রয়েছে এবং সম্পত্তি accept যা ভাগ করা যায় এমন ফাইলের ধরন এবং সেগুলি পাওয়ার নাম তালিকাভুক্ত করে।
{
"share_target": {
"action": "/receive-files/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "image",
"accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
}
]
}
}
}
তারপরে আপনাকে পরিষেবা কর্মীর ইনকামিং POST অনুরোধগুলি পরিচালনা করতে হবে। ফাইলটি অস্থায়ীভাবে একটি মিডিয়া ক্যাশে সংরক্ষণ করা হয়, তাই এটি ক্লায়েন্টে ব্যবহার করা যেতে পারে। share-target মতো একটি বিশেষ মার্কার ক্যোয়ারী প্যারামিটার সহ একটি URL-এ অ্যাপটিকে পুনঃনির্দেশ করে এটি করা যেতে পারে।
self.addEventListener('fetch', (fetchEvent) => {
if (fetchEvent.request.url.endsWith('/receive-files/') && fetchEvent.request.method === 'POST') {
return fetchEvent.respondWith(
(async () => {
const formData = await fetchEvent.request.formData();
const image = formData.get('image');
const keys = await caches.keys();
const mediaCache = await caches.open(keys.filter((key) => key.startsWith('media'))[0]);
await mediaCache.put('shared-image', new Response(image));
return Response.redirect('./?share-target', 303);
})(),
);
}
});
অবশেষে, আপনাকে ক্লায়েন্টে ফাইলটি গ্রাস করতে হবে।
window.addEventListener('load', async () => {
if (location.search.includes('share-target')) {
const keys = await caches.keys();
const mediaCache = await caches.open(
keys.filter((key) => key.startsWith('media'))[0],
);
const image = await mediaCache.match('shared-image');
if (image) {
const blob = await image.blob();
await mediaCache.delete('shared-image');
// Handle the shared file somehow.
}
}
});
আরও পড়া
ডেমো
এইচটিএমএল
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="manifest.json" />
<title>How to receive shared files</title>
<link rel="stylesheet" href="style.css" />
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', async () => {
const registration = await navigator.serviceWorker.register(
'sw.js',
);
console.log(
'Service worker registered for scope',
registration.scope,
);
});
}
</script>
<script src="script.js" type="module"></script> -->
</head>
<body>
<h1>How to receive shared files</h1>
<p>Install the app. After the installation, try sharing an image to it from another app.
</body>
</html>সিএসএস
html {
box-sizing: border-box;
font-family: system-ui, sans-serif;
color-scheme: dark light;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 1rem;
}
img {
height: auto;
max-width: 100%;
display: block;
}
জেএস
window.addEventListener('load', async () => {
if (location.search.includes('share-target')) {
const keys = await caches.keys();
const mediaCache = await caches.open(
keys.filter((key) => key.startsWith('media'))[0],
);
const image = await mediaCache.match('shared-image');
if (image) {
const blob = await image.blob();
await mediaCache.delete('shared-image');
// Handle the shared file somehow.
}
}
});