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 mereka. Ikon yang muncul di layar utama iOS saat PWA ditambahkan disebut Ikon sentuh Apple. Codelab ini menunjukkan cara menambahkan ikon sentuh Apple ke PWA. Langkah ini mengasumsikan bahwa Anda memiliki akses ke perangkat iOS.

Ukur

Buka aplikasi contoh di tab baru:

  1. Klik Remix to Edit untuk menjadikan project dapat diedit.

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

  3. Perhatikan URL aplikasi contoh Anda. URL-nya 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 Optimized, Lighthouse melaporkan bahwa aplikasi contoh tidak menyediakan 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 jika 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 Andacatat 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 sentuh Apple, iOS hanya membuat ikon untuk situs dari konten halaman.

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

Menambahkan ikon sentuh Apple ke aplikasi contoh

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

Menambahkan aplikasi contoh ke layar utama iOS (lagi)

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