PWA sebagai Pengendali URL

Izinkan PWA yang diinstal menangani URL untuk pengalaman yang lebih terintegrasi.

Thomas Steiner

Apa yang dimaksud dengan PWA sebagai Pengendali URL?

Bayangkan Anda sedang chat dengan teman menggunakan aplikasi messenger instan seperti Message di macOS dan Anda sedang membahas musik. Selanjutnya, bayangkan Anda berdua telah menginstal PWA music.example.com di perangkat. Jika ingin membagikan lagu favorit agar dapat dinikmati teman, Anda dapat mengiriminya deep link seperti https://music.example.com/rick-astley/never-gonna-give-you-up. Karena link ini cukup panjang, developer music.example.com mungkin telah memutuskan untuk menambahkan link pendek tambahan ke setiap jalur, seperti, misalnya, https://🎵.example.com/r-a/n-g-g-y-u.

PWA sebagai Pengendali URL memungkinkan aplikasi seperti music.example.com mendaftarkan diri sebagai pengendali URL untuk URL yang cocok dengan pola seperti https://music.example.com, https://*.music.example.com, atau https://🎵.example.com, sehingga link dari luar PWA, misalnya, dari aplikasi pesan instan atau program email, akan terbuka di PWA yang diinstal, bukan di tab browser.

PWA sebagai Pengendali URL terdiri dari dua tambahan:

  1. Anggota manifes aplikasi web "url_handlers".
  2. Format file web-app-origin-association untuk memvalidasi pengaitan URL di dalam dan di luar cakupan.

Kasus penggunaan yang disarankan untuk PWA sebagai Pengendali URL

Contoh situs yang dapat menggunakan API ini antara lain:

  • Situs streaming musik atau video, jadi lacak link atau link playlist yang terbuka di pengalaman pemutar aplikasi.
  • Pembaca berita atau RSS yang diikuti atau berlangganan ke situs akan terbuka dalam mode pembaca aplikasi.

Cara menggunakan PWA sebagai Pengendali URL

Mengaktifkan melalui about://flags

Untuk bereksperimen dengan PWA sebagai Pengendali URL secara lokal, tanpa token uji coba origin, aktifkan tanda #enable-desktop-pwas-url-handling di about://flags.

Anggota manifes aplikasi web "url_handlers"

Untuk mengaitkan PWA yang diinstal dengan pola URL, pola ini harus ditentukan dalam manifes aplikasi web. Hal ini terjadi melalui anggota "url_handlers". Metode ini menerima array objek dengan properti origin, yang merupakan string wajib yang merupakan pola untuk mencocokkan asal. Pola ini diizinkan memiliki awalan karakter pengganti (*) untuk menyertakan beberapa sub-domain (seperti https://*.example.com). URL yang cocok dengan asal tersebut dapat ditangani oleh aplikasi web ini. Skema ini selalu diasumsikan sebagai https://, tetapi perlu disebutkan secara eksplisit.

Kutipan manifes aplikasi web di bawah menunjukkan bagaimana contoh PWA musik dari paragraf pengantar dapat menyiapkannya. Entri kedua dengan karakter pengganti ("https://*.music.example.com") memastikan aplikasi juga diaktifkan untuk https://www.music.example.com atau kemungkinan contoh lain seperti https://marketing-activity.music.example.com.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

File web-app-origin-association

Karena PWA berada di asal yang berbeda (music.example.com) dengan beberapa URL yang perlu ditangani (misalnya, https://🎵.example.com), aplikasi perlu memverifikasi kepemilikan origin lain ini. Hal ini terjadi pada file web-app-origin-association yang dihosting di origin lainnya.

File ini harus berisi JSON yang valid. Struktur level atas adalah objek, dengan anggota bernama "web_apps". Anggota ini adalah array objek dan setiap objek mewakili entri untuk aplikasi web unik. Setiap objek berisi:

Kolom Deskripsi Jenis Default
"manifest" (Wajib) String URL manifes aplikasi web dari PWA terkait string T/A
"details" (Opsional) Objek yang berisi array pola URL yang disertakan dan dikecualikan object T/A

Setiap objek "details" berisi:

Kolom Deskripsi Jenis Default
"paths" (Opsional) Array string jalur yang diizinkan string[] []
"exclude_paths" (Opsional) Array string jalur yang tidak diizinkan string[] []

Contoh file web-app-origin-association untuk contoh PWA musik di atas diberikan di bawah ini. Aplikasi akan dihosting di 🎵.example.com asal dan membentuk keterkaitan dengan PWA music.example.com, yang diidentifikasi oleh URL manifes aplikasi webnya.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Kapan URL akan cocok?

PWA cocok dengan URL untuk ditangani jika kedua kondisi berikut terpenuhi:

  • URL cocok dengan salah satu string origin di "url_handlers".
  • Browser dapat memvalidasi melalui file web-app-origin-association masing-masing yang disetujui oleh setiap origin untuk mengizinkan aplikasi ini menangani URL tersebut.

Mengenai web-app-origin-association penemuan file

Agar browser dapat menemukan file web-app-origin-association, developer harus menempatkan file web-app-origin-association di folder /.well-known/ di root aplikasi. Agar berhasil, nama file harus web-app-origin-association.

Demo

Untuk menguji PWA sebagai Pengendali URL, pastikan Anda menetapkan tanda browser seperti yang dijelaskan di atas, lalu menginstal PWA di https://mandymsft.github.io/pwa/. Dengan melihat manifes aplikasi webnya, Anda dapat mengetahui bahwa file tersebut menangani URL dengan pola URL berikut: https://mandymsft.github.io dan https://luhuangmsft.github.io. Karena yang kedua berada di origin yang berbeda (luhuangmsft.github.io) dengan PWA, PWA di mandymsft.github.io perlu membuktikan kepemilikan, yang terjadi melalui file web-app-origin-association yang dihosting di https://luhuangmsft.github.io/.well-known/web-app-origin-association.

Untuk menguji apakah aplikasi ini benar-benar berfungsi, kirim pesan uji coba kepada diri sendiri menggunakan aplikasi pesan instan pilihan Anda atau email yang dilihat di program email yang tidak berbasis web, seperti Mail di macOS. Email atau pesan teks harus berisi salah satu link https://mandymsft.github.io atau https://luhuangmsft.github.io. Keduanya akan terbuka di PWA yang diinstal.

Aplikasi pesan instan Windows Skype di samping PWA demo yang terinstal, yang dibuka dalam mode mandiri setelah mengklik link yang ditanganinya dalam pesan chat Skype.

Keamanan dan izin

Tim Chromium merancang dan menerapkan PWA sebagai Pengendali URL menggunakan prinsip inti yang ditetapkan dalam Mengontrol Akses ke Fitur Platform Web yang Canggih, termasuk kontrol pengguna, transparansi, dan ergonomi.

Kontrol pengguna

Jika lebih dari satu PWA terdaftar sebagai pengendali URL untuk pola URL tertentu, pengguna akan diminta untuk memilih PWA yang ingin digunakan untuk menangani pola tersebut, jika ada. Navigasi yang dimulai di tab browser tidak ditangani oleh proposal ini. Navigasi ini secara eksplisit ditujukan untuk navigasi yang dimulai di luar browser.

Transparansi

Jika validasi pengaitan yang diperlukan tidak berhasil diselesaikan selama penginstalan PWA karena alasan apa pun, browser tidak akan mendaftarkan aplikasi sebagai pengendali URL aktif untuk URL yang terpengaruh. Pengendali URL, jika diterapkan dengan tidak benar, dapat digunakan untuk membajak traffic situs. Inilah alasan mekanisme asosiasi aplikasi merupakan bagian penting dari skema tersebut.

Aplikasi khusus platform sudah dapat menggunakan API sistem operasi untuk memerinci aplikasi terinstal pada sistem pengguna. Misalnya, aplikasi di Windows dapat menggunakan FindAppUriHandlersAsync API untuk memerinci pengendali URL. Jika PWA terdaftar sebagai pengendali URL tingkat OS di Windows, kehadirannya akan terlihat oleh aplikasi lain.

Persistensi izin

Asal dapat mengubah pengaitannya dengan PWA kapan saja. Browser akan secara rutin mencoba memvalidasi ulang asosiasi aplikasi web yang terinstal. Jika pendaftaran pengendali URL gagal memvalidasi ulang karena data pengaitan telah berubah atau tidak lagi tersedia, browser akan menghapus pendaftaran.

Masukan

Tim Chromium ingin mengetahui pengalaman Anda menggunakan PWA sebagai Pengendali URL.

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 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 PWA sebagai Pengendali URL? 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 #URLHandlers dan beri tahu kami di mana dan bagaimana Anda menggunakannya.

Link bermanfaat

Ucapan terima kasih

PWA sebagai Pengendali URL ditentukan dan diterapkan oleh Lu Huang dan Mandy Chen dari tim Microsoft Edge. Artikel ini ditinjau oleh Joe Medley. Banner besar oleh Bryson Hammer di Unsplash.