Penyempurnaan

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

Pintasan aplikasi

Pintasan aplikasi adalah daftar deep link statis ke PWA Anda, yang ditulis dalam manifes. Spesifikasi Manifes Aplikasi Web. Alat 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 dari manifes. Dibutuhkan 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 apa yang harus mewakili pintasan

Anda harus memperlakukan Pintasan aplikasi sebagai kemampuan upaya terbaik. 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. 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 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 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 dalam 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 membutuhkan 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 Apple Human Interface Guidelines

Berbagai versi 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 image startup iOS

Menentukan image startup membutuhkan kerja keras, 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 yang 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.

Agar tidak membaca string agen pengguna, periksa properti standalone dari objek navigator. Ini adalah properti non-standar, dan hanya tersedia di mesin WebKit pada 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 ikon PWA Anda. Meskipun display: fullscreen tidak didukung seperti di perangkat Android, Anda dapat menggunakan tag meta non-standar untuk membuat PWA masuk ke 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 dalam 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 jam, level baterai, dan ikon notifikasi) masih terlihat, tetapi dirender di bagian atas konten dengan latar belakang transparan.

Ketika menggunakan mode ini, berhati-hatilah dengan desain Anda karena sistem operasi akan selalu merender ikon dalam warna putih, jadi Anda harus selalu mengontraskan 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.

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

Keandalan penginstalan

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

Jika Safari tidak dapat memuat manifes tepat waktu, menekan "Add to Home Screen" menempatkan ikon di layar utama, tetapi tidak memberikan pengalaman aplikasi; itu hanya akan menjadi {i>shortcut<i} ke {i>tab<i} Safari.

Resource