Jika Anda adalah pemimpin teknis atau analis pemasaran digital yang tertarik untuk memberikan pengalaman Web modern ke aplikasi web Adobe Experience Manager (AEM) dan telah mencari opsi untuk melakukannya, maka Anda telah menemukan artikel yang tepat. Pembahasan ini akan membahas apa itu Progressive Web App (PWA) dan apa yang Anda perlukan untuk membuat PWA di AEM dengan memanfaatkan library WorkBox melalui konfigurasi, tanpa coding.
Mengapa PWA?
Progressive Web App memanfaatkan kemampuan web modern. Aplikasi ini dapat diinstal di perangkat Anda, dimuat dengan cepat, dan kunjungan berikutnya dimuat secara instan. Model ini merespons input dengan cepat. Fitur ini berfungsi dengan baik pada koneksi yang tidak stabil atau saat offline. PWA menggunakan API modern untuk memberikan pengalaman seperti aplikasi yang menarik dengan UI layar penuh opsional, update latar belakang, dan akses offline ke data.
Untuk meningkatkan aplikasi web menjadi Progressive Web App, Anda harus menambahkan dua artefak:
- Manifes aplikasi web: file konfigurasi JSON yang menentukan URL titik entri aplikasi, ikon yang digunakan untuk merepresentasikan PWA, dan konfigurasi lainnya yang menjelaskan tampilan dan perilaku aplikasi.
- Pekerja layanan: skrip yang menyediakan layanan latar belakang yang memperkaya PWA dengan menentukan resource yang digunakan PWA dan strategi untuk mengaksesnya.
Apa yang dimaksud dengan pekerja layanan?
Pada dasarnya, service worker hanyalah skrip yang dijalankan browser secara independen saat Anda berinteraksi dengan aplikasi web. Pekerja layanan aktif menyediakan layanan seperti penyimpanan dalam cache cerdas menggunakan Cache API, menjaga data tetap terbaru menggunakan Background Sync API, dan berintegrasi dengan notifikasi push. Service worker dengan strategi penyimpanan dalam cache yang tepat memberikan pengalaman pengguna yang stabil dan andal untuk berbagai skenario, menampilkan resource yang telah di-cache secara instan, menyimpan data dalam cache, dan memperbarui resource saat terhubung ke web.
Pekerja layanan mungkin sulit ditulis dari awal. {i>Workbox<i} dibuat untuk memudahkannya. Workbox adalah serangkaian library untuk membantu Anda menulis dan mengelola service worker serta melakukan caching dengan Cache Storage API. Pekerja layanan dan Cache Storage API, jika digunakan bersama, mengontrol cara aset (HTML, CSS, JS, gambar, dll.) diminta dari jaringan atau cache, bahkan memungkinkan Anda menampilkan konten yang di-cache saat offline. Dengan Workbox, Anda dapat menyiapkan dan mengelola keduanya dengan cepat, dan banyak lagi, dengan kode yang siap produksi.
Mengupgrade situs AEM ke PWA
Adobe Experience Manager (AEM) adalah solusi pengelolaan konten komprehensif untuk membuat situs, aplikasi seluler, formulir, dan papan reklame digital. Hal ini memudahkan pengelolaan konten dan aset pemasaran Anda.
Meskipun AEM menyediakan library yang kaya untuk mem-build aplikasi web, hingga saat ini sulit untuk mem-build PWA dengan menambahkan pekerja layanan dan manifes.
Adobe Experience Manager Sites adalah alat pembuat UI yang merupakan bagian dari Adobe Experience Manager. Saat digunakan dengan Adobe Experience Manager sebagai layanan cloud, AEM Sites memudahkan konversi situs AEM atau aplikasi web satu halaman yang sudah ada menjadi Progressive Web App yang diaktifkan secara offline dan dapat diinstal hanya dengan konfigurasi dan tanpa coding. Library ini menggunakan Workbox untuk memberikan praktik terbaik bagi Progressive Web App dan memisahkan kompleksitas penulisan manifes boilerplate dan service worker.
AEM mendukung pelokalan konten, yang berarti Anda dapat memiliki branding yang berbeda dan bahkan konten offline yang berbeda untuk lokalitas yang berbeda. Untuk melakukannya, build konfigurasi PWA yang berbeda untuk setiap master bahasa.
Memulai konfigurasi PWA di AEM
Login ke Adobe Experience Manager as a Cloud Service dan pilih halaman atau master bahasa Adobe Experience Manager mana pun, lalu klik properti. Anda akan melihat tab bernama Progressive Web App. (Catatan: jika Anda tidak melihat tab ini, hubungi Adobe untuk mengaktifkan fitur ini.) Anda dapat mengonfigurasi penginstalan serta tampilan dan nuansa Progressive Web Apps hanya dengan beberapa klik.
Jika telah menyelesaikan tutorial Situs AEM, Anda mungkin pernah melihat situs WKND sebelumnya. Artikel ini menggunakan demo WKND sebagai titik awal. Setelah selesai, Anda akan mengupdate WKND dari aplikasi web menjadi PWA menggunakan WorkBox.
Mengonfigurasi manifes
Manifes aplikasi web adalah file JSON yang berisi properti yang menjelaskan tampilan dan perilaku PWA. Adobe Experience Manager Sites menyediakan antarmuka pengguna yang mudah digunakan untuk mengonfigurasi properti.
URL awal adalah titik entri PWA Anda. Saat pengguna mengetuk ikon PWA di ponsel, mereka akan mengakses URL startup. Mode tampilan mengonfigurasi apakah aplikasi adalah pengalaman dengan jendela atau layar penuh. Anda juga dapat menentukan orientasi layar aplikasi. Warna tema adalah warna jendela dan toolbar, sedangkan warna latar belakang adalah warna layar pembuka saat aplikasi diluncurkan. Ikon adalah gambar yang ditampilkan di layar utama perangkat atau panel samping aplikasi saat aplikasi diinstal di perangkat. Konfigurasi yang ditampilkan dalam gambar menghasilkan JSON manifes yang ditampilkan di bawah.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
URL awal dapat berbeda dari halaman landing default untuk domain Anda. Dengan mengubah parameter start_url, Anda dapat mengarahkan pengguna langsung ke pengalaman aplikasi, bukan halaman default yang akan ditampilkan kepada pengguna baru atau yang tidak diautentikasi. Hal ini memberikan pengalaman yang lebih lancar dan lebih mirip aplikasi bagi pengguna PWA.
AEM memahami bahwa lokalitas yang berbeda dapat memiliki tampilan dan nuansa yang berbeda. Anda dapat mengonfigurasi properti, warna, dan ikon yang berbeda untuk lokalitas atau bahasa yang berbeda, lalu menyinkronkan konfigurasi dengan halaman tertaut.
Setelah PWA diakses di browser, Anda dapat mengklik kanan dan memeriksa untuk memunculkan DevTools dan melihat manifes di bawah panel Applications.
Mengonfigurasi pekerja layanan
Anda dapat mengonfigurasi konten yang akan di-cache dan strategi caching yang akan digunakan.
Jika pernah menggunakan pekerja layanan, Anda mungkin sudah terbiasa dengan strategi caching. Strategi penyimpanan dalam cache menentukan resource mana yang akan di-cache dan apakah akan mencari resource tersebut di cache terlebih dahulu, jaringan terlebih dahulu, atau di cache dengan penggantian jaringan. Kemudian, Anda dapat memilih resource untuk dipra-cache saat pekerja layanan diinstal. Pekerja layanan aplikasi AEM menerapkan strategi cache hangat yang berarti pengalaman pengguna tidak akan rusak meskipun Anda menentukan jalur yang hilang atau rusak.
Di AEM, istilah "clientlibs" mengacu pada Library sisi klien: kombinasi JavaScript, CSS, dan resource statis terkait yang telah ditambahkan ke project Anda yang ditayangkan ke dan digunakan oleh browser web klien. Anda dapat dengan mudah menetapkan library sisi klien untuk digunakan secara offline dengan menentukan library tersebut di antarmuka pengguna.
Anda juga dapat menyertakan resource pihak ketiga seperti font. Konfigurasi cache offline ini memberikan informasi konfigurasi ke pekerja layanan yang dihasilkan untuk aplikasi Anda yang menggunakan kotak kerja secara internal. Itulah yang diperlukan untuk membuat aplikasi Anda dapat diinstal. Setelah diinstal, ikon aplikasi akan muncul di layar utama perangkat seluler Anda seperti aplikasi platform. Mengklik ikon tersebut akan mengakses situs minggu ini.
Perhatikan bahwa Anda dapat mengubah konten atau setelan ini kapan saja. Saat Anda memublikasikan perubahan, pekerja layanan akan diperbarui di klien oleh browser dan pesan akan ditampilkan kepada pengguna bahwa PWA versi yang lebih baru tersedia. Pengguna dapat mengklik pesan untuk memuat ulang aplikasi dan mendapatkan update terbaru. Anda dapat membuka alat developer browser dan panel aplikasi untuk melihat detail pekerja layanan.
Anda dapat memperluas penyimpanan cache untuk melihat konten yang telah di-cache secara lokal:
Hasil
Saatnya melihat hasil kerja keras Anda. Hanya dengan konfigurasi dan tanpa coding, Anda baru saja meningkatkan situs AEM Anda menjadi Progressive Web App.
Alat developer Chrome menyediakan audit lighthouse yang memungkinkan Anda memeriksa kepatuhan aplikasi web dan konfigurasi Anda terhadap standar Progressive Web App.
Kesimpulan
Progressive Web App memberikan pengalaman seperti aplikasi untuk situs Anda, yang menggunakan web lintas platform dan bersifat terbuka dengan biaya pengembangan dan pemeliharaan yang lebih rendah sekaligus memberikan kontrol atas distribusi. Tindakan ini dapat meningkatkan engagement, retensi, dan yang terpenting, mendorong rasio konversi yang lebih tinggi. AEM bersama dengan Workbox memudahkan Anda meningkatkan situs yang ada menjadi PWA hanya dengan konfigurasi dan tanpa coding.