Halaman ini diterjemahkan oleh Cloud Translation API.

Pendaftaran pengendali protokol URL untuk PWA

Izinkan PWA yang diinstal menangani link yang menggunakan protokol tertentu untuk pengalaman yang lebih terintegrasi.

Thomas Steiner

Latar belakang skema (alias protokol)

Uniform Resource Identifier (URI) adalah urutan karakter ringkas yang mengidentifikasi resource fisik atau abstrak. Setiap URI dimulai dengan nama skema yang mengacu pada spesifikasi untuk menetapkan ID dalam skema tersebut. Dengan demikian, sintaksis URI adalah sistem penamaan gabungan dan yang dapat diperluas, di mana setiap spesifikasi skema dapat membatasi lebih jauh sintaksis dan semantik ID yang menggunakan skema tersebut. Skema juga dikenal sebagai protokol. Anda dapat melihat beberapa contoh skema 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 subkumpulan URI yang, selain mengidentifikasi resource, memberikan cara untuk menemukan resource dengan menjelaskan mekanisme akses utamanya (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 ini ditentukan 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 yang di-escape untuk ditangani.

Skema harus berupa salah satu dari skema yang tercantum dalam daftar aman (misalnya, mailto, bitcoin, atau magnet) atau diawali dengan web+, diikuti dengan setidaknya satu atau beberapa huruf ASCII huruf kecil setelah awalan web+, misalnya, web+coffee.

Untuk lebih jelasnya, berikut ini contoh konkret alurnya:

Pengguna mengunjungi 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 akan mengklik link seperti <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
Tindakan ini akan membuat browser membuka URL berikut: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. URL string penelusuran yang didekode kemudian akan membaca ?type=web+coffee://latte-macchiato.

Apa yang dimaksud dengan 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 yang 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, sambil tetap memungkinkan kemungkinan untuk pengalaman pengguna pelengkap:

Kemiripan mencakup persyaratan pada daftar skema yang diizinkan untuk didaftarkan, serta nama dan format parameter, dll.
Tidak ada perbedaan dalam pendaftaran berbasis manifes, 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 oleh pengguna.

Kasus penggunaan

Di PWA pemrosesan kata, pengguna dalam dokumen 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 linknya, PWA torrent yang diinstal akan diluncurkan dan mulai didownload.
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(). Baru saja, informasi diteruskan secara deklaratif melalui manifes aplikasi web di properti baru yang disebut "protocol_handlers" yang menggunakan array objek dengan dua kunci wajib "protocol" dan "url". Cuplikan kode di bawah ini 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 mendaftar untuk protokol yang sama

Jika beberapa aplikasi mendaftarkan dirinya sendiri sebagai pengendali untuk skema yang sama, misalnya, protokol mailto, sistem operasi akan menampilkan alat pilih kepada pengguna dan memungkinkan mereka memutuskan pengendali terdaftar mana yang akan digunakan.

Aplikasi yang sama yang mendaftar ke 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 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 uninstal 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 Pengendali Protokol, ketik "americano", lalu klik Test protocol untuk membuka halaman kopi di PWA.

Pengendali protokol di panel Manifest

Demo

Anda dapat melihat demo pendaftaran pengendali protokol URL untuk PWA di Glitch.

Buka https://protocol-handler.glitch.me/, instal PWA, lalu 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 ikon pertama atau kedua (latte macchiato atau americano). Browser kini akan menampilkan perintah dan menanyakan apakah Anda tidak keberatan dengan aplikasi yang 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). Tindakan ini 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 link seperti <a href="web+coffee://americano">Americano</a>, lalu klik link tersebut. Aplikasi ini juga akan membuka PWA yang diinstal.

Demo pengendali protokol URL dengan tab browser dengan link di sebelah kiri, dan jendela PWA mandiri di sebelah kanan.

Pertimbangan keamanan

Karena penginstalan PWA memerlukan konteks agar aman, penanganan protokol akan mewarisi batasan ini. Daftar pengendali protokol terdaftar tidak diekspos 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 terprogram, mungkin tidak membuka 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(), ada daftar protokol yang diizinkan yang dapat didaftarkan aplikasi untuk ditangani.

Dialog persetujuan

Pada 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 tersebut. Jika pengguna menolak dialog izin, pengendali protokol 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 terkait pendaftaran pengendali protokol URL untuk PWA.

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 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 Anda untuk menggunakannya 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. Banner besar oleh JJ Ying di Unsplash.