ऐप शॉर्टकट की मदद से तेज़ी से काम करें

ऐप्लिकेशन शॉर्टकट कुछ सामान्य कार्रवाइयों का तुरंत ऐक्सेस देते हैं, जिनकी ज़रूरत उपयोगकर्ताओं को अक्सर होती है.

फ्रैंको ब्यूफ़ोर्ट
फ़्रैंकोइस ब्यूफ़ोर्ट
जंगकी सॉन्ग
जंगकी सॉन्ग

वेब प्लैटफ़ॉर्म अब ऐप्लिकेशन शॉर्टकट की सुविधा देता है. इससे उपयोगकर्ताओं की प्रोडक्टिविटी बेहतर बनाने और अहम टास्क के साथ फिर से जुड़ने में मदद मिलती है. इनकी मदद से वेब डेवलपर, लोगों को अक्सर की जाने वाली कुछ सामान्य कार्रवाइयों का फटाफट ऐक्सेस दे सकते हैं.

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

ऐप्लिकेशन शॉर्टकट के बारे में जानकारी

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

ऐप शॉर्टकट मेन्यू को शुरू करने के लिए, उपयोगकर्ता के डेस्कटॉप पर टास्कबार (Windows) या डॉक (macOS) में मौजूद ऐप्लिकेशन आइकॉन पर राइट क्लिक करें या Android पर ऐप्लिकेशन के लॉन्चर आइकॉन को दबाकर रखें.

Android पर खोले गए ऐप्लिकेशन शॉर्टकट वाले मेन्यू का स्क्रीनशॉट
Android पर ऐप्लिकेशन शॉर्टकट मेन्यू खोला गया
Windows पर खोले गए ऐप्लिकेशन शॉर्टकट मेन्यू का स्क्रीनशॉट
Windows पर ऐप्लिकेशन शॉर्टकट मेन्यू खोला गया

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

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

  • टॉप लेवल के नेविगेशन आइटम (जैसे, होम पेज, टाइमलाइन, हाल के ऑर्डर)
  • रिपोर्ट में खोजना
  • डेटा डालने के टास्क (जैसे, ईमेल या ट्वीट लिखना, रसीद जोड़ना)
  • गतिविधियां (जैसे, सबसे लोकप्रिय संपर्कों के साथ चैट शुरू करना)

वेब ऐप्लिकेशन मेनिफ़ेस्ट में ऐप्लिकेशन शॉर्टकट तय करें

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

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

shortcuts कलेक्शन का हर सदस्य एक डिक्शनरी है, जिसमें कम से कम एक name और url मौजूद होते हैं. अन्य सदस्यों को देना ज़रूरी नहीं है.

name
ऐप्लिकेशन के शॉर्टकट का वह लेबल जिसे कोई भी व्यक्ति आसानी से पढ़ सके. यह लेबल, ऐप्लिकेशन के उपयोगकर्ताओं को दिखता है.
short_name (ज़रूरी नहीं)
वह लेबल जिसे कोई भी व्यक्ति आसानी से पढ़ सके, इसके लिए ज़रूरी है कि उसका इस्तेमाल न किया जा सके. हमारा सुझाव है कि आप इसे उपलब्ध कराएं. हालांकि, ऐसा करना ज़रूरी नहीं है.
description (ज़रूरी नहीं)
ऐप्लिकेशन के शॉर्टकट को कोई भी व्यक्ति आसानी से पढ़ सके. लिखते समय इसका इस्तेमाल नहीं किया जाता है, लेकिन आने वाले समय में सहायक टेक्नोलॉजी का इस्तेमाल किया जा सकता है.
url
जब कोई उपयोगकर्ता ऐप्लिकेशन शॉर्टकट चालू करता है, तब यूआरएल खुलता है. यह यूआरएल, वेब ऐप्लिकेशन मेनिफ़ेस्ट के दायरे में होना चाहिए. अगर यह रिलेटिव यूआरएल है, तो बेस यूआरएल ही वेब ऐप्लिकेशन मेनिफ़ेस्ट का यूआरएल होगा.
icons (ज़रूरी नहीं)

इमेज रिसॉर्स ऑब्जेक्ट का कलेक्शन. हर ऑब्जेक्ट में src और एक sizes प्रॉपर्टी होनी चाहिए. वेब ऐप्लिकेशन मेनिफ़ेस्ट आइकॉन के उलट, type इमेज को इस्तेमाल करना ज़रूरी नहीं होता. लिखते समय SVG फ़ाइलें काम नहीं करतीं. इसके बजाय, PNG का इस्तेमाल करें.

अगर आपको पिक्सल-परफ़ेक्ट आइकॉन चाहिए, तो उन्हें 48dp (जैसे कि 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 पिक्सल आइकॉन) की बढ़ोतरी में दें. हमारा सुझाव है कि 192x192 पिक्सल के एक आइकॉन का इस्तेमाल करें.

क्वालिटी को मापने के लिए, आइकॉन का साइज़, Android पर डिवाइस के सही साइज़ का कम से कम आधा होना चाहिए. यह साइज़ 48dp होना चाहिए. उदाहरण के लिए, किसी xxhdpi स्क्रीन पर दिखाने के लिए आइकॉन कम से कम 72 x 72 पिक्सल का होना चाहिए. (इसे पिक्सल यूनिट के लिए डीपी यूनिट में बदलने के लिए फ़ॉर्मूला से लिया गया है.)

अपने ऐप्लिकेशन के शॉर्टकट की जांच करना

इस बात की पुष्टि करने के लिए कि आपके ऐप्लिकेशन शॉर्टकट सही तरीके से सेट अप किए गए हैं, DevTools के ऐप्लिकेशन पैनल में मेनिफ़ेस्ट पैनल का इस्तेमाल करें.

DevTools में ऐप्लिकेशन शॉर्टकट का स्क्रीनशॉट
DevTools में दिखाए गए ऐप्लिकेशन शॉर्टकट

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

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

सबसे सही तरीके

प्राथमिकता के हिसाब से ऐप्लिकेशन शॉर्टकट ऑर्डर करना

शॉर्टकट उसी क्रम में दिखाए जाते हैं जिस क्रम में आपने उन्हें मेनिफ़ेस्ट में तय किया हो. आपको प्राथमिकता के हिसाब से ऐप्लिकेशन शॉर्टकट ऑर्डर करने का सुझाव दिया जाता है, क्योंकि दिखाए जाने वाले ऐप्लिकेशन शॉर्टकट की संख्या की सीमा, अगले प्लैटफ़ॉर्म के हिसाब से अलग-अलग होती है. उदाहरण के लिए, Windows पर Chrome और Edge ऐप्लिकेशन शॉर्टकट की संख्या 10 पर सेट करते हैं, जबकि Android के लिए Chrome सिर्फ़ 3 दिखाता है. Android 7 के लिए Chrome 92 से पहले, 4 वर्शन इस्तेमाल करने की अनुमति थी. Chrome 92 ने ऐप्लिकेशन के लिए उपलब्ध शॉर्टकट स्लॉट में से एक लेते हुए, साइट की सेटिंग में एक शॉर्टकट जोड़ा.

ऐप शॉर्टकट के लिए अलग-अलग नाम इस्तेमाल करना

ऐप शॉर्टकट में अंतर करने के लिए आपको आइकॉन पर भरोसा नहीं करना चाहिए, क्योंकि हो सकता है कि वे हमेशा न दिखें. उदाहरण के लिए, macOS में डॉक शॉर्टकट मेन्यू में आइकॉन काम नहीं करते. हर ऐप शॉर्टकट के लिए अलग-अलग नाम का इस्तेमाल करें.

ऐप्लिकेशन शॉर्टकट के इस्तेमाल का आकलन करना

आपको ऐप्लिकेशन के शॉर्टकट url की एंट्री के बारे में उसी तरह जानकारी देनी चाहिए, जैसे कि आप start_url के साथ करते हैं. ऐसा आंकड़े जुटाने के मकसद से किया जाना चाहिए, जैसे कि url: "/my-shortcut?utm_source=homescreen".

ब्राउज़र समर्थन

ऐप्लिकेशन शॉर्टकट नीचे दिए गए प्लैटफ़ॉर्म और वर्शन पर उपलब्ध हैं.

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

  • 96
  • 96
  • x
  • x

सोर्स

ChromeOS पर खोले गए ऐप्लिकेशन के शॉर्टकट वाले मेन्यू का स्क्रीनशॉट
ChromeOS पर ऐप्लिकेशन शॉर्टकट मेन्यू खोला गया

भरोसेमंद वेब गतिविधि के लिए सहायता

भरोसेमंद वेब गतिविधि का इस्तेमाल करने वाले Android ऐप्लिकेशन बनाने के लिए, सुझाया गया टूल Bubblewrap. यह वेब ऐप्लिकेशन मेनिफ़ेस्ट से ऐप्लिकेशन शॉर्टकट को पढ़ता है और Android ऐप्लिकेशन के लिए, ऐप्लिकेशन के शॉर्टकट अपने-आप जनरेट करता है. ध्यान दें कि ऐप्लिकेशन शॉर्टकट के लिए आइकॉन ज़रूरी हैं. साथ ही, यह बबल रैप में कम से कम 96 x 96 पिक्सल का होना चाहिए.

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

जो डेवलपर भरोसेमंद वेब गतिविधि को अपने Android ऐप्लिकेशन में मैन्युअल तरीके से इंटिग्रेट कर पाते हैं वे Android ऐप्लिकेशन शॉर्टकट का इस्तेमाल, इस तरह के काम लागू करने के लिए कर सकते हैं.

नमूना

ऐप्लिकेशन शॉर्टकट का सैंपल और उसका सोर्स देखें.