Friday, 14 December 2018

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 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 post we will show a use case of , how to use content fragments with external applications

Click on image to see it big



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?

In my previous post I have given an overview of PWA

Progressive Web Application - PWA:
This is an application which 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 app store.

6. relatively cheaper than developing native apps

7. Does not require installation

Follow below sections to continue with this tutorial to learn integrating AEM With Progressive Web Apps

>Step 1: Set-up PWA running environment
>Step 2: How to create & Deploy a Progressive Web Application
>Step 3: Create & Author Content Fragments in AEM
>Step 4: Integrate PWA & AEM and retrieve the AEM content from PWA.


Demo Videos:


AEM Content Fragments Demo Part 1: PWA With AEM 



AEM Content Fragments Demo Part 2: PWA Running Environment setup

AEM Content Fragments Demo Part 3: Create & Deploy a Progressive Web Application

AEM Content Fragments Demo Part 4: Create & Author Content Fragments

AEM Content Fragments Demo Part 5 : Integrate AEM with PWA

1 comment:

  1. Any implementation to make content fragment variation for amp page

    ReplyDelete