डेस्कटॉप पर प्रोग्रेसिव वेब ऐप्लिकेशन

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

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

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

इसे इंस्टॉल करने लायक बनाएं

प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) का एक बड़ा फ़ायदा यह है कि इन्हें डेस्कटॉप ऐप्लिकेशन की तरह इंस्टॉल किया जा सकता है. web.dev पर प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) के पाथ में, अपने PWA को इंस्टॉल करने लायक बनाने के लिए एक सेक्शन दिया गया है. इसका इस्तेमाल करके शुरू करें. किसी पीडब्ल्यूए को ChromeOS पर इंस्टॉल किया जा सकता है या नहीं, यह जानने के लिए इन शर्तों को पूरा करना ज़रूरी है. इन शर्तों को Lighthouse के इंस्टॉल किए जा सकने वाले ऑडिट का इस्तेमाल करके देखा जा सकता है:

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

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

ऑफ़लाइन काम करने के बारे में जानकारी

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

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

अगर आपको बेहतर अनुभव देना है, तो Cache Storage API के साथ-साथ, इन सुविधाओं का इस्तेमाल किया जा सकता है: IndexedDB का इस्तेमाल ब्राउज़र में NoSQL स्टोरेज के लिए किया जा सकता है. साथ ही, बैकग्राउंड सिंक का इस्तेमाल करके, उपयोगकर्ताओं को ऑफ़लाइन होने पर भी कार्रवाई करने की अनुमति दी जा सकती है. इसके अलावा, सर्वर से कम्यूनिकेशन को तब तक के लिए टाला जा सकता है, जब तक उपयोगकर्ता का कनेक्शन फिर से स्टेबल न हो जाए. उपयोगकर्ताओं को पुष्टि किए गए के तौर पर बनाए रखने के लिए, सुरक्षित और लंबे समय तक चलने वाले सेशन जैसे पैटर्न लागू किए जा सकते हैं. साथ ही, स्केलेटन स्क्रीन का इस्तेमाल करके, उपयोगकर्ताओं को तुरंत यह बताया जा सकता है कि कॉन्टेंट लोड किया जा रहा है. अगर ज़रूरत हो, तो यह कॉन्टेंट कैश मेमोरी में सेव किए गए कॉन्टेंट या ऑफ़लाइन इंडिकेटर पर वापस आ सकता है.

इसे टच किया जा सकता है

लगभग सभी ChromeOS डिवाइसों में टचस्क्रीन की सुविधा होती है. साथ ही, कई डिवाइसों में स्टाइलस का इस्तेमाल भी किया जा सकता है. इसलिए, आपको यह पक्का करना होगा कि आपका ऐप्लिकेशन, सामान्य कीबोर्ड और माउस के साथ-साथ इन दोनों इनपुट के साथ भी आसानी से काम करे. Pointer Events API को खास तौर पर इसी काम के लिए डिज़ाइन किया गया है! आपको शायद पॉइंटर से जुड़े कुछ बुनियादी इवेंट में बदलाव न करना पड़े. जैसे, click इवेंट. mouseup या touchstart जैसे अन्य इवेंट को उनके पॉइंटर इवेंट के काउंटरपार्ट पर माइग्रेट किया जाना चाहिए, ताकि वे किसी भी तरह के पॉइंटर पर आसानी से काम कर सकें. अगर चाहें, तो अलग-अलग तरह के इनपुट को अलग-अलग मैनेज किया जा सकता है. ऐसे ऐप्लिकेशन और गेम जो उपयोगकर्ता के स्पर्श पर आधारित इनपुट पर काफ़ी हद तक निर्भर करते हैं उनके लिए, Pointer Events API पर स्विच करने से ChromeOS डिवाइसों पर काफ़ी फ़र्क़ पड़ेगा.

वेब पर आसानी से ड्रॉ करना

अगर आपको ऐसा ऐप्लिकेशन बनाना है जिसमें उपयोगकर्ता अपनी उंगलियों या स्टाइलस से ड्रॉइंग करते हैं, तो उनके इनपुट और आपके आउटपुट के बीच कम से कम समय में डेटा ट्रांसफ़र करना मुश्किल होता है. इससे ड्रॉइंग करने का अनुभव बेहतर नहीं होता. ChromeOS के लिए, Canvas API की मदद से बनाए गए इस तरह के ऐप्लिकेशन बनाते समय, हमारा सुझाव है कि canvas.getContext() के लिए desynchronized हिंट का इस्तेमाल करें, ताकि रेंडरिंग में कम समय लगे. कैनवस के लिए desynchronized हिंट का इस्तेमाल करने के लिए, यह तरीका अपनाएं: 

const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

टच के लिए डिज़ाइन से जुड़ी बातें

वेब ऐप्लिकेशन डिज़ाइन करते समय, टच और स्टाइलस की सुविधा को ध्यान में रखना ज़रूरी है. हो सकता है कि आपको इंटरैक्शन के कुछ तरीकों के बारे में पता न हो. जैसे, होवर करने की सुविधा. यह सुविधा, इनपुट के अन्य तरीकों के लिए ठीक से काम नहीं करती है. टच और स्टाइलस के हिसाब से इंटरफ़ेस डिज़ाइन करते समय, इन बातों का हमेशा ध्यान रखें:

  • स्क्रीन के साइज़ के आधार पर, इनपुट के बारे में अनुमान न लगाएं. इसके बजाय, फ़ीचर डिटेक्शन का इस्तेमाल करें. इससे यह तय किया जा सकेगा कि जवाब कैसे देना है. सबसे अच्छा तरीका यह है कि इनपुट के समय ही फ़ीचर डिटेक्शन का इस्तेमाल किया जाए. ध्यान रखें कि ChromeOS पर उपयोगकर्ता, एक ही सेशन में माउस, टच, और स्टाइलस के बीच आसानी से स्विच कर सकते हैं.
  • पक्का करें कि जिन एलिमेंट को उपयोगकर्ता को छूना है उनका कम से कम टारगेट साइज़ इतना बड़ा हो कि आस-पास के एलिमेंट गलती से न दब जाएं.
  • होवर को प्रोग्रेसिव एनहांसमेंट के तौर पर इस्तेमाल करें. साथ ही, पक्का करें कि टच और स्टाइलस के लिए, इंटरैक्शन को अन्य तरीकों से पूरा किया जा सकता हो. उदाहरण के लिए, देर तक दबाकर रखना या टैप करना.
  • टचस्क्रीन का इस्तेमाल करने वाले लोग, स्क्रीन पर मौजूद एलिमेंट के साथ सीधे तौर पर इंटरैक्ट कर पाते हैं. उदाहरण के लिए, ज़ूम इन/आउट बटन का इस्तेमाल करने के बजाय, मैप पर पिंच करके ज़ूम करना. ज़रूरत के मुताबिक सामान्य टच जेस्चर जोड़ने से, आपके ऐप्लिकेशन को इस्तेमाल करना ज़्यादा आसान हो जाता है.

इसे बेहतर बनाएं

पीडब्ल्यूए की कुछ क्षमताओं के बारे में आम तौर पर सभी को पता होता है. जैसे, Notifications API. इसकी मदद से, कोई वेब ऐप्लिकेशन प्लैटफ़ॉर्म की सूचनाएं पा सकता है और उन्हें पब्लिश कर सकता है. हालांकि, वेब के लिए कई नई और आने वाली सुविधाएं उपलब्ध हैं. इनसे आपके ऐप्लिकेशन को बेहतर बनाया जा सकता है. Chromium का वेब कैपेबिलिटी प्रोजेक्ट, जिसे प्रोजेक्ट फ़ुगु 🐡 के नाम से भी जाना जाता है, नए और बेहतर वेब स्टैंडर्ड को चालू करने की एक कोशिश है. इससे वेब की खास बातों को सुरक्षित रखा जा सकेगा. जैसे, उपयोगकर्ता की सुरक्षा को ध्यान में रखना, कम रुकावटें आना, और क्रॉस-प्लैटफ़ॉर्म के साथ काम करना.

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