A modern web experience on Adobe Experience Manager with WorkBox | AEM Community Blog Seeding

[kautuk_sahni]

A modern web experience on Adobe Experience Manager with WorkBox by Kalyanaraman & Salvatore

Abstract

If you are a technical lead or digital marketing analyst interested in providing a modern Web experience to your Adobe Experience Manager (AEM) web application and have been looking for your options in doing so, then you have come to the right article. This will cover what Progressive Web Apps (PWA) are and what you need to create a PWA in AEM leveraging the WorkBox library through configuration, without coding.

Why PWA? #
Progressive Web Apps leverage what the modern web can do. They are installable on your device, load quickly, with subsequent visits loading instantly. They respond to input quickly. They work well on an unreliable connection or when offline. PWAs use modern APIs to provide an engaging app-like experience with an optional full screen UI, background updating, and offline access to data.

From web app to Progressive Web App.
To enhance a web app into a Progressive Web App requires adding two artifacts:

A web app manifest: a JSON configuration file that defines the app's entry point URL, the icon used to represent the PWA and other configuration that describe how the application looks and behaves.
A service worker: a script that provides background services that enrich your PWA by defining resources your PWA uses and the strategies to access them.
What is a service worker? #
At its core, a service worker is just a script that your browser runs independently as you interact with your web application. An active service worker provides services such as smart caching using the Cache API, keeping data up to date using the Background Sync API, and integrating with push notifications. A service worker with the right caching strategy provides stable and reliable user experiences for various scenarios, returning pre-cached resources instantly, storing data in cache, and updating resources when connected to the web.

A service worker lives on the client, but proxies the network.
Workbox Logo
Service workers can be hard to write from scratch. Workbox was created to make it easier. Workbox is a set of libraries to help you write and manage service workers and caching with the Cache Storage API. Service workers and the Cache Storage API, when used together, control how assets (HTML, CSS, JS, images, etc.) are requested from the network or cache, even allowing you to return cached content when offline. With Workbox, you can quickly set up and manage both, and more, with production-ready code.

Read Full Blog

A modern web experience on Adobe Experience Manager with WorkBox

Q&A

Please use this thread to ask the related questions.