আপনার প্রগতিশীল ওয়েব অ্যাপে একটি অ্যাপল টাচ আইকন যোগ করুন

Kayce Basques

iOS ব্যবহারকারীদের জন্য Safari তাদের হোম স্ক্রিনে ম্যানুয়ালি প্রগ্রেসিভ ওয়েব অ্যাপস (PWAs) যোগ করতে পারে। একটি PWA যোগ করার সময় iOS হোম স্ক্রিনে যে আইকনটি প্রদর্শিত হয় তাকে বলা হয় Apple টাচ আইকন । এই কোডল্যাব আপনাকে দেখায় কিভাবে একটি পিডব্লিউএ-তে একটি অ্যাপল টাচ আইকন যোগ করতে হয়। এটি অনুমান করে যে আপনার কাছে একটি iOS ডিভাইসে অ্যাক্সেস রয়েছে।

পরিমাপ করা

একটি নতুন ট্যাবে উদাহরণ অ্যাপ্লিকেশন খুলুন:

  1. প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷

  2. সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন পূর্ণ পর্দা .

  3. আপনার উদাহরণ অ্যাপের URL টি নোট করুন। এটি https://example.glitch.me এর মত কিছু হবে।

Chrome DevTools-এ আপনার উদাহরণ অ্যাপে একটি Lighthouse PWA অডিট চালান:

  1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
  2. লাইটহাউস ট্যাবে ক্লিক করুন।
  3. নিশ্চিত করুন যে প্রগতিশীল ওয়েব অ্যাপ চেকবক্সটি বিভাগ তালিকায় নির্বাচিত হয়েছে।
  4. জেনারেট রিপোর্ট বোতামে ক্লিক করুন।

PWA অপ্টিমাইজ করা বিভাগে, Lighthouse রিপোর্ট করে যে উদাহরণ অ্যাপটি একটি বৈধ Apple টাচ আইকন প্রদান করে না ।

একটি বৈধ অ্যাপল-টাচ-আইকন প্রদান করে না
একটি বৈধ অ্যাপল-টাচ-আইকন অডিট প্রদান করে না

একটি iOS হোম স্ক্রিনে উদাহরণ অ্যাপ যোগ করুন

একটি অ্যাপল টাচ আইকন কীভাবে আরও পালিশ ব্যবহারকারীর অভিজ্ঞতা প্রদান করে তা প্রদর্শন করতে, অ্যাপল টাচ আইকন নির্দিষ্ট করা না থাকলে প্রথমে আপনার iOS ডিভাইসের হোম স্ক্রিনে উদাহরণ অ্যাপটি যোগ করার চেষ্টা করুন।

  1. iOS এর জন্য Safari খুলুন।
  2. আপনার উদাহরণ অ্যাপ্লিকেশনের URL খুলুন. এটি https://example.glitch.me এর মতো URL যা আপনি আগে উল্লেখ করেছেন।
  3. ভাগ করুন আলতো চাপুন অ্যাপল শেয়ার বোতাম > হোম স্ক্রিনে যোগ করুন । এই বিকল্পটি দেখতে আপনাকে সম্ভবত বাম দিকে সোয়াইপ করতে হবে।
  4. যোগ করুন আলতো চাপুন।

যেহেতু সাইটটি একটি Apple টাচ আইকন নির্দিষ্ট করেনি, iOS শুধুমাত্র পৃষ্ঠার সামগ্রী থেকে সাইটের জন্য একটি আইকন তৈরি করে৷

একটি স্বয়ংক্রিয়ভাবে তৈরি হোম স্ক্রীন আইকন।
একটি স্বয়ংক্রিয়ভাবে তৈরি হোম স্ক্রীন আইকন।

উদাহরণ অ্যাপে একটি অ্যাপল টাচ আইকন যোগ করুন

  • 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 অডিট প্রদান করে না ।
অ্যাপল টাচ আইকন।
অ্যাপল টাচ আইকন।