Menambahkan ikon Apple touch ke Progressive Web App

Kayce Basques

Pengguna Safari untuk iOS dapat menambahkan Progressive Web App (PWA) secara manual ke layar utama. Ikon yang muncul di layar utama iOS saat PWA ditambahkan disebut ikon Apple touch. Codelab ini menunjukkan cara menambahkan ikon Apple Touch ke PWA. Anda dianggap memiliki akses ke perangkat iOS.

Ukur

Buka aplikasi contoh di tab baru:

  1. Klik Remix untuk Mengedit agar project dapat diedit.

  2. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh layar penuh.

  3. Catat URL aplikasi contoh Anda. URL ini akan terlihat seperti https://example.glitch.me.

Jalankan audit PWA Lighthouse pada aplikasi contoh Anda di Chrome DevTools:

  1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  2. Klik tab Lighthouse.
  3. Pastikan kotak Progressive Web App dicentang dalam daftar Kategori.
  4. Klik tombol Buat laporan.

Di bagian PWA Dioptimalkan, Lighthouse melaporkan bahwa aplikasi contoh tidak memberikan ikon sentuh Apple yang valid.

Tidak menyediakan apple-touch-icon yang valid
Audit Tidak menyediakan apple-touch-icon yang valid

Menambahkan aplikasi contoh ke layar utama iOS

Untuk menunjukkan cara ikon sentuh Apple memberikan pengalaman pengguna yang lebih baik, coba tambahkan aplikasi contoh ke layar utama perangkat iOS Anda terlebih dahulu saat ikon sentuh Apple belum ditentukan.

  1. Buka Safari untuk iOS.
  2. Buka URL aplikasi contoh Anda. Ini adalah URL seperti https://example.glitch.me yang Anda catat sebelumnya.
  3. Ketuk Bagikan Tombol Bagikan Apple > Tambahkan ke Layar Utama. Anda mungkin harus menggeser ke kiri untuk melihat opsi ini.
  4. Ketuk Tambahkan.

Karena situs belum menentukan ikon Apple Touch, iOS hanya membuat ikon untuk situs dari konten halaman.

Ikon layar utama yang dibuat otomatis.
Ikon layar utama yang dibuat secara otomatis.

Menambahkan ikon Apple touch ke aplikasi contoh

  • Hapus tanda komentar pada tag <link rel="apple-touch-icon"> di bagian bawah <head> pada index.html.
    …
    <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>
  …

Tambahkan aplikasi contoh ke layar utama iOS (lagi)

  • Coba tambahkan lagi aplikasi contoh ke layar utama iOS. Kali ini, ikon yang tepat dibuat untuk situs tersebut. Jika kembali mengaudit halaman dengan Lighthouse, Anda juga akan melihat bahwa audit Tidak menyediakan apple-touch-icon yang valid kini lulus.
Ikon sentuh Apple.
Ikon sentuh Apple.