Showing posts with label PWA. Show all posts
Showing posts with label PWA. Show all posts

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

Setting up an environment to run Progressive Web Applications


Previous post on this topic

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



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.

Follow below steps to install serve. More details here [https://www.npmjs.com/package/serve]

Execute below command to install serve.

cmd> npm install -g serve

Once serve package is installed, please ensure installation was successful by running below command.

cmd> serve -v

Once server module is installed, you can go inside any folder and just run below command to start the server and deploy the single page.

cmd> serve .


Next post
How to create & Deploy a Progressive Web Application



Monday, 26 November 2018

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

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)

Read More:

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

AEM Experience Fragments vs Content Fragments

Single Page Applications and AEM


Watch below video to understand more on SPA Vs PWA