Documentation / Tutorials / Awesome Enterprise

Creating PWA in Awesome Apps

/ Awesome Enterprise / 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. 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. {
        "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
    [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. <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. 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
Categories
Most Popular

Leave a Reply

Your email address will not be published. Required fields are marked *