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 hal yang dapat dilakukan web modern. Aset tersebut dapat diinstal di perangkat Anda, dimuat dengan cepat, dengan kunjungan berikutnya yang dimuat secara instan. Mereka menanggapi {i>input<i} dengan cepat. Keduanya bekerja dengan baik pada koneksi yang tidak dapat diandalkan atau saat offline. PWA menggunakan API modern untuk memberikan pengalaman seperti aplikasi yang menarik dengan UI layar penuh opsional, update di latar belakang, dan akses offline ke data.
Untuk meningkatkan kualitas 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 mewakili PWA dan konfigurasi lain 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 intinya, pekerja layanan hanyalah skrip yang dijalankan browser secara independen saat Anda berinteraksi dengan aplikasi web. Pekerja layanan yang aktif menyediakan layanan seperti smart caching menggunakan Cache API, terus memperbarui data menggunakan Background Sync API, dan berintegrasi dengan notifikasi push. Pekerja layanan dengan strategi caching yang tepat akan memberikan pengalaman pengguna yang stabil dan andal untuk berbagai skenario, menampilkan resource yang telah di-pra-cache secara instan, menyimpan data dalam cache, dan memperbarui resource saat terhubung ke web.
Pekerja layanan mungkin sulit untuk ditulis dari awal. {i>Workbox<i} dibuat untuk memudahkan Anda. Workbox adalah kumpulan library untuk membantu Anda menulis dan mengelola pekerja layanan dan menyimpan cache 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 dengan cepat menyiapkan dan mengelola keduanya, dan banyak lagi, menggunakan kode siap produksi.
Mengupgrade situs AEM ke PWA
Adobe Experience Manager (AEM) adalah solusi pengelolaan konten komprehensif untuk membuat situs, aplikasi seluler, formulir, dan reklame digital. Memudahkan Anda mengelola konten dan aset pemasaran.
Meskipun AEM menyediakan library lengkap untuk membangun aplikasi web, hingga saat ini masih sulit membangun 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. Layanan ini menggunakan Workbox untuk menayangkan praktik terbaik untuk Progressive Web App dan menyederhanakan kompleksitas penulisan manifes boilerplate dan pekerja layanan.
AEM mendukung pelokalan konten yang berarti Anda dapat memiliki branding dan bahkan konten offline yang berbeda untuk lokal yang berbeda. Untuk melakukannya, buat 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 App hanya dengan beberapa klik.
Jika Anda telah menyelesaikan tutorial Situs AEM, Anda mungkin pernah melihat situs WKND sebelumnya. Artikel ini menggunakan demo WKND sebagai titik awal. Setelah selesai, Anda akan memperbarui WKND dari aplikasi web ke PWA menggunakan WorkBox.
Mengonfigurasi manifes
Manifes aplikasi web adalah file JSON yang berisi properti yang mendeskripsikan tampilan dan perilaku PWA. Adobe Experience Manager Sites menyediakan antarmuka pengguna yang mudah digunakan untuk mengonfigurasi properti.
URL mulai adalah titik entri PWA Anda. Saat mengetuk ikon PWA di ponselnya, pengguna akan mengakses URL startup. Mode tampilan mengonfigurasi apakah aplikasi merupakan pengalaman 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 atau panel samping aplikasi perangkat saat aplikasi diinstal pada perangkat. Konfigurasi yang ditunjukkan pada gambar menghasilkan JSON manifes yang ditunjukkan di bawah ini.
{
"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 mengirim 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 lokal yang berbeda dapat memiliki tampilan dan nuansa yang berbeda. Anda dapat mengonfigurasi berbagai properti, warna, dan ikon untuk berbagai lokal atau bahasa, 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 penyimpanan dalam cache 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. Selanjutnya Anda bisa memilih resource yang akan di-pra-cache ketika service worker diinstal. Pekerja layanan Aplikasi AEM menerapkan strategi warm cache yang berarti pengalaman pengguna tidak akan terganggu, meskipun Anda menentukan jalur yang hilang atau rusak.
Dalam AEM, istilah "clientlibs" mengacu pada Library sisi klien: kombinasi dari JavaScript, CSS, dan resource statis terkait yang telah ditambahkan ke project Anda yang disajikan dan digunakan oleh browser web klien. Anda dapat dengan mudah menyetel 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. Hampir selesai 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 wknd.
Perhatikan bahwa Anda dapat mengubah konten atau setelan ini kapan saja. Saat Anda memublikasikan perubahan, pekerja layanan akan diperbarui di klien oleh browser dan pengguna akan menerima pesan bahwa versi PWA yang lebih baru telah tersedia. Pengguna dapat mengklik pesan untuk memuat ulang aplikasi dan mendapatkan update terbaru. Anda dapat membuka panel aplikasi dan alat developer browser 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 memberikan audit mercusuar yang memungkinkan Anda memeriksa seberapa patuh aplikasi web dan konfigurasi Anda dengan standar Progressive Web App.
Kesimpulan
Progressive Web App memberikan pengalaman mirip 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 kualitas situs yang ada ke PWA hanya dengan konfigurasi dan tanpa coding.