Pintasan aplikasi memberikan akses cepat ke beberapa tindakan umum yang sering dibutuhkan pengguna.
Untuk meningkatkan produktivitas pengguna dan memfasilitasi interaksi kembali dengan tugas-tugas utama, platform web kini mendukung pintasan aplikasi. Memungkinkan developer web menyediakan akses cepat ke beberapa tindakan umum yang sering kali diperlukan pengguna.
Artikel ini akan menunjukkan cara menentukan pintasan aplikasi. Selain itu, Anda akan mempelajari beberapa praktik terbaik terkait.
Tentang pintasan aplikasi
Pintasan aplikasi membantu pengguna memulai tugas umum atau yang direkomendasikan dengan cepat dalam aplikasi web Anda. Akses yang mudah ke tugas tersebut dari mana saja saat ikon aplikasi ditampilkan akan meningkatkan produktivitas pengguna serta meningkatkan interaksi mereka dengan aplikasi web.
Menu pintasan aplikasi dipanggil dengan mengklik kanan ikon aplikasi di taskbar (Windows) atau dok (macOS) di desktop pengguna, atau menyentuh lama ikon peluncur aplikasi di Android.
Menu pintasan aplikasi hanya ditampilkan untuk Progressive Web App yang diinstal di desktop atau perangkat seluler pengguna. Lihat Penginstalan di modul "Pelajari PWA" untuk mempelajari persyaratan kemampuan penginstalan.
Setiap pintasan aplikasi menunjukkan intent pengguna, yang masing-masing terkait dengan URL dalam cakupan aplikasi web. URL akan dibuka saat pengguna mengaktifkan pintasan aplikasi. Contoh pintasan aplikasi mencakup:
- Item navigasi tingkat atas (misalnya, beranda, linimasa, pesanan terbaru)
- Telusuri
- Tugas entri data (misalnya, menulis email atau tweet, menambahkan tanda terima)
- Aktivitas (misalnya, memulai chat dengan kontak paling populer)
Menentukan pintasan aplikasi di manifes aplikasi web
Pintasan aplikasi ditentukan secara opsional dalam manifes aplikasi web, file JSON yang
memberi tahu browser tentang aplikasi web Anda dan bagaimana perilakunya saat
diinstal di perangkat desktop atau seluler pengguna. Lebih khusus lagi, peristiwa ini
dideklarasikan dalam anggota array shortcuts. Di bawah ini adalah
contoh manifes aplikasi web potensial.
{
"name": "Player FM",
"start_url": "https://player.fm?utm_source=homescreen",
…
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "/play-later?utm_source=homescreen",
"icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
},
{
"name": "View Subscriptions",
"short_name": "Subscriptions",
"description": "View the list of podcasts you listen to",
"url": "/subscriptions?utm_source=homescreen",
"icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
}
]
}
Setiap anggota array shortcuts adalah kamus yang berisi setidaknya satu
name dan url. Anggota lainnya bersifat opsional.
name- Label yang dapat dibaca manusia untuk pintasan aplikasi saat ditampilkan kepada pengguna.
short_name(opsional)- Label yang dapat dibaca manusia yang digunakan jika ruang terbatas. Sebaiknya Anda memberikannya, meskipun bersifat opsional.
description(opsional)- Tujuan yang dapat dibaca manusia untuk pintasan aplikasi. Data ini tidak digunakan pada saat penulisan, tetapi mungkin akan terpapar teknologi pendukung di masa mendatang.
url- URL terbuka saat pengguna mengaktifkan pintasan aplikasi. URL ini harus ada dalam cakupan manifes aplikasi web. Jika berupa URL relatif, URL dasarnya akan berupa URL manifes aplikasi web.
icons(opsional)Array objek resource gambar. Setiap objek harus menyertakan properti
srcdansizes. Tidak seperti ikon manifes aplikasi web,typegambar bersifat opsional. File SVG tidak didukung pada saat penulisan ini. Sebagai gantinya, gunakan PNG.Jika Anda menginginkan ikon yang sempurna dengan piksel, berikan dengan kelipatan 48 dp (yaitu ikon 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 piksel). Jika tidak, sebaiknya gunakan satu ikon berukuran 192x192 piksel.
Sebagai ukuran kualitas, ikon harus berukuran setidaknya setengah dari ukuran ideal perangkat di Android, yaitu 48 dp. Misalnya, untuk ditampilkan pada layar xxhdpi, ikon harus berukuran minimal 72x72 piksel. (Ini berasal dari formula untuk mengonversi satuan dp untuk satuan piksel.)
Menguji pintasan aplikasi
Untuk memastikan pintasan aplikasi Anda disiapkan dengan benar, gunakan panel Manifest di panel Application pada DevTools.
Panel ini menyediakan versi berbagai properti manifes yang dapat dibaca manusia, termasuk pintasan aplikasi. Hal ini memudahkan untuk memverifikasi bahwa semua ikon pintasan, jika disediakan, dimuat dengan benar.
Pintasan aplikasi mungkin tidak langsung tersedia untuk semua pengguna karena update Progressive Web App dibatasi sekali sehari. Cari tahu lebih lanjut cara Chrome menangani update untuk manifes aplikasi web.
Praktik terbaik
Mengurutkan pintasan aplikasi berdasarkan prioritas
Pintasan ditampilkan dalam urutan yang Anda gunakan untuk mendefinisikannya dalam manifes. Anda disarankan untuk mengurutkan pintasan aplikasi berdasarkan prioritas karena batas jumlah pintasan aplikasi yang ditampilkan bervariasi menurut platform. Misalnya, Chrome dan Edge di Windows membatasi jumlah pintasan aplikasi hingga 10, sedangkan Chrome untuk Android hanya menampilkan 3 pintasan. Sebelum Chrome 92 untuk Android 7, versi 4 diizinkan. Chrome 92 menambahkan pintasan ke setelan situs, dengan mengambil salah satu slot pintasan yang tersedia untuk aplikasi.
Menggunakan nama pintasan aplikasi yang berbeda
Anda tidak boleh mengandalkan ikon untuk membedakan pintasan aplikasi karena pintasan mungkin tidak selalu terlihat. Misalnya, macOS tidak mendukung ikon di menu pintasan dok. Gunakan nama yang berbeda untuk setiap pintasan aplikasi.
Mengukur penggunaan pintasan aplikasi
Anda harus menganotasi entri url pintasan aplikasi seperti yang Anda lakukan dengan
start_url untuk tujuan analisis (misalnya, url:
"/my-shortcut?utm_source=homescreen").
Dukungan browser
Pintasan aplikasi tersedia di platform dan versi yang tercantum di bawah.
Dukungan Aktivitas Web Tepercaya
Bubblewrap, alat yang direkomendasikan untuk membuat aplikasi Android yang menggunakan Aktivitas Web Tepercaya, membaca pintasan aplikasi dari manifes aplikasi web dan secara otomatis membuat konfigurasi yang sesuai untuk aplikasi Android. Perhatikan bahwa ikon untuk pintasan aplikasi diperlukan dan berukuran minimal 96 x 96 piksel di Bubblewrap.
PWABuilder, alat yang bagus untuk dengan mudah mengubah Progressive Web App menjadi Aktivitas Web Tepercaya, mendukung pintasan aplikasi dengan beberapa catatan.
Untuk developer yang mengintegrasikan Aktivitas Web Tepercaya secara manual ke dalam aplikasi Android, pintasan aplikasi Android dapat digunakan untuk menerapkan perilaku yang sama.
Contoh
Lihat contoh pintasan aplikasi dan sumbernya.