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:
- Create the awesome js app if not exitsts
- Add the sw-js module in the awesome-js app and paste the following code in it.
-
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; }
- In this code cacheName is the version of the cache.
-
- Add the manifest file in the app module named as manifest-json and paste the following code in it
-
{ "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 }
-
- 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.
- In the app scripts add the manifest file by using link tag like this
-
<link rel="manifest" href="[aw2.get app.path /]/js/manifest-json" crossorigin="use-credentials">
-
- In the app scripts module register the service worker by using this code
-
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
- Awesome Enterprise Version 1.3.2 and above
icons
in manisfest.json must include a 192px and a 512px sized icons, check other requirements to get Add to home screen prompt