अपने PWA को एक ऐप्लिकेशन की तरह बनाएं

अपने प्रोग्रेसिव वेब ऐप्लिकेशन को किसी वेबसाइट की तरह नहीं, बल्कि एक "असल" ऐप्लिकेशन जैसा बनाएं

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

इस सवाल का जवाब देने के लिए, उदाहरण के तौर पर Apple के Podcasts ऐप्लिकेशन का इस्तेमाल करें. यह ऐप्लिकेशन, डेस्कटॉप पर macOS पर और मोबाइल पर iOS पर iPadOS पर उपलब्ध है. Podcasts, एक मीडिया ऐप्लिकेशन है, लेकिन मैंने इसकी मदद से जिन मुख्य आइडिया के बारे में बताया है वे अन्य ऐप्लिकेशन पर भी लागू होते हैं.

iPhone और MacBook, दोनों एक साथ दिख रहे हैं. दोनों पर Podcasts ऐप्लिकेशन चल रहा है.
iPhone और macOS पर Apple Podcasts (सोर्स).

ऑफ़लाइन चलने में सक्षम

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

इंटरनेट कनेक्शन उपलब्ध न होने पर, Podcasts ऐप्लिकेशन में 'अभी कनेक्ट नहीं किया जा सकता.' जानकारी वाला मैसेज दिख रहा है.
बिना इंटरनेट वाला Podcasts ऐप्लिकेशन.
वेब पर यह कैसे करें

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

ऑफ़लाइन कॉन्टेंट उपलब्ध है और मीडिया चलाया जा सकता है

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

पॉडकास्ट ऐप्लिकेशन, जिसमें पॉडकास्ट का डाउनलोड किया गया एपिसोड चल रहा हो.
डाउनलोड किए गए पॉडकास्ट एपिसोड, नेटवर्क के बिना भी चलाए जा सकते हैं.
वेब पर यह कैसे करें

पहले से डाउनलोड किया गया मीडिया कॉन्टेंट, कैश मेमोरी से दिखाया जा सकता है. उदाहरण के लिए, Workbox लाइब्रेरी से कैश मेमोरी में सेव किए गए ऑडियो और वीडियो रेसिपी का इस्तेमाल करके. अन्य कॉन्टेंट को हमेशा कैश मेमोरी या IndexedDB में सेव किया जा सकता है. पूरी जानकारी के लिए, वेब के लिए स्टोरेज लेख पढ़ें. साथ ही, यह भी जानें कि किस स्टोरेज टेक्नोलॉजी का इस्तेमाल कब करना चाहिए. अगर आपके पास ऐसा डेटा है जिसे लगातार सेव करते रहना चाहिए, ताकि मेमोरी में जगह कम होने पर, उसे पूरी तरह मिटाए जाने के जोखिम में न पड़े, तो Persistent Storage API का इस्तेमाल किया जा सकता है.

बैकग्राउंड में अपने-आप डाउनलोड होने की सुविधा

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

Podcasts ऐप्लिकेशन, किसी पॉडकास्ट का नया एपिसोड, सदस्यता लेने के तुरंत बाद डाउनलोड हो रहा है.
पॉडकास्ट की सदस्यता लेने के बाद, नया एपिसोड तुरंत डाउनलोड हो जाता है.
वेब पर यह कैसे करें

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

अन्य ऐप्लिकेशन से शेयर करना और उनके साथ इंटरैक्ट करना

Podcasts ऐप्लिकेशन, दूसरे ऐप्लिकेशन के साथ आसानी से इंटिग्रेट हो जाता है. उदाहरण के लिए, जब मैं अपनी पसंद के किसी एपिसोड पर राइट क्लिक करता/करती हूं, तो मैं उसे अपने डिवाइस पर मौजूद अन्य ऐप्लिकेशन, जैसे कि Messages ऐप्लिकेशन के साथ शेयर कर सकता/सकती हूं. यह सिस्टम के क्लिपबोर्ड के साथ अपने-आप भी इंटिग्रेट हो जाता है. मैं किसी भी एपिसोड पर राइट क्लिक करके, उसका लिंक कॉपी कर सकती हूँ.

Podcasts ऐप्लिकेशन का संदर्भ मेन्यू, पॉडकास्ट के एपिसोड पर शुरू किया गया. इसमें 'एपिसोड शेयर करें → मैसेज' विकल्प चुना गया था.
Messages ऐप्लिकेशन पर पॉडकास्ट का एपिसोड शेयर करना.
वेब पर यह कैसे करें

Web Share API और Web Share Target API, आपके ऐप्लिकेशन को डिवाइस पर मौजूद दूसरे ऐप्लिकेशन से टेक्स्ट, फ़ाइलें, और लिंक शेयर करने और पाने की सुविधा देते हैं. हालांकि, अभी तक किसी वेब ऐप्लिकेशन के लिए ऑपरेटिंग सिस्टम के बिल्ट-इन राइट-क्लिक मेन्यू में मेन्यू आइटम जोड़ना मुमकिन नहीं है, फिर भी डिवाइस पर मौजूद दूसरे ऐप्लिकेशन से लिंक करने और उनसे लिंक करने के और भी बहुत से तरीके हैं. Async Clipboard API का इस्तेमाल करके, सिस्टम के क्लिपबोर्ड पर, प्रोग्राम के हिसाब से टेक्स्ट और इमेज का डेटा (PNG इमेज) पढ़ा और लिखा जा सकता है. Android पर, डिवाइस के संपर्क मैनेजर से एंट्री चुनने के लिए, संपर्क पिकर एपीआई का इस्तेमाल किया जा सकता है. अगर आपने प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन और PWA, दोनों उपलब्ध कराए हैं, तो इंस्टॉल किए गए मिलते-जुलते ऐप्लिकेशन एपीआई का इस्तेमाल करके, यह पता लगाया जा सकता है कि उस प्लैटफ़ॉर्म के खास ऐप्लिकेशन को इंस्टॉल किया गया है या नहीं. इस स्थिति में, आपको उपयोगकर्ता को PWA इंस्टॉल करने या वेब पुश नोटिफ़िकेशन स्वीकार करने की ज़रूरत नहीं है.

बैकग्राउंड ऐप्लिकेशन रीफ़्रेश हो रहा है

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

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

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

क्लाउड पर सिंक किया गया स्टेटस

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

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

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

हार्डवेयर मीडिया बटन से जुड़े कंट्रोल

जब मैं किसी दूसरे ऐप्लिकेशन में व्यस्त हूं, जैसे कि Chrome ब्राउज़र में समाचार वाला पेज पढ़ रहा हूं, तब भी मैं लैपटॉप पर मीडिया बटन से Podcasts ऐप्लिकेशन को कंट्रोल कर सकता हूं. कॉन्टेंट को आगे या पीछे करने के लिए, ऐप्लिकेशन पर स्विच करने की कोई ज़रूरत नहीं है.

Apple MacBook Pro Magic Keyboard, जिसमें जानकारी देने वाले मीडिया बटन मौजूद हैं.
मीडिया बटन की मदद से, Podcasts ऐप्लिकेशन को कंट्रोल किया जा सकता है (सोर्स).
वेब पर यह कैसे करें

मीडिया बटन, Media Session API के साथ काम करते हैं. इसी तरह, उपयोगकर्ता अपने फ़िज़िकल कीबोर्ड या हेडफ़ोन पर हार्डवेयर मीडिया बटन का इस्तेमाल कर सकते हैं. इसके अलावा, अपनी स्मार्टवॉच पर मौजूद सॉफ़्टवेयर मीडिया बटन से वेब ऐप्लिकेशन को कंट्रोल भी कर सकते हैं. वीडियो के आगे/पीछे जाने की कार्रवाई को आसान बनाने के लिए, यह भी हो सकता है कि जब उपयोगकर्ता कॉन्टेंट के बड़े हिस्से की खोज करे, तब एक वाइब्रेशन पैटर्न भेजें. जैसे, ओपनिंग क्रेडिट पास करना या चैप्टर का समय खत्म करना.

मल्टीटास्किंग और ऐप शॉर्टकट

मैं कहीं से भी Podcasts ऐप्लिकेशन पर एक साथ कई काम कर सकती हूँ. ऐप्लिकेशन में एक खास आइकॉन होता है, जिसे आसानी से अलग किया जा सकता है. इसे अपने डेस्कटॉप या ऐप्लिकेशन डॉक पर भी लगाया जा सकता है, ताकि जब मुझे लगे, तो पॉडकास्ट तुरंत लॉन्च किया जा सके.

macOS पर टास्क बदलने की सुविधा. इसमें कई ऐप्लिकेशन आइकॉन मौजूद हैं. इनमें से एक आइकॉन Podcasts ऐप्लिकेशन में है.
पॉडकास्ट ऐप्लिकेशन पर एक साथ कई काम करने की सुविधा.
वेब पर यह कैसे करें

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

संदर्भ मेन्यू में तेज़ कार्रवाइयां

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

Podcasts ऐप्लिकेशन के आइकॉन में मौजूद संदर्भ मेन्यू. इस मेन्यू में 'खोजें' और 'नए एपिसोड की जांच करें' विकल्प दिख रहे हैं.
क्विक ऐक्शन, सीधे ऐप्लिकेशन आइकॉन से तुरंत उपलब्ध होते हैं.
वेब पर यह कैसे करें

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

डिफ़ॉल्ट ऐप्लिकेशन के तौर पर काम करें

podcasts:// की यूआरएल स्कीम का इस्तेमाल करके, अन्य iOS ऐप्लिकेशन और यहां तक कि वेबसाइटें या ईमेल भी Podcasts ऐप्लिकेशन से इंटिग्रेट किए जा सकते हैं. ब्राउज़र में podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 जैसे किसी लिंक पर क्लिक करने पर, मुझे Podcasts ऐप्लिकेशन पर ले जाया जाएगा. इसके बाद, मेरे पास पॉडकास्ट की सदस्यता लेने या पॉडकास्ट सुनने का विकल्प होगा.

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

फ़िलहाल, पूरी तरह से कस्टम यूआरएल स्कीम को मैनेज करना मुमकिन नहीं है. हालांकि, PWA के लिए, यूआरएल प्रोटोकॉल मैनेज करने के एक प्रस्ताव पर काम किया जा रहा है. फ़िलहाल, web+ स्कीम प्रीफ़िक्स वाला registerProtocolHandler() सबसे अच्छा विकल्प है.

लोकल फ़ाइल सिस्टम इंटिग्रेशन

ऐसा हो सकता है कि आपको इसके बारे में तुरंत पता न हो, लेकिन Podcasts ऐप्लिकेशन, लोकल फ़ाइल सिस्टम के साथ सामान्य रूप से इंटिग्रेट हो जाता है. जब मैं किसी पॉडकास्ट का एपिसोड डाउनलोड करता/करती हूं, तो वह मेरे लैपटॉप पर ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache में सेव हो जाता है. ~/Documents के उलट, यह डायरेक्ट्री नियमित उपयोगकर्ताओं के लिए सीधे तौर पर ऐक्सेस नहीं की जानी चाहिए, लेकिन यह वहां मौजूद है. ऑफ़लाइन कॉन्टेंट सेक्शन में, फ़ाइलों के अलावा स्टोरेज के अन्य तरीके बताए गए हैं.

macOS Finder ने Podcasts ऐप्लिकेशन की सिस्टम डायरेक्ट्री पर नेविगेट किया.
पॉडकास्ट एपिसोड, सिस्टम ऐप्लिकेशन के एक खास फ़ोल्डर में सेव किए जाते हैं.
वेब पर यह कैसे करें

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

प्लैटफ़ॉर्म का रंग-रूप

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

गहरे रंग वाले मोड में Podcasts ऐप्लिकेशन.
Podcasts ऐप्लिकेशन में हल्के रंग और गहरे रंग वाले मोड का इस्तेमाल किया जा सकता है.
हल्के रंग वाले मोड में Podcasts ऐप्लिकेशन.
ऐप्लिकेशन, डिफ़ॉल्ट सिस्टम फ़ॉन्ट का इस्तेमाल करता है.
वेब पर यह कैसे करें

none की वैल्यू के साथ user-select सीएसएस प्रॉपर्टी का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) एलिमेंट को गलती से चुने जाने से बचाया जा सकता है. हालांकि, यह पक्का कर लें कि ऐप्लिकेशन के कॉन्टेंट पर चुने हुए का निशान हटाने के लिए, इस प्रॉपर्टी का गलत इस्तेमाल न किया जाए. इसका इस्तेमाल सिर्फ़ बटन टेक्स्ट वगैरह जैसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए किया जाना चाहिए. font-family सीएसएस प्रॉपर्टी की system-ui वैल्यू की मदद से, अपने ऐप्लिकेशन के लिए इस्तेमाल किए जाने वाले सिस्टम का डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) फ़ॉन्ट तय किया जा सकता है. आखिर में, आपका ऐप्लिकेशन उपयोगकर्ता की कलर स्कीम के हिसाब से तय किया जा सकता है. इसके लिए, उपयोगकर्ता के prefers-color-scheme विकल्प का इस्तेमाल किया जा सकता है. साथ ही, डार्क मोड टॉगल का विकल्प भी चुना जा सकता है. एक और बात यह भी तय करनी होगी कि स्क्रोलिंग एरिया की सीमा तक पहुंचने पर ब्राउज़र को क्या करना चाहिए. उदाहरण के लिए, पसंद के मुताबिक रीफ़्रेश करने के लिए पुल लागू करना. overscroll-behavior सीएसएस प्रॉपर्टी का इस्तेमाल करके ऐसा किया जा सकता है.

पसंद के मुताबिक बनाया गया टाइटल बार

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

Safari ब्राउज़र का इंटिग्रेटेड टाइल बार और टूलबार.
Podcasts ऐप्लिकेशन का, अपने हिसाब से स्प्लिट करने वाला और पसंद के मुताबिक बनाया गया टाइटल बार.
Safari और Podcasts के टाइटल बार, अपनी पसंद के मुताबिक बनाएं.
वेब पर यह कैसे करें

फ़िलहाल, यह सुविधा उपलब्ध नहीं है. हालांकि, टाइटल बार को पसंद के मुताबिक बनाने की सुविधा पर काम किया जा रहा है. हालांकि, आपके पास वेब ऐप्लिकेशन मेनिफ़ेस्ट की display और theme-color प्रॉपर्टी के बारे में बताने का विकल्प होता है, ताकि ऐप्लिकेशन विंडो का रंग-रूप तय किया जा सके. साथ ही, यह भी तय किया जा सकता है कि कौनसा डिफ़ॉल्ट ब्राउज़र कंट्रोल दिखेगा. शायद इनमें से कोई भी कंट्रोल न हो.

स्नैपी ऐनिमेशन

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

Podcasts ऐप्लिकेशन में 'एपिसोड नोट' वाला पैनल बड़ा किया गया है.
इन-ऐप्लिकेशन ऐनिमेशन, जैसे कि पैनल खोलने के दौरान ऐनिमेशन ज़्यादा दिलचस्प होता है.
वेब पर यह कैसे करें

अगर ऐनिमेशन और परफ़ॉर्मेंस लेख में बताए गए कई सबसे सही तरीकों पर ध्यान दिया जाता है, तो वेब पर परफ़ॉर्म करने वाले ऐनिमेशन बनाए जा सकते हैं. पेज पर नंबर वाली सामग्री या मीडिया कैरसेल में आम तौर पर दिखने वाले स्क्रोल ऐनिमेशन को CSS Scroll Snap सुविधा का इस्तेमाल करके बेहतर बनाया जा सकता है. पूरी तरह से कंट्रोल करने के लिए, Web Animations API का इस्तेमाल किया जा सकता है.

कॉन्टेंट, ऐप्लिकेशन के बाहर दिखा

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

iOS विजेट व्यू में, Podcasts ऐप्लिकेशन किसी पॉडकास्ट के नए एपिसोड का सुझाव दिखा रहा है.
ऐप्लिकेशन का कॉन्टेंट, मुख्य Podcasts ऐप्लिकेशन के बाहर दिखता है.
वेब पर यह कैसे करें

Content Index API की मदद से आपका ऐप्लिकेशन, ब्राउज़र को यह बता सकता है कि PWA का कौनसा कॉन्टेंट ऑफ़लाइन उपलब्ध है. इससे ब्राउज़र इस कॉन्टेंट को मुख्य ऐप्लिकेशन से बाहर दिखा पाता है. अपने ऐप्लिकेशन में दिलचस्प कॉन्टेंट को speakable ऑडियो प्लेबैक के लिए सही के तौर पर मार्क करके और सामान्य तौर पर स्ट्रक्चर्ड मार्कअप इस्तेमाल करके, आप सर्च इंजन और Google Assistant जैसे वर्चुअल असिस्टेंट की मदद कर सकते हैं.

लॉक स्क्रीन पर मीडिया कंट्रोल का विजेट

पॉडकास्ट का एपिसोड चलने के दौरान, Podcasts ऐप्लिकेशन लॉक स्क्रीन पर एक खूबसूरत कंट्रोल विजेट दिखाता है. इसमें एपिसोड का आर्टवर्क, एपिसोड का टाइटल, और पॉडकास्ट का नाम जैसा मेटाडेटा शामिल होता है.

लॉक स्क्रीन पर iOS मीडिया प्लेबैक विजेट, जिसमें बेहतर मेटाडेटा के साथ पॉडकास्ट का एपिसोड दिख रहा है.
ऐप्लिकेशन में चलने वाले मीडिया को लॉक स्क्रीन से कंट्रोल किया जा सकता है.
वेब पर यह कैसे करें

Media Session API की मदद से, आपको आर्टवर्क, ट्रैक के टाइटल वगैरह जैसा मेटाडेटा तय करने की सुविधा मिलती है. इसके बाद, वह मेटाडेटा ब्राउज़र की लॉक स्क्रीन, स्मार्टवॉच या दूसरे मीडिया विजेट पर दिखता है.

पुश नोटिफ़िकेशन

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

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

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

ऐप्लिकेशन आइकॉन बैजिंग

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

iOS की सेटिंग की स्क्रीन, जिसमें 'बैज' टॉगल चालू दिखाया गया है.
बैज, ऐप्लिकेशन के लिए उपयोगकर्ताओं को नए कॉन्टेंट के बारे में जानकारी देने का एक आसान तरीका है.
वेब पर यह कैसे करें

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

एनर्जी सेवर की सेटिंग के बजाय, मीडिया चलाने को प्राथमिकता दी जाती है

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

'एनर्जी सेवर' सेक्शन में macOS की प्राथमिकताएं.
ऐप्लिकेशन, स्क्रीन को चालू रख सकते हैं.
वेब पर यह कैसे करें

स्क्रीन वेक लॉक एपीआई की मदद से, स्क्रीन को बंद होने से रोका जा सकता है. वेब पर चल रहा मीडिया प्लेबैक, सिस्टम को स्टैंडबाय मोड में जाने से अपने-आप रोकता है.

ऐप स्टोर के ज़रिए ऐप्लिकेशन को खोजने की सुविधा

Podcasts ऐप्लिकेशन, macOS के डेस्कटॉप वर्शन का हिस्सा है. हालांकि, iOS पर इसे App Store से इंस्टॉल करना होगा. podcast, podcasts या apple podcasts के लिए तुरंत खोजने से ऐप्लिकेशन, App Store में तुरंत दिखने लगता है.

iOS App Store पर 'पॉडकास्ट' खोजने पर, पॉडकास्ट ऐप्लिकेशन दिखता है.
लोगों ने ऐप स्टोर में ऐप्लिकेशन खोजना सीख लिया है.
वेब पर यह कैसे करें

Apple, App Store पर PWA की अनुमति नहीं देता. हालांकि, Android पर अपने PWA को भरोसेमंद वेब गतिविधि के तहत रैप सबमिट किया जा सकता है. bubblewrap स्क्रिप्ट का इस्तेमाल करके, यह काम आसानी से किया जा सकता है. यह स्क्रिप्ट PWABuilder के Android ऐप्लिकेशन को एक्सपोर्ट करने की सुविधा को अंदरूनी तौर पर भी काम करती है. इस सुविधा का इस्तेमाल, कमांड लाइन को छुए बिना किया जा सकता है.

सुविधा की खास जानकारी

नीचे दी गई टेबल में, सभी सुविधाओं के बारे में कम शब्दों में खास जानकारी दी गई है. साथ ही, वेब पर इस्तेमाल करने के लिए उपयोगी संसाधनों की सूची भी दी गई है.

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

नतीजा

2015 में पेश किए जाने के बाद से, PWA ने काफ़ी तरक्की की है. Project Fugu 🐡 के संदर्भ में, Chromium की क्रॉस-कंपनी टीम, बाकी बची हुई कमियों को दूर करने पर काम कर रही है. यहां तक कि इस लेख में दिए गए कुछ सुझावों को भी फ़ॉलो करके, आप उस ऐप्लिकेशन जैसी भावना के बारे में एक-एक करके जानकारी पा सकते हैं और अपने उपयोगकर्ताओं को यह भूल सकते हैं कि उन्हें "सिर्फ़ एक वेबसाइट" याद है, क्योंकि सच में, उनमें से ज़्यादातर लोगों को इस बात की परवाह नहीं होती कि आपका ऐप्लिकेशन कैसे बनाया गया और उन्हें ऐसा क्यों करना चाहिए.

स्वीकार हैं

इस लेख की समीक्षा केस बैस्क, जो मेडली,जोशुआ बेल, डायन अल्मायर, एड ओशिनये, पीट लीपेज, सैम थोरोगुड, रेली ग्रैंट जेस्किनकी ओर से की गई थी