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:
Klik Remix to Edit agar project dapat diedit.
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .
Perhatikan URL aplikasi contoh Anda. Nilainya akan seperti
https://example.glitch.me
.
Jalankan audit PWA Lighthouse pada aplikasi contoh Anda di Chrome DevTools:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Progressive Web App dipilih dalam daftar Kategori.
- Klik tombol Buat laporan.
Di bagian Dioptimalkan PWA, Lighthouse melaporkan bahwa aplikasi contoh tidak memberikan Ikon Apple Touch.
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.
- Buka Safari untuk iOS.
- Buka URL aplikasi contoh Anda. Ini adalah URL seperti
https://example.glitch.me
yang Anda disebutkan sebelumnya. - Ketuk Bagikan > Tambahkan ke Layar Utama. Anda mungkin harus menggeser ke kiri untuk melihat opsi ini.
- Ketuk Tambahkan.
Karena situs belum menentukan ikon Apple Touch, iOS hanya membuat ikon untuk situs tersebut dari konten halaman.
Menambahkan ikon Apple touch ke aplikasi contoh
- Hapus tanda komentar pada tag
<link rel="apple-touch-icon">
di bagian bawah<head>
dariindex.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.