Izinkan PWA yang diinstal menangani link yang menggunakan protokol tertentu untuk pengalaman yang lebih terintegrasi.
Latar belakang tentang skema (alias protokol)
Uniform Resource Identifier (URI) adalah urutan karakter ringkas yang mengidentifikasi resource abstrak atau fisik. Setiap URI dimulai dengan nama skema yang merujuk pada spesifikasi untuk menetapkan ID dalam skema tersebut. Dengan demikian, sintaksis URI adalah sistem penamaan gabungan dan yang dapat diperluas tempat setiap spesifikasi skema dapat lebih membatasi sintaksis dan semantik ID yang menggunakan skema tersebut. Skema juga dikenal sebagai protokol. Anda dapat melihat beberapa contoh skema di bawah.
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 resource, menyediakan cara untuk menemukan resource dengan mendeskripsikan mekanisme akses utama (misalnya, lokasi jaringannya).
Latar belakang metode registerProtocolHandler()
Metode Navigator
khusus konten aman
registerProtocolHandler()
memungkinkan situs mendaftarkan kemampuannya untuk membuka atau menangani skema URL tertentu. Oleh karena itu, situs perlu
memanggil metode seperti ini: navigator.registerProtocolHandler(scheme, url)
. Kedua parameter tersebut
didefinisikan sebagai berikut:
scheme
: String yang berisi protokol yang ingin ditangani situs.url
: String yang berisi URL pengendali. URL ini harus menyertakan%s
, sebagai placeholder yang akan diganti dengan URL escape agar ditangani.
Skema tersebut harus berupa salah satu
skema yang termasuk dalam daftar aman
(misalnya, mailto
, bitcoin
, atau magnet
) atau dimulai dengan web+
, diikuti dengan minimal satu atau
beberapa huruf ASCII huruf kecil setelah awalan web+
, misalnya, web+coffee
.
Agar lebih jelas, berikut adalah contoh konkret alur:
- Pengguna mengunjungi situs di
https://coffeeshop.example.com/
yang melakukan panggilan berikut:navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s')
. - Pada 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 akan menyebabkan browser membuka URL berikut:
https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato
. URL string penelusuran yang didekode kemudian membaca?type=web+coffee://latte-macchiato
.
Tentang penanganan protokol
Mekanisme pendaftaran pengendali protokol URL untuk PWA saat ini adalah tentang menawarkan pendaftaran pengendali protokol 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 terdaftar akan terbuka
dan menerima URL. Penting untuk diperhatikan bahwa pendaftaran berbasis manifes yang diusulkan dan registerProtocolHandler()
tradisional memainkan peran yang sangat mirip dalam praktiknya, sekaligus tetap memungkinkan tambahan pengalaman pengguna:
- Kesamaan mencakup persyaratan seputar daftar skema yang diizinkan untuk didaftarkan, serta nama dan format parameter, dll.
- Perbedaan dalam pendaftaran berbasis manifes kecil, tetapi mungkin berguna untuk meningkatkan pengalaman bagi pengguna PWA. Misalnya, pendaftaran PWA berbasis manifes mungkin tidak memerlukan tindakan pengguna tambahan selain penginstalan PWA yang dimulai pengguna.
Kasus penggunaan
- Dalam PWA pengolah kata, pengguna dalam dokumen akan menemukan link ke presentasi seperti
web+presentations://deck2378465
. Saat pengguna mengklik link, PWA presentasi akan otomatis terbuka dalam cakupan yang benar dan menampilkan slide presentasi. - 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. Saat teman membagikan link 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 pada navigator.registerProtocolHandler()
. Hanya kali ini informasi diteruskan secara deklaratif melalui
manifes aplikasi web di properti baru yang disebut "protocol_handlers"
yang menggunakan array
objek dengan dua kunci yang diperlukan, yaitu "protocol"
dan "url"
. Cuplikan kode di bawah menunjukkan cara
mendaftarkan 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 sebagai pengendali untuk skema yang sama, misalnya,
protokol mailto
, sistem operasi akan menampilkan pemilih kepada pengguna dan mengizinkan mereka memutuskan pengendali
yang terdaftar yang akan digunakan.
Aplikasi yang sama mendaftar untuk beberapa protokol
Aplikasi yang sama dapat mendaftarkan dirinya 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 dua kasus:
- Update yang menambahkan pengendali baru akan memicu pendaftaran pengendali (terpisah dari penginstalan aplikasi).
- Update yang menghapus pengendali akan memicu pembatalan pendaftaran pengendali (terpisah dari penguninstalan aplikasi).
Proses debug pengendali protokol di DevTools
Buka bagian Protocol Handlers melalui panel Application > Manifest. Anda dapat melihat dan menguji semua protokol yang tersedia di sini.
Misalnya, instal PWA demo ini. Di bagian Protocol Handlers, ketik "americano" dan klik 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 muat ulang aplikasi setelah penginstalan. Browser kini telah mendaftarkan PWA sebagai
pengendali untuk protokol
web+coffee
dengan sistem operasi. - Di jendela PWA yang diinstal, klik link
https://protocol-handler-link.glitch.me/. Tindakan ini akan membuka tab browser baru dengan tiga link. Klik yang pertama atau yang kedua (latte macchiato atau
americano). Browser kini akan menampilkan perintah dan menanyakan apakah Anda setuju jika aplikasi menjadi
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 Register protocol handler di PWA. Kemudian di tab browser, klik link ketiga (chai). Anda juga akan menampilkan perintah, tetapi kemudian membuka PWA di tab, bukan di jendela browser. - Kirim pesan kepada diri sendiri di aplikasi khusus platform seperti Skype di Windows dengan link seperti
<a href="web+coffee://americano">Americano</a>
, lalu klik link tersebut. Tindakan ini juga akan membuka PWA yang diinstal.
Pertimbangan keamanan
Karena penginstalan PWA memerlukan konteks yang aman, penanganan protokol mewarisi batasan ini. Daftar pengendali protokol terdaftar tidak ditampilkan ke web dengan cara apa pun sehingga tidak dapat digunakan sebagai vektor sidik jari.
Upaya navigasi yang tidak dimulai pengguna
Upaya navigasi yang tidak dimulai oleh pengguna, tetapi bersifat terprogram, mungkin tidak membuka aplikasi. URL protokol kustom hanya boleh digunakan dalam konteks penjelajahan tingkat teratas, tetapi tidak, misalnya, sebagai URL iframe.
Daftar protokol yang diizinkan
Sama seperti registerProtocolHandler()
, ada daftar yang diizinkan untuk protokol yang dapat didaftarkan
oleh aplikasi untuk ditangani.
Permintaan izin
Saat peluncuran pertama PWA karena protokol yang dipanggil, pengguna akan melihat dialog izin. Dialog ini akan menampilkan nama aplikasi dan asal aplikasi, serta menanyakan kepada pengguna apakah aplikasi diizinkan untuk menangani link dari protokol. Jika pengguna menolak dialog izin, pengendali protokol yang terdaftar akan diabaikan oleh sistem operasi. Untuk membatalkan pendaftaran pengendali 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 dengan pendaftaran pengendali protokol URL untuk PWA.
Beri tahu kami tentang desain API
Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang tidak ada 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 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
di kotak
Components. Glitch sangat cocok untuk membagikan rekaman ulang yang cepat dan mudah.
Menampilkan 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 mendukung fitur tersebut.
Bagikan rencana penggunaannya di rangkaian pesan Discourse WICG. Kirim Tweet ke
@ChromiumDev menggunakan hashtag
#ProtocolHandler
dan beri tahu kami tempat dan 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. Gambar hero oleh JJ Ying di Unsplash.