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

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

Jeff Posnick

Joe Medley

Sam Richard

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

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

एक ही पेज पर

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

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

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

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

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

नतीजा

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

Unsplash पर एलेन कैसाप की फ़ोटो