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 engineer telah memutuskan bahwa Declarative Link Capturing tidak akan diluncurkan dengan desainnya saat ini. Sebagai gantinya, fitur ini telah didesain ulang seperti yang dijelaskan dalam Mengontrol cara aplikasi diluncurkan. Jika aplikasi Anda menerapkan Declarative Link Capturing API, Anda harus beralih ke Launch Handler API pengganti.

Apa itu Penangkapan Tautan Deklaratif?

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

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

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

Pengambilan Link Deklaratif adalah proposal untuk properti manifes aplikasi web yang disebut "capture_links" yang memungkinkan developer menentukan secara deklaratif apa yang harus 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 penting: Cakupan navigasi manifes aplikasi web adalah item "scope" dari manifes yang diproses. Cakupan navigasi membatasi kumpulan URL tempat konteks aplikasi dapat dibuka 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. Apakah link target=_self atau target=_blank tidak menjadi masalah, sehingga link yang diklik di jendela browser (atau jendela PWA lain) akan dibuka di PWA meskipun link tersebut biasanya menyebabkan navigasi dalam tab yang sama.

Kasus penggunaan yang disarankan

Contoh situs yang dapat menggunakan API ini antara lain:

• PWA yang ingin membuka jendela, bukan tab browser, saat pengguna mengklik link ke jendela tersebut. Dalam lingkungan desktop, terkadang masuk akal untuk membuka beberapa jendela aplikasi sekaligus.
• PWA satu jendela tempat developer lebih memilih untuk hanya membuka satu instance aplikasi kapan saja, dengan navigasi baru yang memfokuskan instance yang ada. Sub-kasus penggunaan meliputi:
  • Aplikasi yang masuk akal untuk hanya menjalankan satu instance (misalnya, pemutar musik, game).
  • Aplikasi yang menyertakan pengelolaan multi-dokumen dalam satu instance (misalnya, tab setrip yang diimplementasikan dengan 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 cara pengambilan link secara deklaratif dengan memanfaatkan kolom manifes aplikasi web tambahan "capture_links". Fungsi ini mengambil string atau array string sebagai nilainya. Jika array string diberikan, agen pengguna akan memilih item pertama yang didukung dalam daftar, dan secara default ditetapkan ke "none". Nilai-nilai berikut didukung:

• "none" (default): Tidak ada pengambilan link; link diklik yang mengarah ke cakupan PWA ini membuka seperti normal tanpa membuka jendela PWA.
• "new-client": Setiap link yang diklik membuka jendela PWA baru di URL tersebut.
• "existing-client-navigate": Link yang diklik akan terbuka di jendela PWA yang sudah ada, jika tersedia, atau di jendela baru jika tidak. Jika ada lebih dari satu jendela PWA, browser dapat memilih salah satunya secara arbitrer. Perilaku ini berperilaku seperti "new-client" jika tidak ada jendela yang saat ini terbuka. 🚨 Hati-hati! Opsi ini berpotensi menyebabkan kehilangan data, karena halaman dapat dibuka secara arbitrer. Situs harus mengetahui bahwa mereka memilih untuk ikut serta dalam perilaku tersebut dengan memilih opsi ini. Opsi ini berfungsi paling baik untuk situs "hanya baca" yang tidak menyimpan data pengguna dalam memori, seperti pemutar musik. Jika halaman yang akan ditutup memiliki peristiwa beforeunload, pengguna akan melihat perintah sebelum navigasi selesai.

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

Demo

Demo untuk Declarative Link Capturing 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 berbagai status, yang berjalan di tab atau sebagai PWA yang diinstal, untuk melihat perbedaan perilakunya.

Keamanan dan izin

Tim Chromium merancang dan menerapkan Pengambilan Link Deklaratif menggunakan prinsip inti yang ditetapkan dalam Mengontrol Akses ke Fitur Platform Web yang Canggih, termasuk kontrol pengguna, transparansi, dan ergonomi. API ini memungkinkan opsi kontrol tambahan baru bagi situs. Pertama, otomatis membuka aplikasi terinstal di jendela. Tindakan ini menggunakan UI yang sudah ada, tetapi memungkinkan situs untuk memicunya secara otomatis. Kedua, kemampuan untuk memfokuskan jendela yang ada di domainnya sendiri dan mengaktifkan peristiwa yang berisi URL yang diklik. Hal ini dimaksudkan untuk memungkinkan situs menavigasi jendela yang ada ke halaman baru, yang menggantikan 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 versi sebelumnya. 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.

Perekaman 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 terinstal dari browser menggunakan Open with dan memilih Ingat pilihan saya.

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

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

API Pengendali Peluncuran

Kontrol navigasi masuk dimigrasikan ke Launch Handler API, yang memungkinkan aplikasi web menentukan 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 Pengendali 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 otomatis terbuka saat navigasi link ditangkap. Anda harus menangani LaunchParams di JavaScript dengan memanggil window.launchQueue.setConsumer() untuk mengaktifkan navigasi.

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

Untuk mengetahui detail selengkapnya, lihat Mengontrol cara aplikasi diluncurkan.

Masukan

Tim Chromium ingin mengetahui pengalaman Anda terkait Pengambilan Link Deklaratif.

Beri tahu kami tentang desain API

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

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada implementasi Chromium? Atau apakah implementasinya berbeda dari 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 berfungsi dengan baik untuk berbagi repro yang cepat dan mudah.

Menunjukkan dukungan untuk API

Apakah Anda berencana menggunakan Declarative Link Capturing? 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 di mana dan bagaimana Anda menggunakannya.

Link bermanfaat

• Draf spesifikasi
• Penjelasan
• Bug Chromium
• Intent untuk Membuat Prototipe
• Niat untuk Bereksperimen
• Entri ChromeStatus

Ucapan terima kasih

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