Menambahkan ikon Apple touch ke Progressive Web App

Kayce Basques

Pengguna Safari untuk iOS dapat menambahkan Progressive Web Apps (PWA) secara manual ke layar utama mereka. Ikon yang muncul di layar utama iOS saat PWA ditambahkan disebut ikon Apple Touch. Codelab ini menunjukkan cara menambahkan ikon sentuh Apple ke PWA. Dengan asumsi bahwa Anda memiliki akses ke perangkat iOS.

Ukur

Buka aplikasi contoh di tab baru:

  1. Klik Remix to Edit agar project dapat diedit.

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

  3. Perhatikan URL aplikasi contoh Anda. Nilainya akan 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 centang Progressive Web App dipilih dalam daftar Kategori.
  4. Klik tombol Buat laporan.

Di bagian Dioptimalkan PWA, Lighthouse melaporkan bahwa aplikasi contoh tidak memberikan Ikon Apple Touch.

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

Menambahkan aplikasi contoh ke layar utama iOS

Untuk menunjukkan bagaimana ikon sentuh Apple memberikan pengalaman pengguna yang lebih baik, pertama-tama coba tambahkan aplikasi contoh ke layar beranda perangkat iOS Anda ketika ikon Apple Touch belum ditentukan.

  1. Buka Safari untuk iOS.
  2. Buka URL aplikasi contoh Anda. Ini adalah URL seperti https://example.glitch.me yang Anda disebutkan 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 tersebut dari konten halaman.

Ikon layar utama yang dibuat secara 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> 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 lagi tambahkan aplikasi contoh ke layar utama iOS. Kali ini, ikon yang tepat dibuat untuk situs tersebut. Jika Anda mengaudit halaman lagi dengan Lighthouse, Anda juga akan melihat bahwa Tidak memberikan audit apple-touch-icon yang valid kini lolos.
Ikon Apple touch.
Ikon Apple touch.