ওয়ার্কবক্সের সাথে বিল্ট-ইন শেয়ারিং UI-তে PWAs একীভূত করুন

সিস্টেম-লেভেল শেয়ারিং UI-তে প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপের পাশে আপনার PWA কীভাবে দেখাবেন

Jeff Posnick

Joe Medley

Sam Richard

ওয়েব শেয়ার টার্গেট এপিআই আপনাকে আপনার প্রগ্রেসিভ ওয়েব অ্যাপ ইনস্টল করার পর ব্যবহারকারীর সিস্টেম-লেভেল শেয়ার শিটে তা প্রদর্শন করতে দেয়। অনুরোধটি গ্রহণ করার জন্য আপনার কাছে একটি সার্ভার থাকলে এটি চমৎকারভাবে কাজ করে, কিন্তু তা না থাকলে এটিকে কার্যকর করা অনেক বেশি কঠিন।

এই আর্টিকেলে আমরা Workbox ব্যবহার করব, যা ওয়েব অ্যাপে অফলাইন সাপোর্ট যোগ করার জন্য একগুচ্ছ জাভাস্ক্রিপ্ট লাইব্রেরি। এর মাধ্যমে আমরা এমন একটি শেয়ার টার্গেট ইউআরএল তৈরি করব যা সম্পূর্ণরূপে আপনার সার্ভিস ওয়ার্কারের ভেতরে থাকবে। এর ফলে স্ট্যাটিক সাইট এবং সিঙ্গেল-পেজ অ্যাপগুলো কোনো ডেডিকেটেড সার্ভার এন্ডপয়েন্ট ছাড়াই শেয়ার টার্গেট হিসেবে কাজ করতে পারে।

একই পৃষ্ঠায়

ওয়েব শেয়ার টার্গেট কীভাবে কাজ করে সে সম্পর্কে আপনার ধারণা না থাকলে, ‘ওয়েব শেয়ার টার্গেট এপিআই ব্যবহার করে শেয়ার করা ডেটা গ্রহণ’ আপনাকে এ বিষয়ে একটি বিশদ ধারণা দেবে। এখানে তার একটি সংক্ষিপ্ত পর্যালোচনা দেওয়া হলো।

ওয়েব শেয়ার টার্গেট কার্যকারিতা বাস্তবায়নের দুটি অংশ রয়েছে। প্রথমত, আপনার ওয়েব অ্যাপ ম্যানিফেস্ট আপডেট করে জানাতে হবে যে, ইনস্টল করার পর আপনার অ্যাপটি একটি শেয়ার টার্গেট হবে। নিচের উদাহরণটি একটি POST রিকোয়েস্টের মাধ্যমে শেয়ারগুলোকে /share ইউআরএল-এ পাঠায়। এটি একটি মাল্টিপার্ট ফর্ম হিসেবে এনকোড করা হয়েছে, যেখানে টাইটেলকে name , টেক্সটকে description এবং JPEG ইমেজগুলোকে photos বলা হয়েছে।

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

সার্ভিস ওয়ার্কার ওয়ার্কবক্সের সাথে লক্ষ্যমাত্রা শেয়ার করে।

সাধারণত সার্ভার এন্ডপয়েন্টের মাধ্যমে পরিচালিত হলেও, শেয়ার টার্গেটের জন্য একটি চমৎকার কৌশল হলো অনুরোধটি পরিচালনা করার জন্য সরাসরি আপনার সার্ভিস ওয়ার্কারে একটি রাউট রেজিস্টার করা। এর ফলে আপনার অ্যাপ কোনো ব্যাকএন্ড ছাড়াই একটি শেয়ার টার্গেট হিসেবে কাজ করতে পারবে।

Workbox- এ এটি করার জন্য, আপনার সার্ভিস ওয়ার্কার দ্বারা পরিচালিত একটি রাউট রেজিস্টার করতে হয়। প্রথমে 'workbox-routing' থেকে registerRoute ইম্পোর্ট করুন। লক্ষ্য করুন যে এটি /share রাউটের জন্য রেজিস্টার করা হয়েছে, যেটি উদাহরণ ওয়েব অ্যাপ ম্যানিফেস্টে তালিকাভুক্ত আছে। এর প্রতিক্রিয়ায় এটি shareTargetHandler() কল করে।

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

` shareTargetHandler() ` ফাংশনটি অ্যাসিঙ্ক্রোনাস। এটি ইভেন্ট গ্রহণ করে, ফর্ম ডেটার জন্য অপেক্ষা করে এবং তারপর সেখান থেকে মিডিয়া ফাইলগুলো পুনরুদ্ধার করে।

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

এরপর আপনি এই ফাইলগুলো দিয়ে আপনার ইচ্ছামত যা খুশি করতে পারেন। আপনি এগুলো ক্যাশ করতে পারেন। একটি ফেচ রিকোয়েস্টের মাধ্যমে এগুলো কোথাও পাঠাতে পারেন। এমনকি আপনি অন্যান্য ম্যানিফেস্ট অপশনগুলোও ব্যবহার করতে পারেন, যেমন—অন্যান্য শেয়ার করা আইটেমগুলোর জন্য কিছু কোয়েরি প্যারামিটারসহ একটি পেজ সার্ভ করা, অথবা ক্যাশ স্টোরেজ এপিআই বা ইনডেক্সডডিবি- তে মিডিয়ার ডেটা ও পয়েন্টারগুলো সংরক্ষণ করা।

আপনি নমুনা অ্যাপ Fugu Journal- এ এটি পরীক্ষা করে দেখতে পারেন এবং এর সোর্স কোডে সার্ভিস ওয়ার্কারের বাস্তবায়ন দেখতে পারেন।

একটি সাধারণ কাজ যা আপনি করতে পারেন তা হলো, আরও ভালো নেটওয়ার্ক সংযোগ না পাওয়া পর্যন্ত শেয়ার করা রিসোর্সগুলো ধরে রাখা। ওয়ার্কবক্স পর্যায়ক্রমিক ব্যাকগ্রাউন্ড সিঙ্কও সমর্থন করে।

উপসংহার

শেয়ার টার্গেট এপিআই হলো আপনার প্রগ্রেসিভ ওয়েব অ্যাপকে ব্যবহারকারীর ডিভাইসের সাথে গভীরভাবে সংযুক্ত করার একটি সহজ উপায়, যা অ্যাপগুলোর মধ্যে কন্টেন্ট শেয়ার করার মতো গুরুত্বপূর্ণ কাজের জন্য সেগুলোকে প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ্লিকেশনের সমতুল্য করে তোলে। কিন্তু এটি করার জন্য সাধারণত অনুরোধ গ্রহণ করার মতো একটি সার্ভারের প্রয়োজন হয়। আপনার সার্ভিস ওয়ার্কারে সরাসরি একটি শেয়ার টার্গেট রুট তৈরি করতে ওয়ার্কবক্স ব্যবহার করার মাধ্যমে, আপনার অ্যাপ এই সীমাবদ্ধতা থেকে মুক্ত থাকে, যা শেয়ার টার্গেটকে অফলাইনে এবং ব্যাকএন্ড ছাড়াই অ্যাপের জন্য কাজ করতে সক্ষম করে।