Halaman ini diterjemahkan oleh Cloud Translation API.

Ekstensi Cakupan Aplikasi Web

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 top ditampilkan sebagai satu aplikasi web. Dokumen ini menjelaskan alasan tim Chrome memperkenalkan fitur ini, dan kapan Anda mungkin ingin menggunakannya.

Demián Renzulli

Thomas Steiner

Ringkasan

Beberapa aplikasi web memiliki beberapa asal, misalnya, example.com sebagai aplikasi utama, lalu space_1.example.com, …, space_n.example.com, terkadang digabungkan dengan special-example.com, sebagai sub-pengalaman, semuanya berada di bawah naungan aplikasi utama. Jenis arsitektur situs ini memiliki implikasi dalam konteks Progressive Web Apps. Batasan mencakup tidak dapat berbagi pekerja layanan, jenis perangkat apa pun, penyimpanan lokal, dan izin di seluruh origin. Selain itu, navigasi lintas-asal di PWA mandiri menampilkan UI jendela ("out of scope" bar) 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 Mem-build beberapa Progressive Web App di domain yang sama.

Scope Extensions API memungkinkan aplikasi web mengatasi beberapa tantangan yang kebijakan origin yang sama terapkan pada jenis arsitektur situs ini. Hal ini memungkinkan aplikasi web memperluas cakupan ke origin lain untuk membantu mencapai pengalaman terpadu, dengan mempertimbangkan kesepakatan antara origin utama aplikasi web dan origin terkait.

Sasaran

Sasaran utama Scope Extensions API adalah memungkinkan situs yang mengontrol beberapa subdomain dan domain level teratas berperilaku sebagai satu aplikasi web yang terhubung saat menyangkut 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 satu aplikasi web.

Diagram yang menunjukkan PWA utama dan sub-pengalaman terkait.

Ekstensi Cakupan memungkinkan PWA multi-asal 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: Mengizinkan pengguna menavigasi di seluruh origin terkait tanpa mengganggu pengalaman pengguna dengan memanggil UI jendela yang memberi tahu pengguna bahwa mereka beralih dari PWA.
Perekaman link lintas-asal: Mengizinkan aplikasi web merekam navigasi pengguna ke situs yang berafiliasi dengan mereka.

Navigasi dalam cakupan lintas-asal

Secara default, saat pengguna menavigasi di seluruh origin dalam PWA mandiri, mereka akan melihat UI jendela yang menunjukkan bahwa mereka berpindah ke luar pengalaman PWA. Di Chrome, UI ini terdiri dari panel "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 merasa seolah-olah mereka dikeluarkan dari konteks tersebut.

Panel di luar cakupan di bagian atas PWA mandiri.

Panel "Di luar cakupan" ditampilkan di Chrome saat pengguna menjelajahi berbagai origin di PWA mandiri.

Dengan Ekstensi Cakupan, UI jendela tidak akan ditampilkan saat pengguna membuka asal yang terkait sehingga PWA ditampilkan sebagai pengalaman terpadu.

Pengambilan link lintas-asal

Pengambilan Link mengacu pada kemampuan aplikasi untuk mengambil link dalam cakupannya. Cara penerapannya bervariasi di antara browser dan sistem operasi. Misalnya, di Chrome pada ChromeOS, link dalam cakupan PWA yang terinstal secara default akan membuka tab browser dengan indikasi di kolom URL bahwa ada aplikasi yang mampu menangani link ini, sehingga pengguna dapat memilih untuk mengambil link secara otomatis dari titik tersebut.

Perintah omnibar untuk PWA yang diinstal.

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), link tersebut tidak akan dikenali sebagai milik PWA. 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

Mengimplementasikan ekstensi cakupan memerlukan pembentukan hubungan antara asal utama dan asal terkait.

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" }
  ]
}

Mengonfirmasi atribusi

Setiap origin yang tercantum mengonfirmasi pengaitan dengan aplikasi web menggunakan file konfigurasi /.well-known/web-app-origin-association. File ini harus dinamai web-app-origin-association dan ditayangkan di lokasi yang tepat ini, karena file ini adalah URI yang Dikenal.

/.well-known/web-app-origin-association (origin 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 web-nya.
Asal dalam cakupan yang diperluas: Asal di luar cakupan PWA utama, tetapi dikaitkan dengan PWA utama setelah dicantumkan oleh PWA utama sebagai asal terkait dan mengonfirmasi hubungan melalui file web-app-origin-association.

Untuk melakukan pengujian berikut, Anda harus mengaktifkan 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, instal sebagai PWA, lalu buka untuk menjalankannya dalam mode mandiri. PWA berisi link ke asal dalam cakupan yang diperluas dan ke asal yang tidak dalam cakupan yang diperluas.

Jendela PWA utama dengan link dalam cakupan dan cakupan yang diperluas.

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

Navigasi lintas-asal default (tidak dalam cakupan yang diperluas)

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

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

Panel "Di luar cakupan" ditampilkan secara default untuk navigasi lintas-asal untuk PWA dalam mode mandiri.

Navigasi lintas-asal dengan Ekstensi Cakupan (dalam cakupan yang diperluas)

Kembali ke halaman beranda PWA.
Klik link ke asal yang tidak dalam cakupan yang diperluas.
Secara default, panel "out of scope" akan ditampilkan, tetapi karena pengaitan Ekstensi Cakupan, panel tersebut tidak ditampilkan.

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

Panel "Di luar cakupan" tidak ditampilkan di navigasi lintas-asal setelah pengaitan origin telah dibuat dengan Ekstensi Cakupan.

Menguji pengambilan link lintas-asal

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

Perintah omnibar untuk PWA terinstal dengan cakupan yang diperluas.

Mengklik link ke origin terkait PWA akan membuka link di tab baru dan menampilkan ikon "Buka di Aplikasi" yang memungkinkan pengguna memilih untuk mengaktifkan pengambilan link otomatis.

Uji coba origin

Jika ingin menguji API ini di aplikasi Anda di lapangan dengan pengguna sebenarnya, Anda dapat melakukannya dengan uji coba origin. Uji coba origin memungkinkan Anda mencoba fitur eksperimental dengan pengguna dengan mendapatkan token pengujian yang terikat dengan domain Anda. Kemudian, Anda dapat men-deploy aplikasi dan mengharapkannya berfungsi di browser yang mendukung fitur yang Anda uji (dalam hal ini, fitur tersebut tersedia di Chrome dari versi 121 hingga 126). Untuk mendapatkan token Anda sendiri guna menjalankan uji coba origin, isi formulir permohonan.

Masukan

Tim Chrome mencari masukan tentang kegunaan API ini. Untuk membantu tim mengembangkan API ini 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 input dari Matt Giuca. API ini diimplementasikan oleh Alan Cutter dari Google Chrome dan Hassan Talat, Kristin Lee, dan Lu Huang dari Microsoft Edge.