AEM With Progressive Web Apps - Demonstrating the ability of Content Fragments in AEM - Display AEM Content to Third Party Applications

AEM - Getting more headless
We all know that AEM is the leader in CMS-world; day by day new features are getting added as part of new version upgrades. Recently Adobe released AEM 6.5 version with lot more features.

From the previous few AEM versions support head-less capability, which means AEM Content can be delivered to multi-channels or third party applications.

AEM Provides headless capability through Content Fragments and Experience Fragments.


In this tutorial, we will see,

• How to Create & Deploy a Progressive Web Application - PWA(Including 'what is PWA', 'how do we run a PWA')?
• Create Content Fragments in AEM.
• Integrate PWA & AEM and retrieve the AEM content from PWA.

Let us first understand what is PWA?
Progressive Web Application - PWA:
This is an application that behaves like a native application and developed using modern web technologies. This application supports offline features(using service worker & Web App Manifest) when no internet connection and are extremely fast & engaging.

• PWA is an idea proposed by Google developers.
• A PWA is mainly dependent on Service Worker and Manifest files.

What is a Service Worker?
They are scripts that stand between your web application and your network

What is a Web App Manifest?
Web App Manifest is a JSON file with meta-information about the site.
PWA can be developed using technologies: Angular, React, Vue

PWA Features:
1. Responsive
2. Push Notification.
3. Offline Support.
4. Fast and efficient.
5. Not served through the app store.
6. relatively cheaper than developing native apps
7. Does not require installation