Previous post on this tutorial
Setting up an environment to run Progressive Web Applications
Here I will showcase how to create a very minimal sample PWA and deploying it.
Step 1 : Create a folder 'my-aem-pwa-sample'
Step 2 : Go inside the folder
Step 3 : Create a file called 'index.html' and paste below content.
Step 4 : Create a file called 'manifest.json' and paste below content.
Step 6 : Create a file called 'retrieve_content_fragment.js' and paste below content.
You need to update the blue color line of code based on your content fragment created
Step 7 : Create a file calles 'serviceworker.js' and paste below content.
Now the folder looks as below.
Step 8 : Now open a command prompt inside folder 'my-aem-pwa-sample' and run below command
'serve .'
You can see below response.
Step 9 : Open the browser and hit the url 'http://localhost:5000' (This is the url of application deployed and stared as seen in above screenshot).
Now the PWA sample application is running on port 5000.
Next post
Create & Author Content Fragments in AEM
demo
Setting up an environment to run Progressive Web Applications
Here I will showcase how to create a very minimal sample PWA and deploying it.
Step 1 : Create a folder 'my-aem-pwa-sample'
Step 2 : Go inside the folder
Step 3 : Create a file called 'index.html' and paste below content.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#008000"/>
<title>PWA demo with AEM</title>
<link rel="stylesheet" type="text/css" href="my-aem-pwa-style.css" media="all">
<link rel="manifest" href="manifest.json">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="retrieve_content_fragment.js"> </script>
</head>
<div class="content">
<h1>-Progressive Web App demo with AEM-</h1><br>
<button class="button">Retrieve Content Fragment Data</button>
<h3><div id="div1" align="center" style="background-color: #FF9800"></div></h3>
</div>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceworker.js')
.then(function() {
console.log('Service Worker Registered');
});
}
</script>
</body>
</html>
Step 4 : Create a file called 'manifest.json' and paste below content.
{Step 5 : Create a file called 'my-aem-pwa-style.css' and paste below content.
"name": "PWA demo with AEM",
"short_name": "PWA",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#FF9800",
"theme_color": "#FF9800"
}
body {
#background-color: #ffcc00;
color: black;
}
.content {
# max-width: 1000px;
margin: auto;
font-family: "Trebuchet MS", Helvetica, sans-serif;
#background-color: #ffcc00;
}
.button {
background-color: #008000;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 0px 0px;
cursor: pointer;
}
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
h1.vertical-container {
font-size: 275%;
}
Step 6 : Create a file called 'retrieve_content_fragment.js' and paste below content.
You need to update the blue color line of code based on your content fragment created
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "http://localhost:4503/content/we-retail/us/en/men/jcr:content/root/responsivegrid/contentfragment_1847490508.json", dataType: "json", success: function(result){
$("#div1").html("Sorry! Unable to retrieve data; Please try again!");
var obj = JSON.stringify(result);
var strresultParsed= JSON.parse(obj);
$("#div1").html(strresultParsed.text);
}});
});
});
Step 7 : Create a file calles 'serviceworker.js' and paste below content.
var cacheName = 'my-aem-pwa-demo';
var filesToCache = [
'/',
'/index.html',
'/my-aem-pwa-style.css'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, {ignoreSearch:true}).then(response => {
return response || fetch(event.request);
})
);
});
Now the folder looks as below.
 |
| PWA Folder structure - click on this to see it big |
Step 8 : Now open a command prompt inside folder 'my-aem-pwa-sample' and run below command
'serve .'
You can see below response.
 |
| serve |
Step 9 : Open the browser and hit the url 'http://localhost:5000' (This is the url of application deployed and stared as seen in above screenshot).
Now the PWA sample application is running on port 5000.
 |
| PWA UI |
Next post
Create & Author Content Fragments in AEM
demo
