Mulai Chrome 122, Anda dapat berlangganan uji coba origin untuk anggota manifes aplikasi scope_extensions
,
yang memungkinkan situs yang mengontrol beberapa subdomain dan domain
level atas ditampilkan sebagai satu aplikasi web. Dokumen ini menjelaskan alasan
tim Chrome memperkenalkan fitur ini, dan kapan Anda mungkin ingin menggunakannya.
Ringkasan
Beberapa aplikasi web memiliki beberapa
origin, 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 arsitektur
situs ini memiliki implikasi dalam konteks Progressive Web App.
Batasannya meliputi tidak dapat membagikan pekerja layanan, jenis perangkat apa pun,
penyimpanan lokal, dan izin di seluruh origin. Selain itu, navigasi lintas origin di PWA mandiri akan menampilkan UI jendela (kolom "di luar cakupan") yang menunjukkan bahwa pengguna telah keluar dari pengalaman PWA. Anda dapat mempelajari cara mengatasi beberapa
masalah ini dalam artikel
Progressive Web App di situs multi-asal
dan
Membuat beberapa Progressive Web App di domain yang sama.
Scope Extensions API memungkinkan aplikasi web mengatasi beberapa tantangan yang diterapkan oleh kebijakan origin yang sama pada jenis arsitektur situs ini. Hal ini memungkinkan aplikasi web memperluas cakupan ke origin lain untuk membantu mencapai pengalaman terpadu, mengingat perjanjian antara origin utama aplikasi web dan origin terkait.
Tujuan
Sasaran utama dari Scope Extensions API adalah memungkinkan situs yang mengontrol
beberapa subdomain dan domain level teratas untuk berperilaku sebagai satu aplikasi web yang berdekatan
dalam hal UI aplikasi web dan pengambilan link. Misalnya, mengizinkan example.com
situs
yang mencakup example.com.co.uk
dan support.example.com
berperilaku
sebanyak mungkin sebagai aplikasi web tunggal.
Ekstensi Cakupan memungkinkan PWA multi-origin berperilaku sebagai aplikasi web yang berdekatan saat terkait UI aplikasi web.
Dalam praktiknya, hal ini diterjemahkan menjadi dua sasaran yang lebih spesifik:
- Navigasi lintas origin: Izinkan pengguna menjelajahi seluruh origin terkait tanpa mengganggu pengalaman pengguna dengan memanggil UI jendela yang memberi tahu pengguna bahwa mereka beralih dari PWA.
- Pengambilan link lintas origin: Memungkinkan 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 akan melihat UI jendela yang menunjukkan bahwa mereka berpindah ke luar pengalaman PWA. Di Chrome, UI ini terdiri dari kolom "di luar cakupan" yang berisi URL asal baru. Hal ini mengganggu pengalaman pengguna, karena pengguna berharap untuk terus melakukan navigasi dalam konteks aplikasi yang sama, tetapi pengguna mungkin merasa mereka diambil dari konteks tersebut.
Panel "Di luar cakupan" ditampilkan di Chrome saat pengguna membuka berbagai origin dalam PWA mandiri.
Dengan Ekstensi Cakupan, UI jendela tidak akan ditampilkan saat pengguna membuka salah satu asal terkait sehingga PWA ditampilkan sebagai pengalaman terpadu.
Pengambilan link lintas origin
Perekaman Link mengacu pada kemampuan aplikasi untuk mengambil link dalam cakupan. Cara penerapannya bervariasi antara browser dan sistem operasi. Misalnya, pada Chrome di ChromeOS, link dalam cakupan PWA terinstal secara default akan membuka tab browser dengan indikasi di kolom URL bahwa ada aplikasi yang mampu menangani link ini, sehingga pengguna dapat memilih ikut serta dalam pengambilan link otomatis dari titik tersebut.
Fragmen kolom URL Chrome untuk tab di ChromeOS yang menampilkan indikasi visual bahwa link dapat ditangani oleh PWA dan opsi untuk mengingat keputusan tersebut.
Jika pengguna mengklik link yang berada di luar cakupan PWA (termasuk link ke subdomain atau domain level teratas), ia tidak akan dianggap sebagai miliknya. Misalnya, link akan dibuka di tab browser tanpa indikasi apa pun kepada pengguna bahwa ada aplikasi yang mampu menangani link tersebut. Scope Extensions API memungkinkan perluasan cakupan PWA sehingga origin terkait diperlakukan sebagai link dalam cakupan.
Penerapan
Untuk menerapkan ekstensi cakupan, hubungan antara asal utama dan asal terkait harus ditetapkan.
Mendeklarasikan daftar origin terkait
Tambahkan anggota manifes aplikasi web scope_extensions
ke origin PWA utama untuk
memungkinkan aplikasi web memperluas cakupannya ke origin lain.
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 harus
diberi nama web-app-origin-association
dan ditayangkan di lokasi yang tepat ini, karena
merupakan 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
di manifes aplikasi webnya. - Asal dalam cakupan yang diperluas: Origin di luar cakupan PWA utama, tetapi dikaitkan dengannya setelah dicantumkan oleh PWA utama sebagai origin terkait dan mengonfirmasi hubungan tersebut melalui file
web-app-origin-association
-nya.
Untuk melakukan pengujian berikut, Anda harus mengaktifkan
tanda about://flags/#enable-desktop-pwas-scope-extensions
(tersedia mulai
Chrome v115 dan seterusnya).
Menguji navigasi lintas origin
Sebagai prasyarat untuk pengujian ini, buka PWA utama di browser, instal sebagai PWA, lalu buka untuk menjalankannya dalam mode mandiri. PWA berisi link ke origin dalam cakupan yang diperluas dan ke origin yang tidak berada dalam cakupan yang diperluas.
Demo PWA dengan link ke origin dalam cakupan yang diperluas dan origin yang tidak berada dalam cakupan yang diperluas.
Navigasi lintas asal default (bukan dalam cakupan yang diperluas)
- Klik link ke origin yang tidak berada dalam cakupan diperluas di dalam PWA layar penuh.
- Akibatnya, navigasi terjadi dan panel di luar cakupan ditampilkan.
Panel "Di luar cakupan" ditampilkan secara default untuk navigasi lintas origin untuk PWA dalam mode mandiri.
Navigasi lintas origin dengan Ekstensi Cakupan (dalam cakupan yang diperluas)
- Kembali ke halaman beranda PWA.
- Klik link ke origin yang tidak termasuk dalam extended scope.
- Secara default, panel "di luar cakupan" akan ditampilkan, tetapi tidak ditampilkan karena pengaitan Ekstensi Cakupan.
Panel "Di luar cakupan" tidak ditampilkan dalam navigasi lintas origin setelah pengaitan origin dibuat dengan Ekstensi Cakupan.
Menguji pengambilan link lintas origin
- Buka dan instal PWA utama di perangkat ChromeOS.
- Klik link berikut: asal yang terkait.
- Link akan dibuka di tab browser baru dan perintah untuk membukanya di PWA yang diinstal.
Mengklik link ke origin terkait PWA akan membuka link di tab baru dan menampilkan ikon "Buka di Aplikasi", yang memungkinkan pengguna memilih ikut serta dalam pengambilan link otomatis.
Uji coba origin
Jika ingin menguji API ini di aplikasi Anda secara langsung dengan pengguna sungguhan, Anda dapat melakukannya dengan uji coba origin. Uji coba origin memungkinkan Anda mencoba fitur eksperimental bersama pengguna Anda dengan mendapatkan token pengujian yang terhubung ke domain Anda. Kemudian, Anda dapat men-deploy aplikasi dan mengharapkannya berfungsi di browser yang mendukung fitur yang Anda uji (dalam hal ini, aplikasi tersedia di Chrome dari versi 121 hingga 126). Untuk mendapatkan token Anda sendiri guna menjalankan uji coba origin, isi formulir permohonan.
Masukan
Tim Chrome memerlukan masukan tentang kegunaan API ini. Untuk membantu tim mengembangkan API ini dengan masukan tentang kegunaannya dan kasus penggunaan baru yang tidak dibahas dalam versi saat ini, buka Masalah di GitHub.
Referensi tambahan
- Scope Extensions API - Uji Coba Origin
- Status Chrome - Ekstensi Cakupan Aplikasi Web
- Penjelasan Ekstensi Cakupan untuk Aplikasi Web
- Niat untuk Bereksperimen
- Posisi Standar Mozilla
- Posisi Standar Apple
- Bug Chromium
- Progressive Web App di situs multi-asal
- Membangun beberapa Progressive Web App di domain yang sama
Ucapan terima kasih
Terima kasih khusus kepada tim di balik pengembangan API ini. Ekstensi Cakupan ditentukan oleh Alan Cutter dan Lu Huang, dengan input dari Matt Giuca. API tersebut diimplementasikan oleh Alan Cutter dari Google Chrome dan Hassan Talat, Kristin Lee, dan Lu Huang dari Microsoft Edge.