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

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

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

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

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

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

फ़ाइल खोलना

किसी फ़ाइल को खोलने के लिए, हम 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();

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

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

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

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

यूआरएल हैंडल करना

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

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

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

वेब शेयर

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

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

• टेक्स्ट (title और text प्रॉपर्टी)
• यूआरएल (url प्रॉपर्टी)
• फ़ाइलें (files प्रॉपर्टी).

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

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

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

वेब शेयर टारगेट एपीआई की मदद से, आपके 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

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

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

...
"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, शेयर किया गया यूआरएल है. window.location स्ट्रिंग से उस डेटा को पढ़ने के लिए, JavaScript का इस्तेमाल किया जा सकता है. इसके लिए, URL कन्स्ट्रक्टर की मदद से, स्ट्रिंग को पार्स करें.

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

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

संपर्क पिकर

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

Contact Picker 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 की मदद से, शेयर किया गया डेटा पाना
• वेब के लिए संपर्क चुनने वाला टूल