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

Kayce Basques

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

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

मान्य Apple-टच-आइकॉन उपलब्ध नहीं कराता
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 का टच आइकॉन.