We need Node Package Manager for running this tutorial. Follow below steps to install node and related tools.
Step 1: Install npm, Node
As part of deploying PWA, we will use Node js & Node Package Manager(npm). While installing Node.js, we will automatically get npm installed on computer.
Use this link for node js download. https://nodejs.org/en/
List of all Operating System installers : https://nodejs.org/en/download/package-manager
Once npm and node is installed, ensure below commands are returning respective versions to confirm the installation was successful.
cmd> node -v
cmd> npm -v
Step 2: Install Serve
Serve helps developing a static PWA project, When ever there is a single page application or just a static file needs to be deployed, we can use 'serve' module.
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.
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
[This tutorial works for versions AEM 6.2, AEM 6.3, AEM 6.4]
Generally AEM provides default content fragments template called 'Simple Fragment' [at location: /libs/settings/dam/cfm/templates]. But we may need to customize or create new templates based on our needs.
Here I will explain how we can create custom content fragment templates. Where to create custom content fragment templates?
There are multiple places we can create custom content fragment templates.
Config: When we work with folder specific templates, use this location.
Apps: Usually general purpose templates are created here.
Content Fragment Templates Path
Let us create a template under /apps for general purpose use.
Steps
Traverse to /apps/settings/dam inside CRXDE lite.
Create a node of type cq:Page and name it 'cfm'
Under the newly created cfm node, create another node of type cq:Page and name it 'templates'.
Under templates node create a node of type cq:PageContent and name it 'jcr:content'.
Under jcr:content create a new boolean property called 'mergeList' with value 'true', this step ensures our new template is available in addition to /lib content fragment templates for authoring.
Now do 'Save All'.
Our crx looks like this now
Custom Content Fragment creation
We have the structure ready now, we will add properties for the template now by referring the /lib/ 'Simple Fragment' template.
Traverse to /libs/settings/dam/cfm/templates and copy 'simple' node.
Paste it on our structure under /apps/settings/dam/cfm/templates.
Now do a 'Save All'.
We now have below structure in crx.
We have a template similar to 'Simple Fragment' now. Let us customize the template for our need.
We will create title, description as elements and 2 variations for desktop and mobile.
Let us start by renaming 'simple' node to 'custom'
Select “jcr:content” under 'custom', Update the value of 'jcr:description' to 'A custom project specific fragment'.
Update value of 'jcr:title' to 'Custom Fragment'
Now rename 'main' under elements to 'title', update its 'jcr:title' to 'Title' and name to 'title'
Next create a new element – description by copying the main and renaming. Update the 'jcr:title' to 'Description' and name to 'description'.
Now select node 'jcr:content' under node 'custom' and create a new node of type 'nt:unstructured' and name it 'variations'.
Create a new node for 'desktop' of type nt:unstructured under variations; add properties 'jcr:title' 'Desktop' and name 'desktop'.
Create a new node for 'mobile' of type nt:unstructured under variations; add properties 'jcr:title' 'Mobile' and name 'mobile'.
Now click on 'Save All'.
A new custom template is created now, which is ready for authoring.
Authoring Custom Content Fragment
Now go to AEM Assets >Files , click on 'Create' from top right hand corner and select 'Content Fragment'.
Here you can see the 'Custom Fragment'
Custom Fragment AEM 6.4
Select the 'Custom Fragment' and click 'next'.
Enter the values for title, description and click 'Create' then click on 'Open'.
Here you can see that a new Content Fragment is available with 'title', 'description'.
Similarly we can see that variations for 'desktop' and mobile also available for authoring.
In my upcoming blog, I will give a walkthrough on using Content Fragment with Progressive Web Applications.
An Experience Fragment is a set of content that grouped together forms an experience that should make sense on its own.
Experience Fragment : - is a part of an experience. - makes sense of its own. - has one or multiple components. - can be combined with other Experience Fragments. - can be reused, reordered and resized across pages. - can have different variations. - is based on a template with its own structure.
Click on image to see it big
Below given a video series which gives a walk through of AEM 6.4 Experience Fragments
Adobe Experience Manager has releaed AEM 6.5 as part of Adobe Summit 2019( April 2019). Hope you are aware of the news now. AEM 6.5 will be available for general public from April 8 2019.
Yes the fact is that AEM 6.5 was available for Solution partners for the product review till then.
How can I get AEM 6.5 for download?
You need to contact Adobe by registering their website.
When will I get it?
As of now Adobe has invited partners who are interested in testing out new features of AEM 6.5 So we need to wait for further communication.
What are all the new features of AEM 6.5?
Below given the further details about new features.
While working with AEM, we should know about all relevant technologies in the market. SPA and PWA are such ones. AEM already supports SPA OOTB. Let us understand about them more.
SPA:
SPA are the applications having single page and the content gets updated within the page dynamically based on user interaction. Commonly used technologies to develop SPAs are AngularJS, Ember.js, Knockout.js, Meteor.js, ExtJS, Vue.js and React .
Eg: Gmail
SPA Features:
1. Responsive
2. Fast and efficient.
3. Not served through app store.
4. No extra queries to the server to download pages
5. User friendly.
PWA:
This is an application behave 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.
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.
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
Conclusion
An SPA can be a PWA, but a PWA does not have to be a SPA.
Progressive Web Apps are the next level of browser based applications, offer a rich user experience that parallels what users know and expect from native apps and combine that with the benefits that browser based applications provide.
Progressive Web Apps are not Single Page Apps
- PWA's Register a Service Worker with a Fetch Event Handler and Minimal Offline Support
- PWA's Have a Valid Web Manifest File with a Minimal Set of Icons
- PWA's Served using HTTPS (Secure)
