Halaman ini diterjemahkan oleh Cloud Translation API.

Ekstensi Cakupan Aplikasi Web

Dari Chrome 122, Anda dapat berlangganan uji coba origin untuk scope_extensions anggota manifes aplikasi yang mengizinkan situs yang mengontrol beberapa subdomain dan domain tingkat lanjut untuk disajikan sebagai aplikasi web tunggal. Dokumen ini menjelaskan mengapa tim Chrome memperkenalkan fitur ini, dan kapan Anda mungkin ingin menggunakannya.

Demián Renzulli

Thomas Steiner

Ringkasan

Beberapa aplikasi web memiliki banyak origins, untuk misalnya, example.com sebagai aplikasi utama, lalu space_1.example.com, ..., space_n.example.com, terkadang dikombinasikan dengan special-example.com, sebagai sub-pengalaman, semuanya di bawah atap aplikasi utama. Jenis situs ini memiliki implikasi dalam konteks Aplikasi Web Progresif. Batasannya termasuk tidak dapat membagikan pekerja layanan, jenis perangkat apa pun, penyimpanan lokal, dan izin akses di seluruh origin. Selain itu, navigasi lintas asal di PWA mandiri menampilkan UI jendela (panel "di luar cakupan") yang menunjukkan bahwa pengguna telah keluar dari pengalaman PWA. Anda dapat mempelajari bagaimana cara mengatasi beberapa permasalahan ini dalam artikel Progressive Web App di situs multi-origin dan Membuat beberapa Progressive Web App di domain yang sama.

Scope Extensions API memungkinkan aplikasi web mengatasi beberapa tantangan tindakan kebijakan origin yang sama diterapkan pada jenis arsitektur situs ini. Ini memungkinkan aplikasi web memperluas cakupan ke origin lain untuk membantu mencapai pengalaman terpadu, berdasarkan kesepakatan antara kebutuhan aplikasi web asal primer dan asal-usul yang terkait.

Sasaran

Sasaran utama Scope Extensions API adalah untuk memungkinkan situs yang mengontrol beberapa subdomain dan domain level teratas untuk berperilaku sebagai satu aplikasi web yang berdekatan yang berkaitan dengan UI aplikasi web dan pengambilan tautan. Misalnya, membiarkan situs example.com yang mencakup example.com.co.uk dan support.example.com berperilaku sebagai sebanyak mungkin aplikasi web tunggal.

Diagram yang menunjukkan PWA utama dan subpengalaman terkait.

Ekstensi Cakupan memungkinkan PWA multi-origin berperilaku sebagai aplikasi web yang berdekatan saat akan membahas UI aplikasi web.

Pada praktiknya, hal ini diterjemahkan menjadi dua tujuan yang lebih spesifik:

Navigasi lintas asal: Memungkinkan pengguna untuk menjelajahi origin terkait tanpa mengganggu pengalaman pengguna dengan memanggil UI jendela yang menginformasikan pengguna sehingga mereka akan segera meninggalkan PWA.
Pengambilan link lintas origin: Mengizinkan aplikasi web merekam navigasi pengguna ke situs yang berafiliasi dengan mereka.

Navigasi dalam cakupan lintas origin

Secara default, saat pengguna menjelajahi origin di PWA mandiri, mereka menampilkan UI jendela yang menunjukkan bahwa pengguna beralih ke luar pengalaman PWA. Di Chrome, UI ini terdiri dari "di luar cakupan" yang berisi URL asal baru. Hal ini mengganggu pengalaman pengguna, karena pengguna berharap untuk terus menavigasi di dalam konteks aplikasi yang sama, tetapi mereka mungkin melihat mereka akan dikeluarkan dari akun.

Di luar panel cakupan di bagian atas PWA mandiri.

"Di luar cakupan" batang yang ditampilkan di Chrome saat pengguna membuka berbagai origin di PWA mandiri.

Dengan Ekstensi Cakupan, UI jendela tidak akan ditampilkan saat pengguna membuka dari origin terkait sehingga PWA disajikan sebagai pengalaman terpadu.

Pengambilan link lintas origin

Pengambilan Link mengacu pada kemampuan aplikasi untuk menangkap link dalam ruang lingkup proyek. Cara penerapannya bervariasi di antara browser dan sistem operasi yang berbeda. Di Chrome pada ChromeOS, misalnya, link dalam cakupan PWA secara default membuka tab browser dengan indikasi di kolom URL yang ada aplikasi yang mampu menangani tautan ini, memungkinkan pengguna untuk ikut serta untuk pengambilan link otomatis dari titik tersebut.

Prompt Omnibar untuk PWA yang diinstal.

Fragmen kolom URL Chrome untuk tab di ChromeOS yang menampilkan indikasi visual link dapat ditangani oleh PWA dan opsi untuk mengingat keputusan tersebut.

Jika pengguna mengklik link yang berada di luar cakupan PWA (termasuk tautan ke subdomain atau domain tingkat teratas), domain tersebut tidak akan dianggap sebagai milik IP eksternal mana pun yang ditetapkan pada instance tersebut. Misalnya, link akan dibuka di tab browser tanpa indikasi apa pun kepada pengguna bahwa ada aplikasi yang mampu menangani tautan. Ruang Lingkup Extensions API memungkinkan perluasan cakupan PWA sehingga origin diperlakukan sebagai link dalam cakupan.

Penerapan

Untuk menerapkan ekstensi cakupan, Anda harus menetapkan hubungan antara origin utama dan origin terkait.

Mendeklarasikan daftar origin terkait

Tambahkan anggota manifes aplikasi web scope_extensions ke asal PWA utama ke memungkinkan aplikasi web memperluas cakupan ke origin lainnya.

Manifes Aplikasi Web (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

Konfirmasi pengaitan

Setiap origin yang tercantum mengonfirmasi pengaitan dengan aplikasi web menggunakan File konfigurasi /.well-known/web-app-origin-association. File ini perlu diberi nama web-app-origin-association dan ditayangkan di lokasi yang tepat ini, sebagai ini adalah URI yang Dikenal.

/.well-known/web-app-origin-association (asal terkait)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

Demo

Demo ini terdiri dari dua situs:

PWA utama: PWA sebenarnya yang mendeklarasikan daftar origin terkait melalui anggota scope_extensions dalam manifes aplikasi webnya.
Origin dalam cakupan yang diperluas: origin di luar cakupan PWA utama tetapi dikaitkan dengannya setelah dicantumkan oleh PWA utama sebagai origin terkait dan mengonfirmasi hubungan melalui File web-app-origin-association.

Untuk melakukan pengujian berikut, Anda harus mengaktifkan metode Tanda about://flags/#enable-desktop-pwas-scope-extensions (tersedia dari Chrome v115 dan seterusnya).

Menguji navigasi lintas asal

Sebagai prasyarat untuk pengujian ini, buka PWA utama di browser, menginstalnya sebagai PWA dan membukanya untuk menjalankannya dalam mode mandiri. PWA berisi link ke asal dalam cakupan yang diperluas dan ke asal tidak berada dalam cakupan yang diperluas.

Jendela PWA utama dengan cakupan dan link cakupan yang diperluas.

Demo PWA dengan link ke origin dalam cakupan yang diperluas dan origin tidak diperluas ruang lingkup proyek.

Navigasi lintas origin default (tidak dalam cakupan yang diperluas)

Klik link ke origin tidak dalam cakupan yang diperluas di dalam PWA layar penuh.
Akibatnya, navigasi terjadi dan panel luar cakupan ditampilkan.

Jendela PWA utama tanpa panel cakupan setelah mengklik link di luar cakupan.

"Di luar cakupan" panel yang ditampilkan secara default untuk navigasi lintas origin untuk PWA di mode mandiri.

Navigasi lintas origin dengan Ekstensi Cakupan (dalam cakupan yang diperluas)

Buka kembali halaman beranda PWA.
Klik tautan untuk asal tidak berada dalam cakupan yang diperluas.
Secara default, "di luar cakupan" yang ditampilkan, tetapi karena ruang Lingkup Asosiasi ekstensi, bukan.

Jendela PWA utama tanpa di luar kolom cakupan setelah mengklik link cakupan yang diperluas.

"Di luar cakupan" batang tidak ditampilkan dalam navigasi lintas asal setelah pengaitan asal dibuat dengan Ekstensi Cakupan.

Menguji pengambilan link lintas origin

Buka dan instal PWA utama di di perangkat ChromeOS.
Klik link berikut: asal terkait.
Link akan dibuka di tab browser baru dan perintah untuk membukanya akan ditampilkan PWA yang terinstal.

Prompt Omnibar untuk PWA yang diinstal dengan cakupan yang diperluas.

Mengklik link ke asal terkait PWA yang terkait akan membuka link di tab baru dan menampilkan "Open in App" ikon yang memungkinkan pengguna memilih ikut serta dalam penautan otomatis pengambilan gambar.

Uji coba origin

Jika Anda ingin menguji API ini di aplikasi Anda di luar lapangan dengan Anda dapat melakukannya dengan uji coba origin lebih lanjut. Uji coba origin memungkinkan Anda mencoba fitur eksperimental dengan pengguna dengan mendapatkan token pengujian yang dikaitkan dengan domain Anda. Selanjutnya, Anda dapat men-deploy aplikasi dan Anda diharapkan bekerja di browser yang mendukung fitur yang Anda uji (dalam hal ini yang penting, fitur ini tersedia di Chrome dari versi 121 hingga 126). Untuk mendapatkan token Anda sendiri untuk jalankan uji coba origin, isi formulir permohonan.

Masukan

Tim Chrome mencari masukan tentang kegunaan API ini. Kepada membantu tim membuat API ini berkembang dengan masukan tentang kegunaannya dan kasus penggunaan baru yang tidak tercakup dalam versi saat ini, buka Masalah di GitHub.

Referensi lainnya

Ucapan terima kasih

Terima kasih khusus kepada tim di balik pengembangan API ini. Ekstensi Cakupan ditentukan oleh Alan Cutter dan Lu Huang, dengan masukan dari Matt Giuca. API tersebut diimplementasikan oleh Alan Cutter dari Google Chrome dan Hassan Talat, Kristin Lee, dan Lu Huang dari Microsoft Edge.