Mengonfigurasi Aplikasi Web
Aplikasi web dirancang untuk terlihat dan berperilaku dengan cara yang mirip dengan aplikasi asli—misalnya, diskalakan agar sesuai dengan seluruh layar di iOS. Anda dapat menyesuaikan aplikasi web Anda untuk Safari di iOS lebih jauh lagi, dengan membuatnya tampak seperti aplikasi asli saat pengguna menambahkannya ke layar Utama. Anda melakukan ini dengan menggunakan pengaturan untuk iOS yang diabaikan oleh platform lain.
Misalnya, Anda dapat menentukan ikon untuk aplikasi web yang digunakan untuk mewakilinya saat ditambahkan ke layar Utama di iOS, seperti yang dijelaskan dalam Menentukan Ikon Halaman Web untuk Klip Web . Anda juga dapat meminimalkan antarmuka pengguna Safari di iOS, seperti yang dijelaskan dalam Mengubah Tampilan Bilah Status dan Menyembunyikan Komponen Antarmuka Pengguna Safari , saat aplikasi web Anda diluncurkan dari layar Utama. Ini semua adalah pengaturan opsional yang ketika ditambahkan ke konten web Anda akan diabaikan oleh platform lain.
Baca Pengaturan Viewport untuk Aplikasi Web untuk cara mengatur viewport untuk aplikasi web di iOS.
Menentukan Ikon Halaman Web untuk Klip Web
Anda mungkin ingin pengguna dapat menambahkan aplikasi web atau tautan halaman web Anda ke layar Utama. Tautan ini, diwakili oleh ikon, disebut Klip Web. Ikuti langkah-langkah sederhana ini untuk menentukan ikon untuk mewakili aplikasi web atau halaman web Anda di iOS.
Untuk menentukan ikon untuk seluruh situs web (setiap halaman di situs web), tempatkan file ikon dalam format PNG di folder dokumen root yang disebutapple-touch-icon.png
Untuk menentukan ikon untuk satu halaman web atau mengganti ikon situs web dengan ikon khusus halaman web, tambahkan elemen tautan ke halaman web, seperti pada:
<link rel="apple-touch-icon" href="/custom_icon.png">
Pada contoh di atas, ganti custom_icon.pngdengan nama file ikon Anda.
Untuk menentukan beberapa ikon untuk resolusi perangkat yang berbeda—misalnya, mendukung perangkat iPhone dan iPad—tambahkan sizesatribut ke setiap elemen tautan sebagai berikut:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" size="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" size="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" size="167x167" href="touch-icon-ipad-retina.png">
Ikon yang ukuran paling sesuai untuk perangkat digunakan. Lihat bab "Grafik" dari Pedoman Antarmuka Manusia iOS untuk ukuran dan rekomendasi ikon saat ini.
Jika tidak ada ikon yang cocok dengan ukuran yang disarankan untuk perangkat, ikon terkecil yang lebih besar dari ukuran yang disarankan akan digunakan. Jika tidak ada ikon yang lebih besar dari ukuran yang disarankan, ikon terbesar digunakan.
Jika tidak ada ikon yang ditentukan menggunakan elemen tautan, direktori akar situs web akan mencari ikon dengan apple-touch-icon...awalan. Misalnya, jika ukuran ikon yang sesuai untuk perangkat adalah 58 x 58, sistem akan mencari nama file dalam urutan berikut:
apple-touch-icon-80x80.png
apple-touch-icon.png
Catatan: Safari di iOS 7 tidak menambahkan efek ke ikon. Safari versi lama tidak akan menambahkan efek untuk file ikon yang diberi nama -precomposed.pngakhiran. Lihat Langkah Pertama: Mengidentifikasi Aplikasi Anda di iTunes Connect untuk detailnya.
Menentukan Gambar Layar Peluncuran
Di iOS, mirip dengan aplikasi asli, Anda dapat menentukan gambar layar peluncuran yang ditampilkan saat aplikasi web Anda diluncurkan. Ini sangat berguna saat aplikasi web Anda offline. Secara default, tangkapan layar aplikasi web terakhir kali diluncurkan digunakan. Untuk menyetel gambar startup lain, tambahkan elemen tautan ke halaman web, seperti pada:
<link rel="apple-touch-startup-image" href="/launch.png">
Pada contoh di atas, ganti launch.pngdengan nama file layar startup Anda. Lihat bab "Grafik" dari Pedoman Antarmuka Manusia iOS untuk ukuran dan rekomendasi layar peluncuran saat ini.
Menambahkan Judul Ikon Peluncuran
Di iOS, Anda dapat menentukan judul aplikasi web untuk ikon peluncuran. Secara default, <title>tag digunakan. Untuk menetapkan judul yang berbeda, tambahkan tag meta ke halaman web, seperti pada:
<meta name="apple-mobile-web-app-title" content="AppTitle">
Pada contoh di atas, ganti AppTitledengan judul Anda.
Menyembunyikan Komponen Antarmuka Pengguna Safari
Di iOS, sebagai bagian dari pengoptimalan aplikasi web Anda, gunakan mode mandiri agar lebih terlihat seperti aplikasi asli. Saat Anda menggunakan mode mandiri ini, Safari tidak digunakan untuk menampilkan konten web—khususnya, tidak ada bidang teks URL browser di bagian atas layar atau bilah tombol di bagian bawah layar. Hanya bilah status yang muncul di bagian atas layar. Baca Mengubah Tampilan Bilah Status untuk cara meminimalkan bilah status.
Setel apple-mobile-web-app-capabletag meta ke yesuntuk mengaktifkan mode mandiri. Misalnya, HTML berikut menampilkan konten web menggunakan mode mandiri.
<meta name="apple-mobile-web-app-capable" content="yes">
Anda dapat menentukan apakah halaman web ditampilkan dalam mode mandiri menggunakan window.navigator.standaloneproperti JavaScript Boolean hanya-baca. Untuk informasi selengkapnya tentang mode mandiri, lihat apple-mobile-web-app-capable .
Mengubah Tampilan Bilah Status
Jika aplikasi web Anda ditampilkan dalam mode mandiri seperti aplikasi asli, Anda dapat meminimalkan bilah status yang ditampilkan di bagian atas layar di iOS. Lakukan dengan menggunakan meta tag status-bar-style.
Tag meta ini tidak berpengaruh kecuali Anda terlebih dahulu menentukan mode mandiri seperti yang dijelaskan dalam Menyembunyikan Komponen Antarmuka Pengguna Safari . Kemudian gunakan tag meta gaya bilah status, apple-mobile-web-app-status-bar-style, untuk mengubah tampilan bilah status tergantung pada kebutuhan aplikasi Anda. Misalnya, jika Anda ingin menggunakan seluruh layar, atur gaya bilah status menjadi hitam transparan.
Misalnya, HTML berikut menyetel warna latar belakang bilah status menjadi hitam:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Untuk informasi lebih lanjut tentang tampilan bilah status, lihat bab “Bilah UI” dari Pedoman Antarmuka Manusia iOS .
Menautkan ke Aplikasi Asli Lainnya
Aplikasi web Anda dapat menautkan ke aplikasi iOS bawaan lainnya dengan membuat tautan dengan URL khusus. Fungsionalitas yang tersedia termasuk menelepon nomor telepon, mengirim SMS atau iMessage, dan membuka video YouTube di aplikasi aslinya jika sudah terpasang. Misalnya, untuk menautkan ke nomor telepon, buat elemen jangkar dalam format berikut:
<a href="tel:085370195995">Hubungi saya</a>
