কিভাবে শেয়ার করা ফাইল রিসিভ করবেন

প্যালেন্স লিয়াও
Palances Liao

আধুনিক উপায়

ওয়েব শেয়ার টার্গেট এপিআই ব্যবহার করে

প্রথমে, আপনার ওয়েব অ্যাপ ম্যানিফেস্টে একটি share_target ডিক্লেয়ার করুন। এই `target`-এ একটি action (আপনার URL যা শেয়ার করা ফাইলগুলি পরিচালনা করে), একটি ` method (ফাইলের জন্য "POST" ), একটি ` enctype (ফাইলের জন্য "multipart/form-data" ) এবং একটি params অবজেক্ট তালিকাভুক্ত থাকবে। `params` অবজেক্টটির একটি ` files প্রপার্টি থাকবে, যার মধ্যে ` name এবং accept প্রপার্টিসহ অবজেক্টের একটি অ্যারে থাকবে। এই `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.
    }
  }
});