प्रोग्रेसिव वेब ऐप्लिकेशन, स्क्रीन पर कॉन्टेंट को रेंडर करने या वेब सेवाओं से कनेक्ट करने के अलावा और भी बहुत कुछ कर सकते हैं. PWA, फ़ाइल सिस्टम की फ़ाइलों को मैनेज कर सकते हैं, सिस्टम के क्लिपबोर्ड से इंटरैक्ट कर सकते हैं, डिवाइस से कनेक्ट किए गए हार्डवेयर को ऐक्सेस कर सकते हैं, और अन्य काम कर सकते हैं. आपके PWA के लिए, हर वेब एपीआई उपलब्ध है. साथ ही, आपका ऐप्लिकेशन इंस्टॉल होने पर, कुछ और एपीआई उपलब्ध होते हैं.
यह जानने के लिए कि हर प्लैटफ़ॉर्म पर क्या-क्या किया जा सकता है, आज वेब क्या कर सकता है का इस्तेमाल किया जा सकता है. अलग-अलग एपीआई या सुविधाओं के लिए, क्या मैं इस्तेमाल कर सकता/सकती हूं या एमडीएन पर ब्राउज़र के साथ काम करने वाली टेबल का इस्तेमाल किया जा सकता है.
यह देखने के लिए हमेशा जांच करें कि सुविधा उपलब्ध है या नहीं
PWA का पहला अक्षर प्रोग्रेसिव का है. यह प्रोग्रेसिव एन्हैंसमेंट और सुविधा की पहचान करने के आइडिया से आता है. आपको यह उम्मीद नहीं करनी चाहिए कि आपका ऐप्लिकेशन हर डिवाइस पर एक ही तरह से काम करे. अलग-अलग देशों में, अरबों डिवाइसों पर अलग-अलग तरह के कॉन्टेक्स्ट और सुविधाएं उपलब्ध होने की वजह से, PWA एक बेहतरीन प्लैटफ़ॉर्म बन गए हैं. ऐसा उनकी प्रोग्रेस की वजह से हुआ है.
इसका मतलब है कि आपको अपना ऐप्लिकेशन ऐसे लेयर में डेवलप करना होगा जो शायद हर डिवाइस के लिए उपलब्ध न हो. साथ ही, इस्तेमाल करने से पहले यह भी देखा जा सकता है कि ऐप्लिकेशन उपलब्ध है या नहीं.
आपको JavaScript का इस्तेमाल करके पता लगाना होगा कि उस पर कोई एपीआई मौजूद है या नहीं. इसके अलावा, आपको एपीआई से पूछना होगा कि उस डिवाइस पर कोई सेवा उपलब्ध है या नहीं.
पावरफ़ुल वेब
आज के समय में वेब बहुत तेज़ी से काम कर रहा है. उदाहरण के लिए:
- आपके पास WebRTC, जियोलोकेशन, और पुश मैसेज की मदद से, हाइपरलोकल वीडियो चैट ऐप्लिकेशन बनाने का विकल्प होता है.
- किसी ऐप्लिकेशन को इंस्टॉल किया जा सकने वाला ऐप्लिकेशन बनाया जा सकता है.
- WebAssembly की मदद से, वीडियो इफ़ेक्ट जोड़े जा सकते हैं.
- इसे WebGL और WebXR के साथ वर्चुअल रिएलिटी में भी उपलब्ध कराया जा सकता है.
आपके PWA को बेहतर बनाना
PWA की सुविधाओं के एपीआई को चार ग्रुप में बांटें:
- हरा: तकनीकी रूप से मुमकिन होने पर, एपीआई हर प्लैटफ़ॉर्म पर हर ब्राउज़र के लिए उपलब्ध है. इनमें से ज़्यादातर प्रॉडक्ट, कई सालों से शिप किए जा चुके हैं. साथ ही, इन्हें मैच्योर माना जाता है और इनका इस्तेमाल बेफ़िक्र होकर किया जा सकता है. जियोलोकेशन एपीआई, इस ग्रुप का उदाहरण है.
- हल्का हरा: एपीआई सिर्फ़ कुछ ब्राउज़र पर उपलब्ध हैं. कुछ प्लैटफ़ॉर्म पर सुविधा की कमी को ध्यान में रखते हुए, वे ब्राउज़र के साथ काम करने वाले सबग्रुप के अंदर परिपक्व हो गए. ऐसा इसलिए किया गया, ताकि आप उन पर पूरे भरोसे के साथ क्षमता का इस्तेमाल कर सकें. इस ग्रुप के एपीआई का उदाहरण WebUSB है.
- पीला: प्रयोग के तौर पर इस्तेमाल किए जा रहे एपीआई. ये एपीआई फ़िलहाल मैच्योर नहीं हैं. ये सिर्फ़ कुछ ब्राउज़र पर और टेस्ट या ट्रायल में उपलब्ध हैं. हमने प्रयोग के तौर पर उपलब्ध चैप्टर में इन सुविधाओं के बारे में कुछ चर्चा की थी.
- लाल रंग: यह उन एपीआई का ग्रुप है जिन्हें PWA में इस्तेमाल नहीं किया जा सकता. साथ ही, जिन्हें जोड़ने का प्लान लंबी अवधि के लिए है. इस ग्रुप के एपीआई का एक उदाहरण जियोफ़ेंसिंग है.
ग्रीन का इस्तेमाल करने की क्षमता
यहां उन अहम सुविधाओं की सूची दी गई है जिन्हें PWA में इस्तेमाल किया जा सकता है.
बुनियादी बातें
- जैसा कि कैशिंग चैप्टर में बताया गया है, कैश एपीआई का इस्तेमाल करके डिवाइसों को कैश मेमोरी में सेव करना.
- वेब वर्कर की मदद से, थ्रेड में टास्क पूरे करना, जैसा कि हमने कॉम्प्लेक्सिटी मैनेजमेंट चैप्टर में देखा.
- सर्विस वर्कर में अलग-अलग रणनीतियों के साथ नेटवर्क अनुरोधों को मैनेज करना, जैसा कि सर्विस वर्कर चैप्टर में बताया गया है.
- 2D कैनवस: इसकी मदद से, Canvas API का इस्तेमाल करके, स्क्रीन पर 2D ग्राफ़िक रेंडर किए जा सकते हैं.
- 3D ग्राफ़िक को रेंडर करने के लिए, 2D और 3D बेहतरीन परफ़ॉर्मेंस वाला कैनवस या WebGL.
- परफ़ॉर्मेंस के लिए, लो-लेवल के कंपाइल किए गए कोड को एक्ज़ीक्यूट करने के लिए, WebAssembly या WASM.
- WebRTC API का इस्तेमाल करके, रीयल-टाइम कम्यूनिकेशन.
- वेब परफ़ॉर्मेंस एपीआई का इस्तेमाल करता है, ताकि बेहतर अनुभव देने में मदद मिल सके और उसका आकलन किया जा सके. ज़्यादा जानकारी के लिए, Performance API की गाइड देखें.
- IndexedDB और स्टोरेज मैनेजमेंट के साथ डेटा को स्थानीय तौर पर स्टोर करें, ताकि कोटा के लिए क्वेरी की जा सके और स्थायी स्टोरेज का अनुरोध किया जा सके. इस बारे में ऑफ़लाइन डेटा चैप्टर में बताया गया है.
- हल्की क्वालिटी वाला ऑडियो, Web Audio API का इस्तेमाल करके.
- पेज विज़िबिलिटी एपीआई का इस्तेमाल करके, फ़ोरग्राउंड की पहचान.
- फ़ेच एपीआई और WebSocket API का इस्तेमाल करके, नेटवर्क कम्यूनिकेशन.
हार्डवेयर और सेंसर
- भौगोलिक स्थान Geolocation API के ज़रिए सैटलाइट या वाई-फ़ाई जैसे अलग-अलग कंपनियों की मदद से उपयोगकर्ता की जगह की जानकारी हासिल करता है.
- कैमरा और माइक्रोफ़ोन मीडिया डिवाइस इंटरफ़ेस का इस्तेमाल करके, कैमरे और माइक्रोफ़ोन से मीडिया स्ट्रीम पाते हैं.
- सेंसर, सेंसर एपीआई या DeviceMotionEvent और DeviceOrientationEvent जैसे पुराने इंटरफ़ेस का इस्तेमाल करके, एक्सलरोमीटर, जाइरोस्कोप, मैग्नेटोमीटर, और अन्य चीज़ों से रीयल-टाइम जानकारी इकट्ठा करते हैं. Safari पर, उनका इस्तेमाल करने के लिए आपको गैर-मानक अनुमति वाले डायलॉग अनुरोध का इस्तेमाल करना होगा.
- टच और पॉइंटर को उंगली, माउस, ट्रैकपैड या पेन से किए जाने वाले सभी टच और पॉइंटर पर आधारित क्लिक की जानकारी मिलती है. यह जानकारी, पॉइंटर इवेंट और टच इवेंट की मदद से हासिल की जा सकती है.
- Gamepad API का इस्तेमाल करके, डिवाइस से कनेक्ट किए गए स्टैंडर्ड गेमपैड और जॉयस्टिक से मिलने वाली जानकारी पढ़ने के लिए, गेमपैड.
- वेब से पुष्टि करने या WebAuthn का इस्तेमाल करके, बायोमेट्रिक से पुष्टि करने की सुविधा. जैसे, चेहरे या फ़िंगरप्रिंट की पहचान.
ऑपरेटिंग सिस्टम का इंटिग्रेशन
- बोली को लेख में बदलने और आवाज़ की पहचान करने की सुविधा में, प्लैटफ़ॉर्म पर इंस्टॉल की गई आवाज़ों का इस्तेमाल, उपयोगकर्ता से बात करने और यह पहचानने के लिए किया जाता है कि उपयोगकर्ता क्या बोल रहा है. ऐसा Web Speech API की मदद से किया जाता है.
- Web Share API का इस्तेमाल करके, अपने PWA से डिवाइस पर मौजूद अन्य ऐप्लिकेशन और जगहों पर कॉन्टेंट शेयर करें. इस बारे में हम ओएस इंटिग्रेशन चैप्टर में बताएंगे.
- ओएस इंटिग्रेशन चैप्टर में बताए गए तरीके से, Clipboard API का इस्तेमाल करके, क्लिपबोर्ड पर मौजूद कॉन्टेंट को अलग-अलग फ़ॉर्मैट में सेव और वापस पाने के लिए, क्लिपबोर्ड को ऐक्सेस करें.
- क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल करके, उपयोगकर्ता के क्रेडेंशियल और पासवर्ड मैनेज करें.
- पिक्चर में पिक्चर एपीआई इस्तेमाल करके, ओएस में पिक्चर में पिक्चर की सुविधा के साथ वीडियो चलाने की सुविधा चालू करें.
- Fullscreen API की मदद से, पूरी स्क्रीन पर कॉन्टेंट को रेंडर करें. इस बारे में, हमने Windows चैप्टर में बताया है.
हल्के हरे रंग में इस्तेमाल की जा सकने वाली सुविधाएं
यहां उन ज़रूरी सुविधाओं की सूची दी गई है जिनका इस्तेमाल PWA में किया जा सकता है. इसमें यह भी बताया गया है कि हो सकता है कि ये सुविधाएं हर ब्राउज़र पर उपलब्ध न हों.
बुनियादी बातें
- WebGL 2.0, WebGL 3.0 से मिलान करने के लिए, WebGL के स्पेसिफ़िकेशन का नया वर्शन है.
- कोडेक, ऑडियो के अलग-अलग फ़्रेम और वीडियो के अलग-अलग फ़्रेम के लिए लो-लेवल का ऐक्सेस. यह उन वेब ऐप्लिकेशन के लिए काम का है जिन्हें वेब कोडेक एपीआई की मदद से, मीडिया प्रोसेस करने के तरीके पर पूरा कंट्रोल चाहिए.
हार्डवेयर और सेंसर
- मीडिया एपीआई के साथ-साथ, पैन, झुकाने, और ज़ूम करने के कंट्रोल को ऐक्सेस करने के लिए, कैमरे के बेहतर कंट्रोल.
- Web Bluetooth API का इस्तेमाल करके, उपयोगकर्ता के आस-पास मौजूद ब्लूटूथ कम ऊर्जा वाले डिवाइसों से संपर्क करने के लिए, ब्लूटूथ LE. ज़्यादा जानकारी के लिए, JavaScript का इस्तेमाल करके ब्लूटूथ डिवाइसों से बातचीत करना देखें.
- नियर फ़ील्ड कम्यूनिकेशन के लिए, कम वज़न वाले एनएफ़सी डेटा एक्सचेंज फ़ॉर्मैट (एनडीएफ़) के मैसेज का इस्तेमाल करके, एनएफ़सी पर डेटा शेयर किया जा सकता है. जैसे, Webएनएफ़सी API का इस्तेमाल करके, एनएफ़सी टैग या कार्ड का इस्तेमाल किया जाता है. ज़्यादा जानकारी के लिए, Android के लिए Chrome पर एनएफ़सी डिवाइसों के साथ इंटरैक्ट करना भी देखा जा सकता है.
वेब सीरियल डब्ल्यूपीआई की मदद से, ब्लूटूथ पर सीरियल पोर्ट, यूएसबी या सीरियल का इस्तेमाल करके, डिवाइस से कनेक्ट किए गए डिवाइसों को लो-लेवल ऐक्सेस करने के लिए सीरियल सहायक डिवाइस. नीचे दिए गए लिंक की मदद से, सीरियल पोर्ट से पढ़ने और उस पर लिखने का तरीका जाना जा सकता है.
यूएसबी डिवाइस का ऐक्सेस, ताकि यूएसबी WebUSB API की मदद से कनेक्ट किए गए डिवाइसों से संपर्क किया जा सके. ज़्यादा जानकारी के लिए, वेब पर यूएसबी डिवाइसों का ऐक्सेस देखें.
मैन्युअल इंटरफ़ेस डिवाइस की मदद से, आपके PWA को ऐसे किसी भी डिवाइस के साथ इंटरैक्ट करने की सुविधा मिलती है जिसे इंसान के इंटरैक्शन के लिए तैयार किया गया है. हालांकि, ऐसा WebHID API का इस्तेमाल करके असामान्य होता है. असामान्य एचआईडी डिवाइसों से कनेक्ट करने के बारे में यह गाइड देखें.
- ऐंबियंट लाइट की मदद से, सेंसर एपीआई के अलावा, डिवाइस के आस-पास की रोशनी के मौजूदा लेवल या रोशनी का पता लगाया जाता है.
- अगर डिवाइस पर कुछ सुविधाएं काम करती हैं, तो वाइब्रेशन Vibration API के ज़रिए उपयोगकर्ता को हैप्टिक फ़ीडबैक देता है.
- रिकॉर्डिंग सुविधा MediaRecorder API की मदद से, विश्लेषण करने, प्रोसेस करने या डिस्क में सेव करने के लिए, MediaStream या HTMLMediaElement ऑब्जेक्ट (जैसे कि
<video>टैग) से जनरेट किए गए डेटा को कैप्चर करती है. - स्क्रीन वेक लॉक एपीआई का इस्तेमाल करके, स्क्रीन पर वेक लॉक लागू करने से आपके PWA को चालू रहने की ज़रूरत होने पर डिवाइस की रोशनी कम होने या स्क्रीन लॉक होने से बचती है.
- वर्चुअल रिएलिटी की मदद से, अपने PWA में हेडसेट और दूसरे डिवाइसों का इस्तेमाल किया जा सकता है. ऐसा WebXR Device API की मदद से किया जा सकता है.
- आपके PWA में, ऑगमेंटेड रिएलिटी (एआर) की सुविधा को कई तरीकों से हासिल किया जा सकता है. जैसे, WebXR Device API या एआर कॉन्टेंट के लिए Safari क्विक लुक ऐप्लिकेशन.
- आइडल डिटेक्शन एपीआई की मदद से, इनऐक्टिव उपयोगकर्ताओं का पता लगाएं.
- स्क्रीन पर PWA के होने पर, ओरिएंटेशन लॉक ओरिएंटेशन को पोर्ट्रेट या लैंडस्केप पर लॉक करता है. ऐसा स्क्रीन ओरिएंटेशन एपीआई या इंस्टॉल किए गए ऐप्लिकेशन के लिए वेब ऐप्लिकेशन मेनिफ़ेस्ट की
orientationप्रॉपर्टी से किया जाता है. - प्रज़ेंटेशन एपीआई की मदद से, प्रोजेक्टर और सेकंडरी डिसप्ले पर कॉन्टेंट प्रज़ेंट करें.
- Pointer Lock API की मदद से, रैंक की वैल्यू के बजाय पॉइंटर (माइस, ट्रैकपैड, और पॉइंटर) से डेल्टा की गिनती की जानकारी पाने के लिए, पॉइंटर लॉक करें. यह कुछ गेम के लिए काम का होता है.
ऑपरेटिंग सिस्टम का इंटिग्रेशन
- डिवाइस पर फ़ाइलें पढ़ना और उनमें बदलाव करना, File System Access API की मदद से, हमने उसे ओएस इंटिग्रेशन चैप्टर में देखा था.
- वेब शेयर टारगेट का इस्तेमाल करके, दूसरे ऐप्लिकेशन से कॉन्टेंट पाएं, जैसा कि मैंने ओएस इंटिग्रेशन चैप्टर में दिखाया था.
- संपर्क पिकर एपीआई का इस्तेमाल करके, संपर्क का डेटा पाएं, जैसा कि ओएस इंटिग्रेशन चैप्टर में दिखाया गया है.
- बैकग्राउंड में सिंक करें जबकि PWA का इस्तेमाल न किया जा रहा हो, लेकिन इसके लिए बैकग्राउंड सिंक करने की सुविधा वाला एपीआई इस्तेमाल करें.
- PWA के इस्तेमाल में न होने पर, टास्क शेड्यूल करने की सुविधा का इस्तेमाल किया जा सकता है. यह सुविधा, वेब पर कुछ समय के लिए उपलब्ध बैकग्राउंड सिंक करने की एपीआई का इस्तेमाल करती है.
- वेब पुश और वेब नोटिफ़िकेशन एपीआई का इस्तेमाल करके सूचनाएं भेजें.
- जब उपयोगकर्ता आपके PWA का इस्तेमाल न कर रहा हो, तब बैकग्राउंड में फ़ाइलें ट्रांसफ़र करें. ऐसा करने के लिए, बैकग्राउंड फ़ेच एपीआई का इस्तेमाल करें.
- Media Session API का इस्तेमाल करके, ऑपरेटिंग सिस्टम के साथ अपने मीडिया चल रहे मीडिया को इंटिग्रेट करें.
- पेमेंट के अनुरोध वाले एपीआई की मदद से, अपने PWA में पेमेंट मैनेज करें. Apple, Payment Request API के सबसे ऊपर Apple Pay JS लाइब्रेरी भी उपलब्ध कराता है.
- क्वेरी नेटवर्क की स्थिति, जैसे कि कनेक्शन का टाइप (4G, वाई-फ़ाई) और नेटवर्क जानकारी एपीआई का इस्तेमाल करके सेव किया गया डेटा फ़्लैग.
- स्क्रीन कैप्चर एपीआई का इस्तेमाल करके, स्क्रीनकास्ट या स्क्रीन शेयर करने के लिए, उपयोगकर्ता की स्क्रीन कैप्चर करें.
- शेप डिटेक्शन एपीआई का इस्तेमाल करके, डिवाइस पर मौजूद हार्डवेयर की मदद से तेज़ी से काम करने वाले डिटेक्टर (जैसे, बारकोड (लोगों के चेहरे और टेक्स्ट ओसीआर) पर अभी काम चल रहा है) का इस्तेमाल करके आकारों का पता लगाएं.
- डिवाइस की मेमोरी के इंटरफ़ेस का इस्तेमाल करके, किसी डिवाइस की मेमोरी के बारे में क्वेरी करें.
- एसएमएस पर एक बार इस्तेमाल होने वाले पासवर्ड की मदद से, सर्वर से भेजे गए एसएमएस से WebOTP API का इस्तेमाल करके, अपने-आप कोड पाया जा सकता है. Safari,
<input>एलिमेंट के आधार पर सलूशन का सबसेट लागू करता है. WebKit के ब्लॉग में इसके बारे में ज़्यादा पढ़ें. - वर्चुअल कीबोर्ड एपीआई का इस्तेमाल करके, मोबाइल डिवाइस की स्क्रीन पर दिखने वाला वर्चुअल कीबोर्ड मैनेज करें.