Friday, 14 December 2018

How to create & Deploy a Progressive Web Application

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.

<!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.

{
    "name": "PWA demo with AEM",
    "short_name": "PWA",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#FF9800",
    "theme_color": "#FF9800"
}

 
Step 5 : Create a file called 'my-aem-pwa-style.css' and paste below content.

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

No comments:

Post a Comment