Workbox की मदद से, PWA को पहले से मौजूद शेयर किए जाने वाले यूज़र इंटरफ़ेस (यूआई) के साथ इंटिग्रेट करना

सिस्टम-लेवल पर शेयर करने की सुविधा वाले यूज़र इंटरफ़ेस (यूआई) में, प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन के बगल में अपने PWA को दिखाने का तरीका

वेब शेयर टारगेट एपीआई की मदद से, उपयोगकर्ता के सिस्टम-लेवल की शेयर शीट में, इंस्टॉल होने के बाद अपना प्रगतिशील वेब ऐप्लिकेशन दिखाया जा सकता है. अगर आपके पास अनुरोध पाने के लिए कोई सर्वर उपलब्ध है, तो यह तरीका बहुत अच्छा काम करता है. हालांकि, अगर आपके पास कोई सर्वर नहीं है, तो इसे काम कराने में काफ़ी मुश्किल होती है.

इस लेख में, हम Workbox का इस्तेमाल करेंगे. यह वेब ऐप्लिकेशन में ऑफ़लाइन काम करने की सुविधा जोड़ने के लिए, JavaScript लाइब्रेरी का एक सेट है. इससे, शेयर करने के लिए ऐसा टारगेट यूआरएल बनाया जा सकता है जो पूरी तरह से आपके सर्विस वर्कर में मौजूद होता है. इससे स्टैटिक साइटों और एक पेज वाले ऐप्लिकेशन को, खास सर्वर एंडपॉइंट के बिना शेयर टारगेट के तौर पर इस्तेमाल किया जा सकता है.

Android फ़ोन, जिसमें 'इसके ज़रिए शेयर करें' ड्रॉअर खुला है.
सिस्टम-लेवल पर शेयर करने के लिए टारगेट पिकर, जिसमें Share Target Test नाम का इंस्टॉल किया गया PWA एक विकल्प के तौर पर मौजूद है.

एक ही पेज पर

अगर आपको वेब शेयर टारगेट के काम करने के तरीके के बारे में नहीं पता है, तो वेब शेयर टारगेट एपीआई की मदद से शेयर किया गया डेटा पाना लेख पढ़ें. इसमें आपको इस बारे में पूरी जानकारी मिलेगी. यहां इसकी खास जानकारी दी गई है.

वेब शेयर टारगेट की सुविधा को लागू करने के दो हिस्से हैं. सबसे पहले, अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट को अपडेट करें. इससे यह पता चलता है कि आपको अपने ऐप्लिकेशन को इंस्टॉल होने के बाद, शेयर करने के लिए टारगेट बनाना है. इस उदाहरण में, 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 में एक ऐसा रूट रजिस्टर करें जिसे आपका सर्विस वर्कर मैनेज करता है. '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
};

इसके बाद, इन फ़ाइलों का इस्तेमाल अपनी पसंद के मुताबिक किया जा सकता है. इन्हें कैश मेमोरी में सेव किया जा सकता है. फ़ेच करने के अनुरोध की मदद से, उन्हें कहीं भी भेजा जा सकता है. आपके पास मेनिफ़ेस्ट के अन्य विकल्पों का इस्तेमाल करने का भी विकल्प है. जैसे, शेयर किए गए अन्य आइटम के लिए कुछ क्वेरी पैरामीटर के साथ पेज दिखाना या Cache Storage API या IndexedDB में मीडिया का डेटा और पॉइंटर स्टोर करना.

इसे सैंपल ऐप्लिकेशन Fugu Journal पर आज़माया जा सकता है. साथ ही, इसके सोर्स कोड में, सेवा वर्कर को लागू करने का तरीका देखा जा सकता है.

शेयर किए गए संसाधनों को तब तक इस्तेमाल न करें, जब तक बेहतर नेटवर्क कनेक्शन उपलब्ध न हो जाएं. Workbox, समय-समय पर बैकग्राउंड में होने वाले सिंक की सुविधा भी देता है.

नतीजा

Share Target API, उपयोगकर्ता के डिवाइसों में अपने प्रोग्रेसिव वेब ऐप्लिकेशन को बेहतर तरीके से इंटिग्रेट करने का एक आसान तरीका है. इससे, ऐप्लिकेशन के बीच कॉन्टेंट शेयर करने के अहम काम के लिए, उन्हें प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन के बराबर रखा जा सकता है. हालांकि, ऐसा करने के लिए आम तौर पर, अनुरोध पाने के लिए उपलब्ध एक सर्वर की ज़रूरत होती है. सीधे अपने सर्विस वर्कर में शेयर टारगेट का रास्ता बनाने के लिए, Workbox का इस्तेमाल करने पर, आपका ऐप्लिकेशन इस पाबंदी से मुक्त हो जाता है. इससे, शेयर टारगेट ऑफ़लाइन होने पर और बैकएंड के बिना भी ऐप्लिकेशन के लिए काम कर सकता है.

Unsplash पर Elaine Casap की ओर से अपलोड की गई फ़ोटो