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

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

Jeff Posnick

Joe Medley

Sam Richard

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

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

একটি ইনস্টল করা PWA সহ সিস্টেম-স্তরের শেয়ার টার্গেট পিকার যাকে একটি বিকল্প হিসাবে Share Target Test বলা হয়।

একই পৃষ্ঠায়

ওয়েব শেয়ার টার্গেট কিভাবে কাজ করে তার সাথে আপনি যদি অপরিচিত হন, তাহলে ওয়েব শেয়ার টার্গেট API এর সাথে শেয়ার করা ডেটা প্রাপ্তি আপনাকে একটি গভীরতার পরিচয় দেয়। এখানে একটি দ্রুত পর্যালোচনা.

ওয়েব শেয়ার টার্গেট কার্যকারিতা বাস্তবায়নের দুটি অংশ রয়েছে। প্রথমে, আপনার ওয়েব অ্যাপ ম্যানিফেস্ট আপডেট করুন যাতে ইঙ্গিত করা যায় যে আপনি ইনস্টল করার সময় আপনার অ্যাপ শেয়ারের লক্ষ্য হতে চান। নিম্নলিখিত উদাহরণটি একটি POST অনুরোধের মাধ্যমে শেয়ারগুলিকে /share url-এ নির্দেশ করে৷ এটি একটি মাল্টিপার্ট ফর্ম হিসাবে এনকোড করা হয়, যার শিরোনামকে 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-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
};

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

আপনি নমুনা অ্যাপ ফুগু জার্নালে এটি চেষ্টা করে দেখতে পারেন এবং এর সোর্স কোডে এর পরিষেবা কর্মী বাস্তবায়ন দেখতে পারেন।

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

উপসংহার

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

আনস্প্ল্যাশে ইলেইন ক্যাসাপের ছবি