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

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

Jeff Posnick

Joe Medley

Sam Richard

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

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

एक ही पेज पर

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

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

Elaine Casap की Unsplash पर मौजूद फ़ोटो