Creating PWA in Awesome Apps

To add the support for the PWA for awesome app just do following steps:

1. Create the awesome js app if not exitsts
2. Add the sw-js module in the awesome-js app and paste the following code in it.
   1. Default service worker file

      JavaScript

      const cacheName = 'manage-v3'; const staticAssets = [ '[aw2.get url.home /]site-skin/css/awesome-css', '[env.get settings.cdn /]spa/spa.v2.min.js' ]; self.addEventListener('install', async function () { await caches.open(cacheName).then(function (cache) { return Promise.all( staticAssets.map(function (url) { return cache.add(url).catch(function (reason) { console.warn("error occured to add cache for " + url + " reason is " + reason); }); }) ); }); }); self.addEventListener('activate', event => { event.waitUntil(self.clients.claim()); }); self.addEventListener('fetch', event => { const request = event.request; event.respondWith(checkForCache(request)); }); async function checkForCache(request) { const dynamicCache = await caches.open(cacheName); const cachedResponse = await dynamicCache.match(request, { ignoreSearch: true, ignoreMethod: true }); return cachedResponse || addInCache(request); } async function addInCache(request){ const networkResponse = await fetch(request); if(new URL(request.url).searchParams.get('cacheable')){ const dynamicCache = await caches.open(cacheName); dynamicCache.put(new Request(request.url), networkResponse.clone()); } return networkResponse; }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

      const cacheName = 'manage-v3';   const staticAssets = [   '[aw2.get url.home /]site-skin/css/awesome-css',   '[env.get settings.cdn /]spa/spa.v2.min.js' ];   self.addEventListener('install', async function () {   await caches.open(cacheName).then(function (cache) {    return Promise.all(      staticAssets.map(function (url) {        return cache.add(url).catch(function (reason) {          console.warn("error occured to add cache for " + url + " reason is " + reason);         });       })     );   }); });   self.addEventListener('activate', event => {   event.waitUntil(self.clients.claim()); });   self.addEventListener('fetch', event => {   const request = event.request;   event.respondWith(checkForCache(request)); });   async function checkForCache(request) { const dynamicCache = await caches.open(cacheName);   const cachedResponse = await dynamicCache.match(request, {     ignoreSearch: true,     ignoreMethod: true   });   return cachedResponse || addInCache(request); }   async function addInCache(request){   const networkResponse = await fetch(request);   if(new URL(request.url).searchParams.get('cacheable')){    const dynamicCache = await caches.open(cacheName);     dynamicCache.put(new Request(request.url), networkResponse.clone());   }   return networkResponse; }

      
       
   2. In this code cacheName is the version of the cache.
3. Add the manifest file in the app module named as manifest-json and paste the following code in it
   1. Default Manifest File

      JavaScript

      { "name": "Manage App", "short_name": "Manage", "theme_color": "#ff1cde", "background_color": "#42425c", "display": "standalone", "Scope": "/", "start_url": "[app.path]", "icons": [ { "src": "[aw2.get url.site /]images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "[aw2.get url.site /]images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "[aw2.get url.site /]images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "[aw2.get url.site /]images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "[aw2.get url.site /]images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "[aw2.get url.site /]images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "[aw2.get url.site /]images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "[aw2.get url.site /]images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

      {   "name": "Manage App",   "short_name": "Manage",   "theme_color": "#ff1cde",   "background_color": "#42425c",   "display": "standalone",   "Scope": "/",   "start_url": "[app.path]",   "icons": [     {       "src": "[aw2.get url.site /]images/icons/icon-72x72.png",       "sizes": "72x72",       "type": "image/png"     },     {       "src": "[aw2.get url.site /]images/icons/icon-96x96.png",       "sizes": "96x96",       "type": "image/png"     },     {       "src": "[aw2.get url.site /]images/icons/icon-128x128.png",       "sizes": "128x128",       "type": "image/png"     },     {       "src": "[aw2.get url.site /]images/icons/icon-144x144.png",       "sizes": "144x144",       "type": "image/png"     },     {       "src": "[aw2.get url.site /]images/icons/icon-152x152.png",       "sizes": "152x152",       "type": "image/png"     },     {       "src": "[aw2.get url.site /]images/icons/icon-192x192.png",       "sizes": "192x192",       "type": "image/png"     },     {       "src": "[aw2.get url.site /]images/icons/icon-384x384.png",       "sizes": "384x384",       "type": "image/png"     },     {       "src": "[aw2.get url.site /]images/icons/icon-512x512.png",       "sizes": "512x512",       "type": "image/png"     }   ],   "splash_pages": null }

      
       
4. In the ‘init‘ module for core set the ‘Service-Worker-Allowed: /’ header, using
   
   XHTML

   [php.header p1='Service-Worker-Allowed: /' /]

   1	[php.header p1='Service-Worker-Allowed: /' /]

   
   you can also do this change directly on the server either in nginx.conf or .htaccess file.
5. In the app scripts add the manifest file by using link tag like this
   1. To add manifest.json file

      XHTML

      <link rel="manifest" href="[aw2.get app.path /]/js/manifest-json" crossorigin="use-credentials">

      1	<link rel="manifest" href="[aw2.get app.path /]/js/manifest-json" crossorigin="use-credentials">

      
       
6. In the app scripts module register the service worker by using this code
   1. To register the service worker

      JavaScript

      if(navigator.serviceWorker){ navigator.serviceWorker.register('[aw2.get url.site /]awesome-js/js/sw-js', {scope: '/'}).then(function(reg){ }).catch(function(err) { console.log("Service worker didn't registered. This happened: ", err) throw err; }); }

      1 2 3 4 5 6 7

      if(navigator.serviceWorker){     navigator.serviceWorker.register('[aw2.get url.site /]awesome-js/js/sw-js', {scope: '/'}).then(function(reg){     }).catch(function(err) {     console.log("Service worker didn't registered. This happened: ", err)     throw err;     }); }

      
       

prerequisites

1. Awesome Enterprise Version 1.3.2 and above
2. icons in manisfest.json must include a 192px and a 512px sized icons, check other requirements to get Add to home screen prompt