Izinkan PWA yang diinstal menangani link yang menggunakan protokol tertentu untuk pengalaman yang lebih terintegrasi.
Latar belakang skema (alias protokol)
Uniform Resource Identifier (URI) adalah urutan ringkas karakter yang mengidentifikasi abstrak atau fisik. Setiap URI dimulai dengan nama skema yang mengacu pada spesifikasi untuk menetapkan pengidentifikasi di dalam skema tersebut. Dengan demikian, sintaksis URI merupakan gabungan dan dapat diperluas penamaan di mana setiap spesifikasi skema dapat lebih membatasi sintaks dan semantik dari menggunakan skema tersebut. Skema juga dikenal sebagai protokol. Anda dapat melihat beberapa contoh skema seperti di bawah ini.
tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/
Istilah Uniform Resource Locator (URL) mengacu pada subset URI yang, selain mengidentifikasi sumber daya, menyediakan cara untuk menemukan sumber daya dengan menjelaskan akses utamanya mekanisme atensi (misalnya, lokasi jaringannya).
Latar belakang metode registerProtocolHandler()
Metode Navigator
khusus konten yang aman
registerProtocolHandler()
memungkinkan situs mendaftarkan kemampuannya untuk membuka atau menangani skema URL tertentu. Oleh karena itu, situs perlu
panggil metode seperti ini: navigator.registerProtocolHandler(scheme, url)
. Kedua parameter tersebut adalah
didefinisikan sebagai berikut:
scheme
: String berisi protokol yang ingin ditangani situs.url
: String yang berisi URL pengendali. URL ini harus menyertakan%s
, sebagai placeholder yang akan diganti dengan URL yang di-escape untuk ditangani.
Skema harus salah satu dari
skema yang aman
(misalnya, mailto
, bitcoin
, atau magnet
) atau diawali dengan web+
, diikuti dengan sedikitnya satu atau
lebih banyak huruf ASCII kecil setelah awalan web+
, misalnya web+coffee
.
Untuk lebih memperjelasnya, berikut ini adalah contoh konkret dari alurnya:
- Pengguna membuka situs di
https://coffeeshop.example.com/
yang melakukan panggilan berikut:navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s')
. - Di lain waktu, saat mengunjungi
https://randomsite.example.com/
, pengguna mengklik link seperti<a href="web+coffee:latte-macchiato">All about latte macchiato</a>
. - Tindakan ini menyebabkan browser membuka URL berikut:
https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato
. Penelusuran URL string yang didekode, lalu membaca?type=web+coffee://latte-macchiato
.
Apa yang dimaksud dengan penanganan protokol
Mekanisme pendaftaran pengendali protokol URL untuk PWA yang ada sekarang menawarkan pengendali protokol
pendaftaran sebagai bagian dari penginstalan PWA melalui manifesnya. Setelah mendaftarkan PWA sebagai
pengendali protokol, saat pengguna mengklik hyperlink dengan skema tertentu seperti mailto
,
bitcoin
, atau web+music
dari browser atau aplikasi khusus platform, PWA yang terdaftar akan terbuka
dan menerima URL-nya. Penting untuk diperhatikan bahwa pendaftaran berbasis manifes yang diusulkan dan
registerProtocolHandler()
tradisional memainkan peran yang sangat mirip dalam praktiknya, sambil tetap
yang memungkinkan kemungkinan untuk
pengalaman pengguna pelengkap:
- Persamaan mencakup persyaratan seputar daftar skema yang diperbolehkan untuk didaftarkan, dan nama dan format parameter, dll.
- Perbedaan dalam pendaftaran berbasis manifes kecil, tetapi mungkin berguna untuk meningkatkan bagi pengguna PWA. Misalnya, pendaftaran PWA berbasis manifes mungkin tidak memerlukan tindakan pengguna tambahan selain dari penginstalan PWA yang dimulai oleh pengguna.
Kasus penggunaan
- Dalam PWA pengolah kata, pengguna dalam dokumen menemukan tautan ke presentasi seperti
web+presentations://deck2378465
. Saat pengguna mengklik link, PWA presentasi otomatis terbuka dalam ruang lingkup yang benar dan menunjukkan {i>slide deck<i}. - Di aplikasi chat khusus platform, pengguna dalam pesan chat menerima link ke URL
magnet
. Setelah mengklik link, PWA torrent yang terinstal akan diluncurkan dan mulai mendownload. - Pengguna telah menginstal PWA streaming musik. Ketika teman membagikan
tautan ke lagu seperti
web+music://songid=1234&time=0:13
dan pengguna mengkliknya, PWA streaming musik akan otomatis diluncurkan di jendela mandiri.
Cara menggunakan pendaftaran pengendali protokol URL untuk PWA
API untuk pendaftaran pengendali protokol URL dimodelkan dengan cermat
navigator.registerProtocolHandler()
. Kali ini informasi diteruskan secara deklaratif melalui
manifes aplikasi web di properti baru bernama "protocol_handlers"
yang menggunakan array
objek dengan dua kunci yang diperlukan "protocol"
dan "url"
. Cuplikan kode di bawah ini menunjukkan cara
daftarkan web+tea
dan web+coffee
. Nilainya adalah string yang berisi URL pengendali dengan
placeholder %s
yang diperlukan untuk URL yang di-escape.
{
"protocol_handlers": [
{
"protocol": "web+tea",
"url": "/tea?type=%s"
},
{
"protocol": "web+coffee",
"url": "/coffee?type=%s"
}
]
}
Beberapa aplikasi didaftarkan untuk protokol yang sama
Jika beberapa aplikasi mendaftarkan diri mereka sendiri sebagai pengendali untuk skema yang sama, misalnya,
Protokol mailto
, sistem operasi akan menunjukkan alat pilih kepada pengguna dan memungkinkan mereka memutuskan protokol yang
untuk digunakan.
Aplikasi yang sama mendaftar untuk beberapa protokol
Aplikasi yang sama dapat mendaftarkan dirinya sendiri untuk beberapa protokol, seperti yang dapat Anda lihat pada contoh kode di atas.
Update aplikasi dan pendaftaran pengendali
Pendaftaran pengendali disinkronkan dengan versi manifes terbaru yang disediakan oleh aplikasi. Ada adalah dua kasus:
- Update yang menambahkan pengendali baru akan memicu pendaftaran pengendali (terpisah dari penginstalan aplikasi).
- Update yang menghapus pengendali memicu pembatalan pendaftaran pengendali (terpisah dari aplikasi uninstal).
Proses debug pengendali protokol di DevTools
Buka bagian Protocol Handlers melalui Application > Panel Manifest. Anda dapat melihat dan menguji semua protokol yang tersedia di sini.
Misalnya, instal PWA demo ini. Di kolom Bagian Pengendali Protokol, ketik "Americano" dan mengklik Test protocol untuk membuka halaman kopi di PWA.
Demo
Anda dapat melihat demo pendaftaran pengendali protokol URL untuk PWA di Glitch.
- Buka https://protocol-handler.glitch.me/, instal
PWA, dan memuat ulang aplikasi setelah penginstalan. Browser kini telah mendaftarkan PWA sebagai
untuk protokol
web+coffee
dengan sistem operasi. - Di jendela PWA yang diinstal, klik link
https://protocol-handler-link.glitch.me/. Hal ini akan
membuka tab {i>browser<i} baru
dengan tiga tautan. Klik pada pilihan pertama atau kedua (latte macchiato atau
amerika. Browser sekarang akan menampilkan perintah dan menanyakan apakah Anda tidak keberatan jika aplikasi
pengendali protokol untuk protokol
web+coffee
. Jika Anda setuju, PWA akan terbuka dan menampilkan kopi yang dipilih. - Untuk membandingkan dengan alur tradisional yang menggunakan
navigator.registerProtocolHandler()
, klik tombol Daftarkan pengendali protokol di PWA. Kemudian di tab browser, klik link ketiga ({i>chai<i}). Anda juga akan menampilkan perintah, tetapi kemudian membuka PWA di tab, bukan di jendela browser. - Kirim pesan ke diri Anda sendiri di aplikasi khusus platform seperti Skype di Windows dengan tautan seperti
<a href="web+coffee://americano">Americano</a>
lalu klik. Tindakan ini juga akan membuka PWA yang telah diinstal.
Pertimbangan keamanan
Karena penginstalan PWA memerlukan keamanan konteks, penanganan protokol mewarisi batasan data. Daftar pengendali protokol terdaftar tidak terekspos ke web dengan cara apa pun sehingga tidak dapat digunakan sebagai vektor pelacakan sidik jari.
Upaya navigasi yang tidak dimulai oleh pengguna
Upaya navigasi yang tidak dimulai oleh pengguna, tetapi bersifat terprogram, mungkin tidak terbuka aplikasi. URL protokol khusus hanya dapat digunakan dalam konteks penjelajahan tingkat atas, tetapi tidak, misalnya, sebagai URL iframe.
Daftar protokol yang diizinkan
Sama seperti registerProtocolHandler()
, terdapat daftar protokol yang diizinkan yang dapat didaftarkan oleh aplikasi
untuk ditangani.
Dialog izin
Pada peluncuran pertama PWA karena protokol yang dipanggil, pengguna akan diberi dialog izin. Dialog ini akan menampilkan nama aplikasi dan asal aplikasi, serta menanyakan pengguna apakah aplikasi diizinkan untuk menangani tautan dari protokol. Jika pengguna menolak dialog izin, pengendali protokol terdaftar akan diabaikan oleh sistem operasi. Untuk membatalkan pendaftaran protokol , pengguna harus meng-uninstal PWA yang mendaftarkannya. Browser juga akan membatalkan pendaftaran pengendali protokol jika pengguna memilih "Ingat pilihan saya" dan memilih "Jangan izinkan".
Masukan
Tim Chromium ingin mengetahui pengalaman Anda terkait pendaftaran pengendali protokol URL untuk PWA.
Beri tahu kami tentang desain API
Apakah ada sesuatu terkait API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode yang hilang yang dibutuhkan untuk menerapkan ide Anda? Memiliki pertanyaan atau komentar tentang keamanan model? Ajukan masalah spesifikasi di repo GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah yang ada.
Laporkan masalah terkait penerapan
Apakah Anda menemukan bug pada implementasi 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
dalam Komponen
. Glitch sangat cocok untuk membagikan repro dengan cepat dan mudah.
Menunjukkan dukungan untuk API
Apakah Anda berencana menggunakan pendaftaran pengendali protokol URL untuk PWA? Dukungan publik Anda membantu Tim Chromium memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya dukungan mereka.
Bagikan rencana Anda untuk menggunakannya di thread Discourse WICG. Kirim Tweet ke
@ChromiumDev menggunakan hashtag
#ProtocolHandler
dan beri tahu kami tempat serta
cara Anda menggunakannya.
Link penting
Ucapan terima kasih
Pendaftaran pengendali protokol URL untuk PWA diterapkan dan ditentukan oleh Fabio Rocha, Diego González, Connor Moody, dan Samuel Tang dari tim Microsoft Edge. Artikel ini ditinjau oleh Joe Medley dan Fabio Rocha. Banner besar oleh JJ Ying di Unsplash.