Penyempurnaan

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

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:

Pintasan aplikasi di Android dan macOS.

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

Pintasan ditentukan dalam anggota shortcuts dari 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 penuh 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. Itu berarti Anda tidak dapat mengandalkan pintasan ini untuk muncul secara konsisten, dan bahkan jika pintasan muncul, Anda tidak tahu berapa banyak pintasan yang akan muncul atau apakah platform akan mengabaikan ikon sesuai 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.

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 bagi pengguna 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 di:

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

Tantangannya adalah image startup harus memiliki ukuran jendela yang sama persis dengan yang akan dimiliki PWA saat pembukaan. Jadi, perangkat iOS dan iPadOS yang berbeda akan memerlukan gambar yang berbeda. Lebih banyak situasi perlu diselesaikan di iPad, seperti bukaan lanskap/potret dan merender PWA dalam mode multitask (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">

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 Anda. Pembuat Aset PWA adalah contoh dari alat semacam ini.
  • Generator sisi klien, alat JavaScript yang dapat menyematkan satu atau beberapa versi base64 dari image startup ke dalam 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 Peningkatan Progresif dan deteksi fitur di PWA, mungkin ada beberapa kasus ekstrem yang mengharuskan kami mengetahui apakah pengguna menggunakan PWA di platform seluler Apple, seperti saat Anda ingin menawarkan petunjuk penginstalan atau menambahkan link ke aplikasi khusus platform yang khusus 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.

Perilaku default mandiri (kiri) dan layar iOS layar penuh (kanan).

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.

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, penting untuk menggunakan variabel lingkungan CSS untuk merender konten di area aman, seperti yang terlihat dalam Bagian Desain Aplikasi.

Bagian atas 0 piksel area pandang Anda berada di bawah status bar secara default; jika Anda menambahkan tag meta hitam transparan, bagian atas 0 piksel area pandang Anda akan cocok dengan bagian atas fisik layar

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 merupakan PWA hingga saat itu, yang dapat menyebabkan situasi saat manifes tidak dapat dimuat atau menghabiskan terlalu banyak waktu, dan browser mengabaikannya.

Jika browser tidak dapat memuat manifes tepat waktu, menekan "Add to Home Screen" akan menempatkan ikon di layar utama, tetapi tidak memberikan pengalaman aplikasi; ini hanya akan menjadi pintasan ke tab browser.

Resource