Peningkatan

Ada banyak peningkatan yang dapat meningkatkan konversi dan penggunaan PWA Anda.

Pintasan aplikasi

Pintasan aplikasi adalah daftar statis deep link ke PWA Anda, yang ditulis dalam manifes Anda. Spesifikasi Manifes Aplikasi Web. Spesifikasi ini memungkinkan Anda menentukan daftar pintasan ke berbagai bagian atau fitur di PWA, yang mempercepat navigasi ke bagian yang sering diakses.

Pintasan aplikasi tersedia di sebagian besar sistem operasi desktop dan Android dengan WebAPK, dan muncul di menu kontekstual pada ikon aplikasi di layar utama, dok, atau taskbar, seperti pada gambar berikut:

Untuk mengakses menu ini, pengguna harus mengklik kanan atau menekan lama ikon PWA.

Catatan: Pintasan aplikasi hanya tersedia jika pengguna menginstal PWA Anda.

Peringatan: Setelah pengguna menginstal PWA, Anda tidak dapat menambahkan atau menghapus pintasan hingga Anda mengupdate manifes di server dan algoritma update dipicu.

Pintasan ditentukan dalam anggota shortcuts manifes. Fungsi ini memerlukan array anggota dengan properti berikut:

name

Teks yang akan ditampilkan kepada pengguna, biasanya di menu konteks.

url

URL yang harus dimuat PWA saat pengguna memulainya dari pintasan ini. URL ini harus berupa URL dalam cakupan PWA Anda, dan harus memiliki deep link ke fitur yang dijelaskan oleh name atau short_name.

short_name

(Opsional) Nama yang lebih pendek digunakan jika tidak ada cukup ruang untuk menampilkan nilai lengkap kolom name.

description

(Opsional) Deskripsi tentang fungsi pintasan ini

icons

(Opsional) Array objek ikon dengan kolom src, type, sizes, dan purpose opsional, yang menjelaskan gambar yang harus mewakili pintasan

Anda harus memperlakukan Pintasan aplikasi sebagai kemampuan yang dilakukan dengan sebaik mungkin. Artinya, Anda tidak dapat mengandalkan pintasan ini untuk muncul secara konsisten, dan meskipun muncul, Anda tidak tahu berapa banyak pintasan yang akan muncul atau apakah platform akan mengabaikan ikon karena hal ini merupakan pertimbangan browser. Pembahasan lengkap per platform di luar cakupan, tetapi di bawah ini Anda dapat mengetahui cara kerjanya di Android dan desktop. Cara terbaik untuk mengatasi ketidakpastian ini adalah dengan mengurutkan item berdasarkan prioritas.

Perhatian: Chrome dan Edge di desktop merender 10 item pertama, sedangkan Chrome di Android hanya merender tiga pintasan pertama dalam daftar manifes, jadi sebaiknya Anda mengurutkannya berdasarkan prioritas. Chrome di Android juga menambahkan akses ke "Info Aplikasi" dan "Setelan Situs" dari menu setelah daftar kustom Anda.

Catatan: Jika memublikasikan PWA ke katalog dan app store, Anda dapat mengonversi pintasan dalam manifes ke implementasi khusus platform menggunakan API khusus untuk setiap sistem operasi, seperti Quick Actions di iOS dan pintasan di Android. BubbleWrap mendukung Pintasan aplikasi untuk Android dan ChromeOS serta PWA Builder untuk Android, ChromeOS, iOS, dan iPadOS.

Contoh kode berikut menentukan berbagai pintasan aplikasi yang dapat Anda coba jika menginstal aplikasi di Android dengan Chrome atau di desktop dengan Edge atau Chrome.

iOS dan iPadOS

Saat memublikasikan PWA, ada beberapa peningkatan yang dapat meningkatkan pengalaman pengguna di Safari di iOS/iPadOS.

Layar pembuka

Seperti yang terlihat di bab Manifes Aplikasi Web, Android membuat layar pembuka secara otomatis berdasarkan nilai manifes. Hal ini tidak berlaku untuk iOS dan iPadOS. Di perangkat ini, Anda harus menentukan layar pembuka di HTML sebagai gambar statis menggunakan elemen <link>.

Gambar ini dikenal sebagai gambar startup di perangkat Apple dan menggunakan properti rel dengan nilai apple-touch-startup-image, seperti dalam:

<link rel="apple-touch-startup-image" href="ios-startup.png">

Tantangannya adalah bahwa image startup harus memiliki ukuran jendela yang sama persis dengan yang akan dimiliki PWA Anda saat dibuka. Jadi, perangkat iOS dan iPadOS yang berbeda akan memerlukan gambar yang berbeda. Lebih banyak situasi yang perlu dibahas di iPad, seperti pembukaan lanskap/potret dan merender PWA dalam mode multitasking (seperti 1/3,1/2, atau 2/3 layar).

Anda dapat memeriksa daftar terbaru ukuran layar iOS dan iPadOS di Panduan Antarmuka Manusia Apple

Versi gambar peluncuran yang berbeda dapat ditetapkan dengan kueri media di dalam atribut media:

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

Peringatan: Jika ingin memberikan semua opsi yang memungkinkan yang menggabungkan definisi layar, orientasi, dan mode multitasking, Anda akan memiliki lebih dari 25 gambar berbeda yang perlu dibuat dan ditautkan di HTML. Jika Anda tidak menyediakan gambar startup untuk konteks iOS atau iPadOS pengguna, layar putih akan muncul dalam animasi pembukaan, dan saat PWA Anda dimuat

Pola desain untuk gambar startup iOS

Menentukan image startup adalah pekerjaan yang sulit, jadi kami memiliki beberapa alat untuk pembuatan dan konfigurasi otomatis:

• Pembuatan statis terintegrasi dengan sistem build Anda, membuat semua gambar statis PNG, dan memberi Anda kode HTML dengan elemen <link> untuk dimasukkan ke dalam dokumen. PWA Asset Generator adalah contoh alat tersebut.
• Generator sisi klien, alat JavaScript yang dapat menyematkan satu atau beberapa versi base64 gambar startup ke elemen yang dimasukkan <link> berdasarkan jenis dan ukuran layar perangkat saat ini. Anda dapat menggunakan kanvas dalam memori, merender gambar, dan mengonversinya menjadi URI data: dengan file PNG. Library Compat PWA adalah library sisi klien yang mudah digunakan dan melakukan hal ini dengan meng-clone layar peluncuran standar Android.

Mendeteksi PWA di platform seluler Apple

Meskipun Anda harus menggunakan Progressive Enhancement dan deteksi fitur di PWA, mungkin ada beberapa kasus ekstrem saat kita perlu mengetahui apakah pengguna berada di PWA di platform seluler Apple, seperti saat Anda ingin menawarkan petunjuk penginstalan atau menambahkan link ke aplikasi khusus platform yang hanya untuk iOS.

Untuk menghindari pembacaan string agen pengguna, periksa properti standalone dari objek navigator. Ini adalah properti non-standar, dan hanya tersedia di mesin WebKit di iOS dan iPadOS.

• Jika navigator.standalone adalah undefined, artinya pengguna tidak menggunakan perangkat iPadOS atau iOS.
• Jika navigator.standalone adalah false, artinya pengguna membuka PWA di browser dan menggunakannya di sana.
• Jika navigator.standalone adalah true, artinya pengguna membuka PWA dari layar utama dan mendapatkan pengalaman PWA mandiri.

Dukungan layar penuh

Di Safari di iOS dan iPad, hanya display: standalone yang didukung sebagai mode tampilan untuk PWA Anda.

Pada gambar berikutnya, Anda dapat melihat di sebelah kiri desain mandiri default dengan warna tema, dan di sebelah kanan PWA dengan mode iOS layar penuh yang memungkinkan Anda merender konten di belakang status bar.

Jika Anda menambahkan tag berikut di HTML, PWA Anda di iOS dan iPadOS akan memasuki mode layar penuh, tetapi berbeda dengan Android.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Dalam mode ini, status bar perangkat (bagian atas tempat Anda melihat ikon jam, level baterai, dan notifikasi) masih terlihat, tetapi dirender di atas konten Anda dengan latar belakang transparan.

Peringatan: Warna tema diabaikan dalam mode ini, dan panel notifikasi dirender di atas latar belakang transparan. Selain itu, piksel [0, 0] aplikasi Anda kini menjadi piksel [0, 0] layar fisik, bukan setelah area aman.

Saat menggunakan mode ini, berhati-hatilah dengan desain Anda karena sistem operasi akan selalu merender ikon dalam warna putih, jadi Anda harus selalu membuat kontras latar belakang untuk bagian atas layar dengan konten terang. Selain itu, Anda harus menggunakan variabel lingkungan CSS untuk merender konten di area aman, seperti yang terlihat di Bab Desain Aplikasi.

Keandalan penginstalan

Di iOS dan iPadOS sebelum 15.4, file manifes hanya dimuat dari jaringan saat pengguna membuka sheet berbagi -menggunakan ikon berbagi dalam browser- dan bukan saat halaman dimuat. Oleh karena itu, browser tidak memeriksa apakah situs Anda adalah PWA hingga saat itu, yang dapat menyebabkan situasi saat manifes tidak dapat dimuat atau memerlukan terlalu banyak waktu, dan browser mengabaikannya.

Jika browser tidak dapat memuat manifes tepat waktu, menekan "Tambahkan ke Layar Utama" akan menempatkan ikon di layar utama, tetapi tidak memberikan pengalaman aplikasi; ikon tersebut hanya akan menjadi pintasan ke tab browser.

Peringatan: Jika tidak dapat memuat manifes, browser akan kembali untuk memeriksa apakah PWA Anda memiliki beberapa tag meta yang tidak digunakan lagi, seperti apple-mobile-web-app-capable. Anda tidak boleh menggunakan metatag ini. Aplikasi ini memberikan pengalaman aplikasi layar utama tanpa atribut penting untuk PWA Anda, seperti mematuhi atribut start_url atau scope, sehingga memberikan pengalaman aplikasi yang buruk.

Resource

• PWA Asset Generator
• Menyelesaikan berbagai hal dengan cepat menggunakan pintasan aplikasi
• Library Kompatibilitas PWA
• Menentukan Pintasan Aplikasi