Halaman ini diterjemahkan oleh Cloud Translation API.

Selesaikan berbagai hal dengan cepat menggunakan pintasan aplikasi

Pintasan aplikasi memberikan akses cepat ke beberapa tindakan umum yang sering diperlukan pengguna.

François Beaufort

Jungkee Song

Untuk meningkatkan kualitas pengalaman pengguna produktivitas dan memfasilitasi keterlibatan kembali dengan tugas-tugas utama, platform web sekarang mendukung pintasan {i>app<i}. Mereka memungkinkan pengembang web untuk menyediakan akses cepat ke beberapa tindakan umum yang sering dibutuhkan pengguna.

Artikel ini akan mengajarkan cara menentukan pintasan aplikasi. Selain itu, Anda akan mempelajari beberapa praktik terbaik.

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 pun ikon aplikasi ditampilkan meningkatkan produktivitas serta meningkatkan engagement mereka dengan internet .

Menu pintasan aplikasi dipanggil dengan mengklik kanan ikon aplikasi di taskbar (Windows) atau dok (macOS) di desktop pengguna, atau sentuh & memegang kode ikon peluncur di Android.

Screenshot menu pintasan aplikasi yang dibuka di Android — Menu pintasan aplikasi dibuka di Android

Screenshot menu pintasan aplikasi yang dibuka di Windows — Menu pintasan aplikasi dibuka di Windows

Menu pintasan aplikasi hanya ditampilkan untuk Aplikasi Web Progresif yang diinstal di desktop atau perangkat seluler pengguna. Lihat Penginstalan di "Pelajari PWA" untuk mempelajari persyaratan penginstalan.

Setiap pintasan aplikasi mengekspresikan intent pengguna, yang masing-masing terkait dengan URL dalam cakupan aplikasi web Anda. URL dibuka saat pengguna mengaktifkan pintasan aplikasi. Contoh pintasan aplikasi meliputi:

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 terpopuler)

Menentukan pintasan aplikasi di manifes aplikasi web

Pintasan aplikasi secara opsional didefinisikan dalam manifes aplikasi web, file JSON yang memberi tahu browser tentang aplikasi web Anda dan bagaimana seharusnya perilakunya diinstal di desktop atau perangkat seluler pengguna. Lebih tepatnya, mereka yang dideklarasikan dalam anggota array shortcuts. Berikut adalah dari 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 lain bersifat opsional.

name

Label yang dapat dibaca manusia untuk pintasan aplikasi saat yang ditampilkan kepada pengguna.

short_name (opsional)

Label yang dapat dibaca manusia dan digunakan dalam keterbatasan ruang. Disarankan yang Anda berikan, meskipun opsional.

description (opsional)

Tujuan yang dapat dibaca manusia untuk pintasan aplikasi. Tidak digunakan pada saat penulisan tetapi mungkin terpapar teknologi pendukung pada masa mendatang.

url

URL terbuka saat pengguna mengaktifkan aplikasi {i>shortcut<i}. URL ini harus ada dalam cakupan manifes aplikasi web. Jika ya URL relatif, URL dasarnya akan menjadi URL manifes aplikasi web.

icons (opsional)

Array objek resource gambar. Setiap objek harus menyertakan properti src dan sizes. Tidak seperti ikon manifes aplikasi web, type gambar bersifat opsional. File SVG tidak didukung pada saat penulisan. Gunakan PNG sebagai gantinya.

Jika Anda ingin ikon sempurna dengan piksel, berikan dengan kelipatan 48 dp (yaitu 36x36, Ikon piksel 48x48, 72x72, 96x96, 144x144, 192x192). Jika tidak, sebaiknya Anda menggunakan satu ikon berukuran 192x192 piksel.

Untuk mengukur kualitas, ikon harus berukuran setidaknya setengah dari ukuran ideal perangkat Android, yaitu 48 dp. Misalnya, untuk ditampilkan pada layar xxhdpi, ikon minimal harus berukuran 72 x 72 piksel. (Ini berasal dari formula untuk mengonversi satuan dp untuk satuan piksel.)

Menguji pintasan aplikasi

Untuk memverifikasi bahwa pintasan aplikasi Anda disiapkan dengan benar, gunakan panel Manifest di Panel Application di DevTools.

Screenshot pintasan aplikasi di DevTools — Pintasan aplikasi yang ditampilkan di DevTools

Panel ini menyediakan versi manifes yang dapat dibaca manusia properti, termasuk pintasan aplikasi. Hal ini memudahkan untuk memverifikasi bahwa semua ikon {i>shortcut<i}, jika disediakan, memuat dengan benar.

Pintasan aplikasi mungkin tidak langsung tersedia untuk semua pengguna karena Progresif Update Aplikasi Web dibatasi hingga satu kali sehari. Cari tahu selengkapnya tentang cara Chrome menangani update untuk manifes aplikasi web.

Praktik terbaik

Mengurutkan pintasan aplikasi berdasarkan prioritas

Pintasan ditampilkan dalam urutan yang Anda tentukan dalam manifes. Sebaiknya Anda mengurutkan pintasan aplikasi berdasarkan prioritas karena batas pada jumlah pintasan aplikasi yang ditampilkan bervariasi menurut platform. Chrome dan Edge aktif Windows misalnya membatasi jumlah pintasan aplikasi hingga 10 sementara Chrome untuk Hanya layar Android 3. Sebelum Chrome 92 untuk Android 7, versi 4 diizinkan. Krom 92 menambahkan pintasan ke setelan situs, yang menggunakan salah satu pintasan yang tersedia slot untuk aplikasi.

Gunakan nama pintasan aplikasi yang berbeda

Anda tidak boleh bergantung pada ikon untuk membedakan pintasan aplikasi karena selalu terlihat. Misalnya, macOS tidak mendukung ikon di dok menu pintasan. Gunakan nama yang berbeda untuk setiap pintasan aplikasi.

Mengukur penggunaan pintasan aplikasi

Anda harus menganotasi entri pintasan aplikasi url seperti yang biasa 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 ini.

Dukungan Browser

Sumber

Screenshot menu pintasan aplikasi yang dibuka di ChromeOS — Menu pintasan aplikasi dibuka di ChromeOS

Dukungan Aktivitas Web Tepercaya

Bubblewrap, alat yang direkomendasikan untuk membuat aplikasi Android yang menggunakan Web Tepercaya Aktivitas, membaca pintasan aplikasi dari manifes aplikasi web dan secara otomatis menghasilkan konfigurasi yang sesuai untuk aplikasi Android. Perhatikan bahwa ikon untuk pintasan apl wajib dan setidaknya harus berukuran 96 x 96 piksel Balon gelembung.

PWABuilder, alat hebat untuk mengubah Progressive Web App menjadi Aplikasi Web Tepercaya Aktivitas Web, mendukung pintasan aplikasi dengan beberapa peringatan.

Untuk developer yang mengintegrasikan Aktivitas Web Tepercaya secara manual ke dalam aplikasi Android aplikasi, pintasan aplikasi Android dapat digunakan untuk menerapkan perilaku model.

Contoh

Lihat contoh pintasan aplikasi dan sumbernya.

Link bermanfaat

MDN
Spesifikasi
Contoh pintasan aplikasi | Sumber contoh pintasan aplikasi
Komponen Kedipan: UI>Browser>WebAppInstalls