Penyempurnaan

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 di manifes. Spesifikasi Manifes Aplikasi Web. Fitur ini memungkinkan Anda menentukan daftar pintasan ke berbagai bagian atau fitur di PWA Anda, yang mempercepat navigasi ke bagian yang sering diakses.

Pintasan aplikasi tersedia di sebagian besar sistem operasi desktop dan Android dengan WebAPK, dan muncul dalam 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 manifes. Fungsi ini mengambil array anggota dengan properti berikut:

name
Teks yang akan ditampilkan kepada pengguna, biasanya dalam menu konteks.
url
URL yang harus dimuat PWA saat pengguna memulainya dari pintasan ini. URL harus berupa URL dalam cakupan PWA Anda, dan harus berupa deep link ke fitur yang dijelaskan 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 upaya terbaik. Artinya, Anda tidak dapat mengandalkan pintasan ini muncul secara konsisten, dan sekalipun muncul, Anda tidak tahu berapa banyak pintasan yang akan muncul atau apakah platform akan mengabaikan ikon karena hal itu merupakan kebijakan browser. Diskusi lengkap per platform berada di luar cakupan, tetapi di bawah ini, Anda memiliki gambaran tentang cara kerjanya di Android dan desktop. Cara terbaik untuk menghadapi ketidakpastian ini adalah dengan mengurutkan item berdasarkan prioritas.

Contoh kode berikut menentukan berbagai pintasan aplikasi yang dapat Anda coba jika Anda 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 di Safari pada iOS/iPadOS.

Layar pembuka

Seperti yang terlihat dalam bab Manifes Aplikasi Web, Android membuat layar pembuka secara otomatis berdasarkan nilai manifes. Hal itu 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 pada:

<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 Anda saat dibuka. Jadi, perangkat iOS dan iPadOS yang berbeda akan membutuhkan gambar yang berbeda. Lebih banyak situasi perlu dicakup di iPad, seperti bukaan 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 Apple Human Interface Guidelines

Versi lain dari gambar peluncuran 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 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. Generator Aset PWA adalah contoh dari alat tersebut.
  • Generator sisi klien, alat JavaScript yang dapat menyematkan satu atau beberapa versi base64 dari gambar 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 yang melakukan hal ini dengan meng-clone layar peluncuran standar Android.

Mendeteksi PWA di platform seluler Apple

Meskipun Anda harus menggunakan Penyempurnaan Progresif dan deteksi fitur di PWA, mungkin ada beberapa kasus ekstrem yang mengharuskan kami mengetahui apakah pengguna menggunakan PWA di platform seluler Apple, seperti ketika Anda ingin menawarkan petunjuk penginstalan atau menambahkan link ke aplikasi khusus platform yang khusus iOS.

Agar tidak membaca 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, berarti 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 ikon PWA Anda. Meskipun display: fullscreen tidak didukung seperti di perangkat Android, Anda dapat menggunakan tag meta non-standar untuk membuat PWA memasuki mode layar penuh.

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 ini berbeda dari Android.

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

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

Saat menggunakan mode ini, berhati-hatilah dengan desain Anda karena sistem operasi akan selalu merender ikon dengan warna putih, jadi Anda harus selalu membedakan latar belakang Anda 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 Bab Desain Aplikasi.

0px teratas dari area pandang Anda berada di bawah status bar secara default; jika Anda menambahkan tag meta hitam transparan, 0px teratas area pandang akan sesuai dengan bagian atas fisik layar

Keandalan penginstalan

Safari di iOS dan iPadOS sebelum versi 15.4 hanya memuat file manifes dari jaringan saat pengguna membuka sheet berbagi -menggunakan ikon berbagi di dalam browser- dan bukan saat halaman dimuat. Oleh karena itu, Safari tidak memeriksa apakah situs Anda merupakan PWA hingga saat itu, yang dapat menyebabkan situasi saat manifes tidak dapat dimuat atau membutuhkan waktu terlalu lama, dan Safari mengabaikannya.

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

Referensi