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

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

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

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

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

एक ही पेज पर

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

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

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

नतीजा

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

Unस्प्लैश पर एलेन कासैप की फ़ोटो