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

Kayce Basques

iOS के उपयोगकर्ता Safari में मैन्युअल तरीके से प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) जोड़ सकते हैं. होम स्क्रीन पर दिखेगी. पीडब्ल्यूए जोड़े जाने पर, 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 के ऑप्टिमाइज़ किए गए सेक्शन में, लाइटहाउस यह बताता है कि उदाहरण के तौर पर दिया गया ऐप्लिकेशन कोई मान्य वैल्यू नहीं देता है 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 का टच आइकॉन.