Ekstensi Cakupan Aplikasi Web

Mulai Chrome 122, Anda dapat mendaftar ke uji coba origin untuk anggota manifes aplikasi scope_extensions yang memungkinkan situs yang mengontrol beberapa subdomain dan domain tingkat teratas 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 origin, 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 dalam aplikasi utama. Arsitektur situs jenis ini memiliki implikasi dalam konteks Progressive Web App. Batasan mencakup tidak dapat membagikan pekerja layanan, jenis perangkat apa pun, penyimpanan lokal, dan izin di seluruh origin. Selain itu, navigasi lintas origin di PWA mandiri menampilkan UI jendela (bar "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-origin dan Membangun beberapa Progressive Web App di domain yang sama.

Scope Extensions API memungkinkan aplikasi web mengatasi beberapa tantangan yang diberlakukan kebijakan origin yang sama pada jenis arsitektur situs ini. Dengan API ini, aplikasi web dapat memperluas cakupannya ke origin lain untuk membantu mencapai pengalaman yang terpadu, mengingat adanya kesepakatan antara origin utama aplikasi web dan origin terkait.

Catatan: Pada saat penulisan artikel ini, hanya ChromeOS yang mendukung kedua fitur Ekstensi Cakupan yang dibahas dalam dokumen ini (navigasi dalam cakupan lintas origin dan pengambilan link lintas origin). Navigasi dalam cakupan lintas origin juga didukung di Chrome di Windows, macOS, dan Linux, tetapi integrasi dengan pengambilan link belum tersedia di platform ini. Ekstensi Cakupan belum tersedia di perangkat seluler.

Sasaran

Sasaran utama Scope Extensions API adalah memungkinkan situs yang mengontrol beberapa subdomain dan domain tingkat teratas berperilaku sebagai satu aplikasi web yang berkesinambungan dalam hal UI aplikasi web dan pengambilan link. Misalnya, membiarkan situs example.com yang mencakup example.com.co.uk dan support.example.com berperilaku sebisa mungkin sebagai satu aplikasi web.

Ekstensi Cakupan memungkinkan PWA multi-origin berperilaku sebagai aplikasi web yang berdekatan dalam hal UI aplikasi web.

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

• Navigasi lintas origin: Izinkan pengguna menjelajahi berbagai origin terkait tanpa mengganggu pengalaman pengguna dengan memanggil UI jendela yang memberi tahu pengguna bahwa mereka keluar dari PWA.
• Pengambilan link lintas asal: Mengizinkan aplikasi web mengambil navigasi pengguna ke situs yang terkait dengannya.

Navigasi lintas origin dalam cakupan

Secara default, saat pengguna membuka berbagai origin di PWA mandiri, mereka akan melihat UI jendela yang menunjukkan bahwa mereka keluar dari 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 menavigasi dalam konteks aplikasi yang sama, tetapi mereka mungkin merasa bahwa mereka dikeluarkan dari aplikasi tersebut.

Bar "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 salah satu origin terkait sehingga PWA ditampilkan sebagai pengalaman yang terpadu.

Pencatatan link lintas asal

Pengambilan Link mengacu pada kemampuan aplikasi untuk mengambil link dalam cakupannya. Cara penerapan ini bervariasi di antara browser dan sistem operasi. Misalnya, di Chrome di ChromeOS, link dalam cakupan PWA yang terinstal secara default membuka tab browser dengan indikasi di kolom URL bahwa ada aplikasi yang dapat menangani link ini, sehingga pengguna dapat memilih untuk mengaktifkan pengambilan link otomatis mulai saat itu.

Bagian 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 tingkat teratas), link tersebut tidak akan dikenali sebagai bagian dari PWA. Misalnya, link akan dibuka di tab browser tanpa ada indikasi kepada pengguna bahwa ada aplikasi yang dapat menangani link tersebut. Scope Extensions API memungkinkan perluasan cakupan PWA sehingga origin terkait diperlakukan sebagai link dalam cakupan.

Penerapan

Penerapan ekstensi cakupan memerlukan penetapan hubungan antara origin utama dan origin 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" }
  ]
}

Konfirmasi atribusi

Setiap origin yang tercantum mengonfirmasi hubungan 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 Terkenal.

/.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 dengannya setelah dicantumkan oleh PWA utama sebagai asal terkait dan mengonfirmasi hubungan 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 yang lebih baru).

Menguji navigasi lintas asal

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

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

Navigasi lintas origin default (tidak dalam cakupan yang diperluas)

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

Bar "Di luar cakupan" ditampilkan secara default untuk navigasi lintas origin bagi PWA dalam mode mandiri.

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

1. Kembali ke halaman beranda PWA.
2. Klik link ke origin yang tidak dalam cakupan yang diperluas.
3. Secara default, kolom "di luar cakupan" akan ditampilkan, tetapi karena pengaitan Ekstensi Cakupan, kolom tersebut tidak ditampilkan.

Bar "Di luar cakupan" tidak ditampilkan dalam navigasi lintas origin setelah asosiasi origin dibuat dengan Ekstensi Cakupan.

Menguji pengambilan link lintas asal

1. Buka dan instal PWA utama di perangkat ChromeOS.
2. Klik link berikut: server asal terkait.
3. Link dibuka di tab browser baru dan perintah ditampilkan 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 untuk mengaktifkan pengambilan link otomatis.

Uji coba origin

Jika ingin menguji API ini di aplikasi Anda di lapangan dengan pengguna sungguhan, Anda dapat melakukannya dengan uji coba origin. Uji coba origin memungkinkan Anda mencoba fitur eksperimental dengan pengguna dengan mendapatkan token pengujian yang terkait dengan domain Anda. Kemudian, Anda dapat men-deploy aplikasi dan mengharapkan aplikasi tersebut 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

• Scope Extensions API - Uji Coba Origin
• Status Chrome - Ekstensi Cakupan Aplikasi Web
• Penjelasan Ekstensi Cakupan untuk Aplikasi Web
• Maksud untuk Bereksperimen
• Posisi Standar Mozilla
• Posisi Standar Apple
• Bug Chromium
• Progressive Web App di situs multi-origin
• Membuat 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 masukan dari Matt Giuca. API ini diterapkan oleh Alan Cutter dari Google Chrome dan Hassan Talat, Kristin Lee, dan Lu Huang dari Microsoft Edge.