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

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

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

फ़ाइलों का इस्तेमाल करने वाला कोई सामान्य उपयोगकर्ता वर्कफ़्लो:

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

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

फ़ाइल खोलना

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

1. फ़ाइल सिस्टम के ऐक्सेस के फ़ाइल पिकर एपीआई से फ़ाइल हैंडल कैप्चर करें. इससे आपको फ़ाइल के बारे में बुनियादी जानकारी मिलती है.
2. हैंडल के getFile() तरीके का इस्तेमाल करने पर, आपको एक खास तरह का Blob मिलेगा, जिसे File कहते हैं. इसमें फ़ाइल से जुड़ी रीड-ओनली प्रॉपर्टी (जैसे कि नाम और पिछली बार बदलाव करने की तारीख) शामिल होती हैं. यह एक Blob है, इसलिए इसका कॉन्टेंट पाने के लिए, Blob के तरीकों का इस्तेमाल करके '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 से आपको अपने ऐप्लिकेशन में फ़ाइलें खोलने की सुविधा मिलती है. हालांकि, यह एपीआई आपको ऐप्लिकेशन में फ़ाइलें खोलने की सुविधा देता है. उपयोगकर्ता अपने पसंदीदा ऐप्लिकेशन को डिफ़ॉल्ट ऐप्लिकेशन के तौर पर सेट करना चाहते हैं, ताकि वे फ़ाइलें खोल सकें. फ़ाइल हैंडलिंग एपीआई, प्रयोग के तौर पर शुरू किया गया एक एपीआई है. इसकी मदद से, इंस्टॉल किए गए पीडब्ल्यूए की मदद से: उपयोगकर्ता के डिवाइस पर फ़ाइल हैंडलर के तौर पर रजिस्टर करें. इसमें वह MIME टाइप और फ़ाइल एक्सटेंशन तय किया जा सकता है जिसका इस्तेमाल आपके वेब ऐप्लिकेशन मेनिफ़ेस्ट में PWA के ज़रिए किया जा सकता है. इस्तेमाल किए जा सकने वाले एक्सटेंशन के लिए, कस्टम फ़ाइल आइकॉन तय किए जा सकते हैं.

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

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

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

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

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

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

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

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

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

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

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

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

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

दूसरे ऐप्लिकेशन पर कॉल करना

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

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

वेब शेयर

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

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

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

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

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

वेब शेयर टारगेट

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

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

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

action

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

method

एचटीटीपी क्रिया के तरीके का इस्तेमाल, कार्रवाई के लिए किया जाएगा, जैसे कि GET, POST या PUT.

enctype

(ज़रूरी नहीं) पैरामीटर के लिए एन्कोडिंग का टाइप, डिफ़ॉल्ट रूप से application/x-www-form-urlencoded पर सेट होता है. हालांकि, POST जैसे तरीकों के लिए, इसे multipart/form-data के तौर पर भी सेट किया जा सकता है.

params

एक ऑब्जेक्ट जो शेयर किए गए डेटा (वेब शेयर की कुंजियों से: title, text, url, और files) को उन तर्क के साथ मैप करेगा जिन्हें ब्राउज़र, चुनी गई एन्कोडिंग का इस्तेमाल करके, यूआरएल (method: 'GET' पर) या अनुरोध के मुख्य हिस्से में पास करेगा.

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

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

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

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

ज़्यादा जानकारी वाले उदाहरणों और फ़ाइलें पाने का तरीका जानने के लिए, Web Share Target API की मदद से शेयर किया गया डेटा पाना लेख पढ़ें

संपर्क पिकर

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

Contact पिकर API, मुख्य रूप से मोबाइल डिवाइसों पर उपलब्ध है. यह 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.
   }
}

संसाधन

• File System Access API: लोकल फ़ाइलों को ऐक्सेस करना आसान बनाना
• इंस्टॉल किए गए वेब ऐप्लिकेशन को फ़ाइल हैंडलर बनाने की अनुमति देना
• प्रोग्रेसिव वेब ऐप्लिकेशन में फ़ाइलें मैनेज करना
• Web Share API की मदद से, ओएस शेयर करने के यूज़र इंटरफ़ेस (यूआई) के साथ इंटिग्रेट करना
• अन्य ऐप्लिकेशन के साथ कॉन्टेंट शेयर करना
• Web Share Target API की मदद से, शेयर किया गया डेटा पाना
• वेब के लिए संपर्क पिकर