Pilih bagaimana link dalam cakupan dapat membuka PWA Anda dengan Pengambilan Link Deklaratif

Thomas Steiner

Perhatian: Declarative Link Capturing adalah bagian dari project kemampuan. Tim engineering telah memutuskan bahwa Perekaman Link Deklaratif tidak akan diluncurkan dengan desain saat ini. Sebagai gantinya, fitur ini telah didesain ulang seperti yang dijelaskan dalam Mengontrol cara peluncuran aplikasi. Jika aplikasi Anda mengimplementasikan Declarative Link Capturing API, Anda harus bertransisi ke Launch Handler API pengganti.

Apa yang dimaksud dengan Perekaman Link Deklaratif?

Mengklik link di web terkadang dapat memberikan kejutan yang menyenangkan. Misalnya, mengklik link halaman web ke YouTube di perangkat seluler akan membuka aplikasi YouTube iOS atau Android, jika diinstal. Namun, saat Anda menginstal YouTube PWA di komputer desktop dan mengklik link, link akan terbuka di tab browser.

Namun, hal ini menjadi lebih rumit. Bagaimana jika link tersebut muncul bukan di situs, tetapi dalam pesan chat yang Anda terima di salah satu aplikasi chat Google? Pada sistem operasi desktop, yang memiliki konsep jendela aplikasi terpisah, jika aplikasi sudah terbuka, apakah jendela atau tab baru harus dibuat untuk setiap klik link? Jika Anda memikirkannya, ada banyak cara untuk mengambil link dan navigasi, termasuk, tetapi tidak terbatas pada, hal berikut:

• Mengklik link dari halaman web lain.
• URL diluncurkan dari aplikasi khusus platform di sistem operasi.
• Navigasi yang berasal dari App Shortcuts API.
• Link yang melewati pengendali protokol URL.
• Navigasi yang disebabkan oleh pengendali file.
• Navigasi yang disebabkan oleh Share Target API.
• …dan lainnya.

Penangkapan Link Deklaratif adalah proposal untuk properti manifes aplikasi web yang disebut "capture_links" yang memungkinkan developer menentukan secara deklaratif apa yang akan terjadi saat browser diminta untuk membuka URL yang berada dalam cakupan navigasi aplikasi, dari konteks di luar cakupan navigasi. Proposal ini tidak berlaku jika pengguna sudah berada dalam cakupan navigasi (misalnya, jika pengguna membuka tab browser yang berada dalam cakupan, dan mengklik link internal).

Istilah kunci: Cakupan navigasi manifes aplikasi web adalah item "scope" dari manifes yang diproses. Cakupan navigasi membatasi kumpulan URL yang dapat dinavigasi konteks aplikasi saat manifes diterapkan. Jika anggota "scope" tidak ada dalam manifes, anggota tersebut akan ditetapkan secara default ke jalur induk anggota "start_url".

Beberapa kondisi khusus seperti mengklik tengah link (atau mengklik kanan, lalu "buka di tab baru") biasanya tidak akan memicu perilaku pengambilan link. Tidak masalah apakah link adalah target=_self atau target=_blank, sehingga link yang diklik di jendela browser (atau jendela PWA yang berbeda) akan dibuka di PWA meskipun biasanya link tersebut akan menyebabkan navigasi dalam tab yang sama.

Kasus penggunaan yang disarankan

Contoh situs yang dapat menggunakan API ini meliputi:

• PWA yang ingin membuka jendela, bukan tab browser, saat pengguna mengklik link ke PWA tersebut. Dalam lingkungan desktop, sering kali ada beberapa jendela aplikasi yang terbuka sekaligus.
• PWA jendela tunggal tempat developer lebih memilih untuk hanya memiliki satu instance aplikasi yang terbuka kapan saja, dengan navigasi baru yang memfokuskan instance yang ada. Sub-kasus penggunaan mencakup:
  • Aplikasi yang hanya memiliki satu instance yang berjalan (misalnya, pemutar musik, game).
  • Aplikasi yang menyertakan pengelolaan multi-dokumen dalam satu instance (misalnya, strip tab yang diterapkan HTML).

Mengaktifkan melalui about://flags

Untuk bereksperimen dengan Declarative Link Capturing secara lokal, tanpa token uji coba origin, aktifkan flag #enable-desktop-pwas-link-capturing di about://flags.

Bagaimana cara menggunakan Declarative Link Capturing?

Developer dapat menentukan secara deklaratif cara link harus diambil dengan memanfaatkan kolom manifes aplikasi web tambahan "capture_links". Properti ini menggunakan string atau array string sebagai nilainya. Jika array string diberikan, agen pengguna akan memilih item pertama yang didukung dalam daftar, yang secara default menjadi "none". Nilai-nilai berikut didukung:

• "none" (default): Tidak ada pengambilan link; link yang diklik yang mengarah ke cakupan PWA ini akan membuka seperti biasa tanpa membuka jendela PWA.
• "new-client": Setiap link yang diklik akan membuka jendela PWA baru di URL tersebut.
• "existing-client-navigate": Link yang diklik akan terbuka di jendela PWA yang ada, jika ada, atau di jendela baru jika tidak ada. Jika ada lebih dari satu jendela PWA, browser dapat memilih salah satunya secara acak. Perilakunya seperti "new-client" jika saat ini tidak ada jendela yang terbuka. 🚨 Hati-hati! Opsi ini berpotensi menyebabkan kehilangan data, karena halaman dapat dinavigasi secara sewenang-wenang. Situs harus menyadari bahwa mereka memilih untuk menggunakan perilaku tersebut dengan memilih opsi ini. Opsi ini paling cocok untuk situs "hanya baca" yang tidak menyimpan data pengguna dalam memori, seperti pemutar musik. Jika halaman yang ditinggalkan memiliki peristiwa beforeunload, pengguna akan melihat perintah sebelum navigasi selesai.

Catatan: Ada diskusi tentang menambahkan opsi yang tidak membuka jendela sama sekali, tetapi memicu peristiwa launch di jendela latar depan yang dipilih atau pekerja layanan. Lihat penjelasan peristiwa launch untuk mengetahui detailnya, dan, lebih khusus, bagian tentang existing-client-event dan service-worker.

Demo

Demo untuk Perekaman Link Deklaratif sebenarnya terdiri dari dua demo yang berinteraksi bersama:

1. https://continuous-harvest-tomato.glitch.me/
2. https://hill-glitter-tree.glitch.me/

Screencast di bawah menunjukkan cara keduanya berinteraksi. Keduanya menunjukkan dua perilaku yang berbeda, "new-client" dan "existing-client-navigate". Pastikan untuk menguji aplikasi dalam status yang berbeda, yang berjalan di tab atau sebagai PWA yang diinstal, untuk melihat perbedaan perilaku.

Keamanan dan izin

Tim Chromium mendesain dan menerapkan Declarative Link Capturing menggunakan prinsip inti yang ditentukan dalam Mengontrol Akses ke Fitur Platform Web yang Efisien, termasuk kontrol pengguna, transparansi, dan ergonomi. API ini memungkinkan situs memiliki opsi kontrol tambahan baru. Pertama, dapat otomatis membuka aplikasi yang diinstal di jendela. Hal ini menggunakan UI yang ada, tetapi memungkinkan situs memicunya secara otomatis. Kedua, kemampuan untuk memfokuskan jendela yang ada di domainnya sendiri dan memicu peristiwa yang berisi URL yang diklik. Hal ini dimaksudkan untuk memungkinkan situs menavigasi jendela yang ada ke halaman baru, yang mengganti alur navigasi HTML default.

Bermigrasi ke Launch Handler API

Uji coba origin Declarative Link Capturing API berakhir pada 30 Maret 2022 untuk Chromium 97 dan yang lebih lama. API ini akan diganti dengan serangkaian fitur dan API baru di Chromium 98 dan yang lebih baru, yang mencakup pengambilan link yang diaktifkan pengguna dan Launch Handler API.

Pengambilan Link

Di Chromium 98, pengambilan link otomatis kini menjadi perilaku keikutsertaan pengguna, bukan diberikan pada waktu penginstalan ke aplikasi web. Untuk mengaktifkan pengambilan link, pengguna harus meluncurkan aplikasi yang diinstal dari browser menggunakan Buka dengan dan memilih Ingat pilihan saya.

Atau, pengguna dapat mengaktifkan atau menonaktifkan pengambilan link untuk aplikasi web tertentu di halaman setelan manajemen aplikasi.

Untuk saat ini, pengambilan link adalah fitur khusus ChromeOS; dukungan untuk Windows, macOS, dan Linux sedang dalam proses.

Launch Handler API

Kontrol navigasi masuk dimigrasikan ke Launch Handler API, yang memungkinkan aplikasi web memutuskan cara aplikasi web diluncurkan dalam berbagai situasi seperti pengambilan link, berbagi target, atau penanganan file, dll. Untuk bermigrasi dari Declarative Link Capturing API ke Launch Handler API:

1. Daftarkan situs Anda untuk uji coba origin Pengelola Peluncuran dan tempatkan kunci uji coba origin ke aplikasi web Anda.

2. Tambahkan entri "launch_handler" ke manifes situs Anda.

   • Untuk menggunakan "capture_links": "new-client", tambahkan:"launch_handler": { "route_to": "new-client" }.
   • Untuk menggunakan "capture_links": "existing-client-navigate", tambahkan: "launch_handler": { "route_to": "existing-client-navigate" }.
   • Untuk menggunakan "capture_links": "existing-client-event" (yang tidak pernah diterapkan dalam uji coba origin Pengambilan Link Deklaratif), tambahkan: "launch_handler": { "route_to": "existing-client-retain" }. Dengan opsi ini, halaman dalam cakupan aplikasi Anda tidak akan lagi menavigasi secara otomatis saat navigasi link diambil. Anda harus menangani LaunchParams di JavaScript dengan memanggil window.launchQueue.setConsumer() untuk mengaktifkan navigasi.

Kolom capture_links dan pendaftaran uji coba origin Declarative Link Capturing berlaku hingga 30 Maret 2022. Tindakan ini akan memastikan pengguna di Chromium 97 dan yang lebih lama masih dapat meluncurkan aplikasi web di link yang diambil.

Untuk mengetahui detail selengkapnya, lihat Mengontrol cara peluncuran aplikasi.

Masukan

Tim Chromium ingin mengetahui pengalaman Anda dengan Declarative Link Capturing.

Ceritakan kepada kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang Anda perlukan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan? Ajukan masalah spesifikasi di repo GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah yang ada.

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada penerapan Chromium? Atau apakah implementasinya berbeda dengan spesifikasi? Laporkan bug di new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan masukkan UI>Browser>WebAppInstalls di kotak Components. Glitch sangat cocok untuk membagikan rekaman ulang yang cepat dan mudah.

Menampilkan dukungan untuk API

Apakah Anda berencana menggunakan Penangkapan Link Deklaratif? Dukungan publik Anda membantu tim Chromium memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.

Kirim tweet ke @ChromiumDev menggunakan hashtag #DeclarativeLinkCapturing dan beri tahu kami tempat dan cara Anda menggunakannya.

Link bermanfaat

• Draf spesifikasi
• Penjelas
• Bug Chromium
• Intent to Prototype
• Intent to Experiment
• Entri ChromeStatus

Ucapan terima kasih

Penangkapan Link Deklaratif ditentukan oleh Matt Giuca dengan input dari Alan Cutter dan Dominick Ng. API ini diimplementasikan oleh Alan Cutter. Artikel ini ditinjau oleh Joe Medley, Matt Giuca, Alan Cutter, dan Shunya Shishido. Gambar utama oleh Zulmaury Saavedra di Unsplash.