अपने प्रोग्रेसिव वेब ऐप्लिकेशन में Apple टच आइकॉन जोड़ना

Kayce Basques

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

मापें

उदाहरण के तौर पर दिए गए ऐप्लिकेशन को नए टैब में खोलें:

  1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

  2. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीनफ़ुलस्क्रीन दबाएं.

  3. अपने उदाहरण ऐप्लिकेशन का यूआरएल नोट करें. यह कुछ ऐसा https://example.glitch.me होगा.

Chrome DevTools में, अपने उदाहरण के तौर पर दिए गए ऐप्लिकेशन पर Lighthouse PWA ऑडिट चलाएं:

  1. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  2. Lighthouse टैब पर क्लिक करें.
  3. पक्का करें कि कैटगरी सूची में, प्रोग्रेसिव वेब ऐप्लिकेशन चेकबॉक्स चुना गया हो.
  4. रिपोर्ट जनरेट करें बटन पर क्लिक करें.

PWA ऑप्टिमाइज़ किया गया सेक्शन में, Lighthouse की रिपोर्ट से पता चलता है कि उदाहरण के तौर पर दिया गया ऐप्लिकेशन मान्य Apple टच आइकॉन नहीं दिखाता.

मान्य Apple-Touch-icon उपलब्ध नहीं है
इसमें मान्य apple-Touch-icon ऑडिट शामिल नहीं है

iOS की होम स्क्रीन पर उदाहरण के तौर पर दिया गया ऐप्लिकेशन जोड़ना

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

  1. iOS के लिए Safari खोलें.
  2. उदाहरण के तौर पर दिए गए ऐप्लिकेशन का यूआरएल खोलें. यह https://example.glitch.me जैसा ही यूआरएल है, जिसे आपने पहले नोट किया था.
  3. शेयर करें Apple का शेयर करने का बटन > होम स्क्रीन पर जोड़ें पर टैप करें. यह विकल्प देखने के लिए, आपको बाईं ओर स्वाइप करना पड़ सकता है.
  4. जोड़ें पर टैप करें.

साइट पर Apple टच आइकॉन नहीं दिया गया है. इसलिए, iOS सिर्फ़ पेज के कॉन्टेंट से साइट के लिए आइकॉन जनरेट करता है.

होम स्क्रीन पर अपने-आप जनरेट हुआ आइकॉन.
होम स्क्रीन पर अपने-आप जनरेट हुआ आइकॉन.

उदाहरण के तौर पर दिए गए ऐप्लिकेशन में Apple टच आइकॉन जोड़ना

  • index.html के <head> के सबसे नीचे मौजूद <link rel="apple-touch-icon"> टैग से जुड़ी टिप्पणी हटाएं.
    …
    <link rel="stylesheet" href="/index.css">
    <link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
    <!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
    <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
  </head>
  …

उदाहरण के तौर पर दिए गए ऐप्लिकेशन को iOS की होम स्क्रीन पर फिर से जोड़ना

  • उदाहरण के तौर पर दिए गए ऐप्लिकेशन को iOS की होम स्क्रीन पर फिर से जोड़कर देखें. इस बार, साइट के लिए सही आइकॉन जनरेट किया गया है. अगर लाइटहाउस की मदद से पेज का फिर से ऑडिट किया जाता है, तो आपको यह भी दिखेगा कि मान्य apple-touch-icon नहीं दिखाने की वजह से मिलने वाला ऑडिट अब पास हो गया है.
Apple का टच आइकॉन.
Apple टच आइकॉन.