ओएस इंटिग्रेशन

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

फ़ाइल सिस्टम के साथ काम करना

फ़ाइलों का इस्तेमाल करने वाला सामान्य उपयोगकर्ता वर्कफ़्लो ऐसा दिखता है:

  • डिवाइस से कोई फ़ाइल या फ़ोल्डर चुनें और उसे सीधे खोलें.
  • उन फ़ाइलों या फ़ोल्डर में बदलाव करें और बदलावों को सीधे तौर पर सेव करें.
  • नई फ़ाइलें और फ़ोल्डर बनाना.

File System Access API से पहले, वेब ऐप्लिकेशन यह काम नहीं करते थे. फ़ाइलें खोलने के लिए, फ़ाइल अपलोड करना ज़रूरी था. बदलावों को सेव करने के लिए, उपयोगकर्ताओं को उन्हें डाउनलोड करना पड़ता था. साथ ही, वेब के पास उपयोगकर्ता के फ़ाइल सिस्टम में नई फ़ाइलें और फ़ोल्डर बनाने का ऐक्सेस नहीं था.

फ़ाइल खोलना

किसी फ़ाइल को खोलने के लिए हम window.showOpenFilePicker() तरीके का इस्तेमाल करते हैं. ध्यान दें कि इस तरीके के लिए उपयोगकर्ता जेस्चर की ज़रूरत होती है, जैसे कि बटन पर क्लिक करना. फ़ाइल खोलने के लिए शेष सेटअप यहां दिया गया है:

  1. फ़ाइल सिस्टम ऐक्सेस के फ़ाइल पिकर एपीआई से, फ़ाइल हैंडल को कैप्चर करें. इससे आपको फ़ाइल के बारे में बुनियादी जानकारी मिलती है.
  2. हैंडल के getFile() तरीके का इस्तेमाल करने पर, आपको एक खास तरह की Blob वैल्यू मिलेगी, जिसे File कहा जाता है. इसमें फ़ाइल से जुड़ी अतिरिक्त रीड-ओनली प्रॉपर्टी शामिल होती हैं. जैसे, नाम और पिछली बार किए गए बदलाव की तारीख. यह एक ब्लॉब है, इसलिए इसका कॉन्टेंट पाने के लिए इस पर ब्लॉब के तरीकों को कॉल किया जा सकता है, जैसे कि text().
// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

बदलाव सेव किए जा रहे हैं

किसी फ़ाइल में किए गए बदलाव सेव करने के लिए, आपको उपयोगकर्ता जेस्चर की भी ज़रूरत होगी. इसके बाद:

  1. FileSystemWritableFileStream बनाने के लिए फ़ाइल हैंडल का इस्तेमाल करें.
  2. स्ट्रीम में बदलाव करें. इससे फ़ाइल अपने-आप अपडेट नहीं होगी. इसके बजाय, आम तौर पर एक अस्थायी फ़ाइल बनाई जाती है.
  3. आखिर में, सभी बदलाव करने के बाद, स्ट्रीम को बंद कर दिया जाता है. इससे, बदलाव अस्थायी से स्थायी में बदल जाएंगे.

इसे कोड में देखते हैं:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

फ़ाइल मैनेज करना

File System Access API की मदद से, अपने ऐप्लिकेशन में फ़ाइलें खोली जा सकती हैं. हालांकि, क्या इसका दूसरा तरीका है? फ़ाइलें खोलने के लिए, उपयोगकर्ता अपने पसंदीदा ऐप्लिकेशन को डिफ़ॉल्ट ऐप्लिकेशन के तौर पर सेट करना चाहते हैं. फ़ाइल मैनेज करने वाला एपीआई, प्रयोग के तौर पर इस्तेमाल होने वाला ऐसा एपीआई है जो PWA को इंस्टॉल करने की अनुमति देता है: किसी उपयोगकर्ता के डिवाइस पर फ़ाइल हैंडलर के तौर पर रजिस्टर करें. इसमें ऐसे MIME टाइप और फ़ाइल एक्सटेंशन की जानकारी होती है जो आपका PWA आपके वेब ऐप्लिकेशन मेनिफ़ेस्ट में काम करता है. इस्तेमाल किए जा सकने वाले एक्सटेंशन के लिए, कस्टम फ़ाइल आइकॉन के बारे में बताया जा सकता है.

रजिस्टर होने के बाद, आपका इंस्टॉल किया गया PWA, उपयोगकर्ता के फ़ाइल सिस्टम से विकल्प के तौर पर दिखेगा. इससे उपयोगकर्ता, सीधे उस PWA में फ़ाइल खोल सकेगा. टेक्स्ट फ़ाइलों को पढ़ने के लिए, PWA के मेनिफ़ेस्ट सेटअप का एक उदाहरण यहां दिया गया है:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

यूआरएल मैनेज करना

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

WebAPK का इस्तेमाल करने पर, यह सुविधा Android पर अपने-आप उपलब्ध हो जाती है. जैसे, जब उपयोगकर्ता, Chrome पर PWA इंस्टॉल करते हैं. iOS और iPadOS पर इंस्टॉल किए गए PWA पर, Safari से यूआरएल कैप्चर नहीं किए जा सकते.

डेस्कटॉप ब्राउज़र के लिए, वेब ब्राउज़र समुदाय ने एक नई स्पेसिफ़िकेशन बनाई है. फ़िलहाल, यह स्पेसिफ़िकेशन एक्सपेरिमेंट के तौर पर उपलब्ध है. इसमें मेनिफ़ेस्ट फ़ाइल के एक नए सदस्य को जोड़ा गया है: url_handlers. इस प्रॉपर्टी को ऐसे ऑरिजिन की ज़रूरत होती है जिन्हें PWA कैप्चर करना चाहता है. आपके PWA का ऑरिजिन अपने-आप असाइन हो जाएगा. साथ ही, एक-दूसरे ऑरिजिन को web-app-origin-association नाम वाली फ़ाइल से, हैंडलिंग के इस तरीके को स्वीकार करना होगा. उदाहरण के लिए, अगर आपके PWA का मेनिफ़ेस्ट, web.dev पर होस्ट किया गया है और आपको app.web.dev ऑरिजिन जोड़ना है, तो यह ऐसा दिखेगा:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

इस मामले में, ब्राउज़र यह जांच करेगा कि app.web.dev/.well-known/web-app-origin-association पर कोई फ़ाइल मौजूद है या नहीं. इसके लिए, PWA स्कोप यूआरएल से यूआरएल हैंडलिंग का तरीका स्वीकार किया जाएगा. डेवलपर को यह फ़ाइल बनानी होगी. नीचे दिए गए उदाहरण में, फ़ाइल कुछ इस तरह दिखती है:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

यूआरएल प्रोटोकॉल को हैंडल करना

यूआरएल मैनेज करने की सुविधा, स्टैंडर्ड https प्रोटोकॉल यूआरएल के साथ काम करती है, लेकिन कस्टम यूआरआई-स्कीम का इस्तेमाल किया जा सकता है, जैसे कि pwa://. कई ऑपरेटिंग सिस्टम में, इंस्टॉल किए गए ऐप्लिकेशन को यह सुविधा मिलती है. इस वजह से, वे ऐप्लिकेशन अपनी स्कीम रजिस्टर करते हैं.

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

रजिस्टर करने के लिए, registerProtocolHandler() तरीके का इस्तेमाल करें या मेनिफ़ेस्ट में protocol_handlers मेंबर का इस्तेमाल करें. इसके लिए, अपनी पसंद की स्कीम और यूआरएल के साथ उसे PWA के कॉन्टेक्स्ट में लोड किया जा सकता है, जैसे कि:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

यूआरएल from-protocol को सही हैंडलर पर भेजा जा सकता है. साथ ही, अपने PWA में क्वेरी स्ट्रिंग value पाई जा सकती है. %s, एस्केप किए गए यूआरएल के लिए एक प्लेसहोल्डर है, जो कार्रवाई को ट्रिगर करता है. इसलिए, अगर आपके पास <a href="web+pwa://testing"> जैसा कोई लिंक है, तो आपका PWA /from-protocol?value=testing खोलेगा.

अन्य ऐप्लिकेशन को कॉल करना

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

आम तौर पर, जाने-माने स्टैंडर्ड स्कीम का इस्तेमाल किया जा सकता है. जैसे, फ़ोन कॉल के लिए tel:, ईमेल भेजने के लिए mailto: या टेक्स्ट मैसेज भेजने के लिए sms:. इसके अलावा, आपको अन्य ऐप्लिकेशन की यूआरएल स्कीम के बारे में भी जानकारी मिल सकती है. उदाहरण के लिए, जाने-माने मैसेज सेवा, मैप, नेविगेशन, ऑनलाइन मीटिंग, सोशल नेटवर्क, और ऐप स्टोर.

वेब शेयर

ब्राउज़र सहायता

  • 89
  • 93
  • 78 जीबी में से

सोर्स

Web Share API की मदद से, आपका PWA शेयर किए गए चैनल से, डिवाइस में इंस्टॉल किए गए दूसरे ऐप्लिकेशन को कॉन्टेंट भेज सकता है.

यह एपीआई सिर्फ़ share तरीके वाले ऑपरेटिंग सिस्टम पर उपलब्ध है. इनमें Android, iOS, iPadOS, Windows, और ChromeOS शामिल हैं. आपके पास कोई ऐसा ऑब्जेक्ट शेयर करने का विकल्प होता है जिसमें ये चीज़ें हों:

  • टेक्स्ट (title और text प्रॉपर्टी)
  • यूआरएल (url प्रॉपर्टी)
  • Files (files प्रॉपर्टी).

मौजूदा डिवाइस में टेक्स्ट जैसे सामान्य डेटा को शेयर किया जा सकता है या नहीं, यह पता करने के लिए navigator.share() तरीके का इस्तेमाल किया जाता है, ताकि उन फ़ाइलों को शेयर किया जा सके जिन्हें आपने navigator.canShare() तरीके से शेयर किया है या नहीं.

शेयर करने की कार्रवाई का अनुरोध करने के लिए, आपने navigator.share(objectToShare) को कॉल किया है. यह कॉल, प्रॉमिस को undefined से रिज़ॉल्व करता है या अपवाद के साथ अस्वीकार करता है.

Android पर Chrome और iOS पर Safari, वेब शेयर की मदद से &#39;शेयर की गई शीट&#39; खोल रहा है.

वेब शेयर लक्ष्य

वेब शेयर टारगेट एपीआई की मदद से, आपके PWA को उस डिवाइस पर किसी दूसरे ऐप्लिकेशन से शेयर ऑपरेशन का टारगेट बनाने की सुविधा मिलती है, चाहे वह PWA हो या न हो. किसी दूसरे ऐप्लिकेशन से शेयर किया गया डेटा, आपके PWA को मिलता है.

फ़िलहाल, यह WebAPK और ChromeOS वाले Android पर उपलब्ध है. साथ ही, यह सिर्फ़ तब काम करता है, जब उपयोगकर्ता आपका PWA इंस्टॉल करता है. ऐप्लिकेशन इंस्टॉल होने पर ब्राउज़र, ऑपरेटिंग सिस्टम में शेयर टारगेट को रजिस्टर करता है.

आपने मेनिफ़ेस्ट में वेब शेयर टारगेट को, वेब शेयर टारगेट ड्राफ़्ट की खास जानकारी में तय किए गए share_target सदस्य के साथ सेट अप किया है. share_target को कुछ प्रॉपर्टी वाले ऑब्जेक्ट पर सेट किया गया है:

action
वह यूआरएल जिसे PWA विंडो में लोड किया जाएगा, जिसमें शेयर किया गया डेटा मिलने की उम्मीद है.
method
कार्रवाई के लिए, एचटीटीपी क्रिया के तरीके का इस्तेमाल किया जाएगा, जैसे कि GET, POST या PUT.
enctype
(ज़रूरी नहीं) पैरामीटर को कोड में बदलने का टाइप डिफ़ॉल्ट रूप से application/x-www-form-urlencoded होता है. हालांकि, POST जैसे तरीकों के लिए, इसे multipart/form-data के तौर पर भी सेट किया जा सकता है.
params
एक ऑब्जेक्ट जो डेटा को मैप करेगा (वेब शेयर की कुंजियों: title, text, url, और files से वेब शेयर करने के लिए) और चुने गए कोड में बदलने के तरीके का इस्तेमाल करके, ब्राउज़र यूआरएल (method: 'GET' पर) या अनुरोध के मुख्य भाग में जो डेटा शेयर करेगा.

उदाहरण के लिए, अपने PWA को यह तय किया जा सकता है कि आपको मेनिफ़ेस्ट में शामिल करके, शेयर किया गया डेटा (सिर्फ़ टाइटल और यूआरएल) पाना है:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

अगर सिस्टम में मौजूद किसी ऐप्लिकेशन में टाइटल वाला यूआरएल शेयर किया गया है और उपयोगकर्ता डायलॉग से आपके PWA को चुनता है, तो ब्राउज़र आपके ऑरिजिन के /receive-share/?shared_title=AAA&shared_url=BBB पर एक नया नेविगेशन बनाएगा. इसमें एएए शेयर किया गया टाइटल है और BBB शेयर किया गया यूआरएल है. window.location स्ट्रिंग से डेटा को पढ़ने के लिए, JavaScript का इस्तेमाल किया जा सकता है. इसके लिए, आपको URL कंस्ट्रक्टर की मदद से उसे पार्स करना होगा.

ब्राउज़र आपके मेनिफ़ेस्ट में मौजूद PWA के नाम और आइकॉन का इस्तेमाल करेगा, ताकि ऑपरेटिंग सिस्टम के शेयर की एंट्री को फ़ीड किया जा सके. इस काम के लिए दूसरा सेट नहीं चुना जा सकता.

ज़्यादा जानकारी वाले उदाहरणों और फ़ाइलें पाने के तरीके के लिए, वेब शेयर टारगेट एपीआई से शेयर किया गया डेटा पाना देखें

संपर्क पिकर

ब्राउज़र सहायता

  • x
  • x
  • x
  • x

सोर्स

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

कॉन्टैक्ट पिकर एपीआई मुख्य रूप से मोबाइल डिवाइसों पर उपलब्ध है. navigator.contacts इंटरफ़ेस की मदद से, यह एपीआई काम करने वाले प्लैटफ़ॉर्म पर पूरा होता है.

navigator.contacts.getProperties() से क्वेरी करने के लिए, उपलब्ध प्रॉपर्टी के लिए अनुरोध करें. साथ ही, अपनी पसंद की प्रॉपर्टी की सूची के साथ, एक या एक से ज़्यादा संपर्क चुनने का अनुरोध करें.

कुछ सैंपल प्रॉपर्टी, name, email, address, और tel हैं. जब उपयोगकर्ता को एक या उससे ज़्यादा संपर्क चुनने के लिए कहा जाता है, तब navigator.contacts.select(properties) को कॉल किया जा सकता है. ऐसा करने के लिए, आपको जिन प्रॉपर्टी का जवाब देना है उन्हें अलग-अलग कैटगरी में बांटा जा सकता है.

नीचे दिए गए सैंपल में, पिकर को मिले संपर्कों की सूची होगी.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

रिसॉर्स