Jika Anda adalah pemimpin teknis atau analis digital marketing yang tertarik memberikan pengalaman Web modern untuk aplikasi web Adobe Experience Manager (AEM) dan telah mencari opsi untuk melakukannya, maka Anda telah sampai di artikel yang tepat. Panduan ini akan membahas apa yang dimaksud dengan Progressive Web App (PWA) dan apa yang Anda butuhkan 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 dapat dimuat dengan cepat. Mereka merespons input dengan cepat. Chromebook 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 perlu 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 mendeskripsikan tampilan dan perilaku aplikasi.
- Pekerja layanan: skrip yang menyediakan layanan latar belakang yang memperkaya PWA Anda dengan menentukan resource yang digunakan PWA dan strategi untuk mengaksesnya.
Apa yang dimaksud dengan pekerja layanan?
Pada intinya, pekerja layanan hanyalah skrip yang dijalankan secara independen oleh browser saat Anda berinteraksi dengan aplikasi web. Pekerja layanan yang aktif menyediakan layanan seperti cache cerdas menggunakan Cache API, memperbarui data menggunakan Background Sync API, dan berintegrasi dengan notifikasi push. Pekerja layanan dengan strategi caching yang tepat memberikan pengalaman pengguna yang stabil dan andal untuk berbagai skenario, mengembalikan resource pra-cache secara instan, menyimpan data dalam cache, dan memperbarui resource saat terhubung ke web.
Service worker mungkin sulit untuk menulis dari awal. Workbox dibuat untuk membuatnya lebih mudah. Workbox adalah sekumpulan library untuk membantu Anda menulis dan mengelola service worker serta penyimpanan dalam cache dengan Cache Storage API. Pekerja layanan dan Cache Storage API, jika digunakan bersama-sama, mengontrol cara aset (HTML, CSS, JS, gambar, dll.) diminta dari jaringan atau cache, bahkan memungkinkan Anda untuk menampilkan konten yang disimpan dalam cache saat offline. Dengan Workbox, Anda dapat dengan cepat menyiapkan dan mengelola keduanya, serta banyak hal lainnya 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 pengelolaan konten dan aset pemasaran Anda.
Meskipun AEM menyediakan library lengkap untuk membangun aplikasi web, hingga saat ini, sulit untuk membangun PWA dengan menambahkan pekerja layanan dan manifes.
Situs Adobe Experience Manager 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 ada menjadi Progressive Web App offline yang dapat diinstal, hanya dengan konfigurasi dan tanpa coding. Layanan ini menggunakan Workbox untuk menghadirkan praktik terbaik untuk Progressive Web App dan mengabstraksi kompleksitas penulisan manifes boilerplate dan pekerja layanan.
AEM mendukung pelokalan konten, sehingga Anda dapat memiliki branding dan konten offline yang berbeda pula untuk lokalitas yang berbeda. Untuk melakukan ini, build konfigurasi PWA yang berbeda untuk setiap master bahasa.
Memulai konfigurasi PWA di AEM
Login ke Adobe Experience Manager sebagai Layanan Cloud, lalu pilih halaman Situs Adobe Experience Manager atau properti klik dan master bahasa. 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, tampilan, dan nuansa Progressive Web App 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 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. Situs Adobe Experience Manager menyediakan antarmuka pengguna yang mudah digunakan untuk mengonfigurasi properti.
URL mulai adalah titik entri PWA Anda. Saat pengguna mengetuk ikon PWA di ponsel, mereka akan mengakses URL startup. Mode tampilan mengonfigurasi apakah aplikasi memiliki 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 perangkat atau panel samping aplikasi saat aplikasi diinstal pada perangkat. Konfigurasi yang ditunjukkan dalam gambar menghasilkan JSON manifes yang ditunjukkan 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 bisa berbeda dari halaman landing default untuk domain Anda. Dengan mengubah parameter start_url, Anda dapat mengarahkan pengguna langsung ke pengalaman aplikasi, bukan halaman default tempat pengguna yang tidak diautentikasi atau baru akan ditampilkan. Hal ini memberi pengguna PWA dengan pengalaman yang lebih lancar dan mirip dengan aplikasi.
AEM memahami bahwa lokalitas yang berbeda dapat memiliki tampilan dan nuansa yang berbeda pula. 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 bisa 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 telah menggunakan pekerja layanan, Anda mungkin sudah terbiasa dengan strategi penyimpanan dalam cache. Strategi caching menentukan resource mana yang akan di-cache dan apakah akan mencari resource tersebut dalam cache terlebih dahulu, jaringan terlebih dahulu, atau di cache dengan penggantian jaringan. Kemudian Anda bisa memilih resource untuk melakukan pra-cache saat service worker diinstal. Pekerja layanan Aplikasi AEM menerapkan strategi cache warm, yang berarti pengalaman pengguna tidak akan terganggu meskipun Anda menentukan jalur yang tidak ada 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 dilayani dan digunakan oleh browser web klien. Anda bisa dengan mudah menetapkan library sisi klien untuk digunakan secara offline dengan menetapkan 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 dibuat untuk aplikasi Anda yang menggunakan kotak kerja secara internal. Hanya itu yang perlu dilakukan agar 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.
Perlu diperhatikan bahwa Anda dapat mengubah konten atau setelan ini kapan saja. Saat Anda memublikasikan perubahan, pekerja layanan akan diupdate 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 kualitas situs AEM Anda menjadi Progressive Web App.
Alat developer Chrome menyediakan audit mercusuar yang memungkinkan Anda memeriksa kepatuhan aplikasi web dan konfigurasi Anda dengan standar Progressive Web App.
Kesimpulan
Progressive Web App memberikan pengalaman mirip aplikasi untuk situs web Anda, yang menggunakan lintas platform dan sifat web yang terbuka dengan biaya pengembangan dan pemeliharaan yang lebih rendah sekaligus memberikan kontrol atas distribusi. Cara ini akan meningkatkan engagement, retensi, dan yang paling penting, mendorong rasio konversi yang lebih tinggi. AEM bersama dengan Workbox memudahkan penyempurnaan situs yang ada menjadi PWA hanya dengan konfigurasi dan tanpa coding.