M
mdfaisalpapa author
Progressive Web Application(PWA) improves the loading performance of the web app. In PHPRunner this can be implemented as follow: The following code impements Stale while revalidate stategy of PWA. The App will load the cache first and loads the content to the user but revalidates with a background sync for subsequent loads. So there is a possibility of displaying a stale content( for a minute or so) if your webapp data has been updated. Step1: create a new file 'manifest.json' using a text editor and add the following code: PWA app requires the icons of different size. Store the icons in the 'assets/icons' folder { "name": "MyPwaApp", "short_name": "MyPwaApp", "lang": "en", "start_url": "./", "background_color": "none", "theme_color": "none", "display": "fullscreen", "icons": [ { "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "maskable any" }, { "src": "assets/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "maskable any" }, { "src": "assets/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png", "purpose": "maskable any" }, { "src": "assets/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "maskable any" }, { "src": "assets/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png", "purpose": "maskable any" }, { "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable any" }, { "src": "assets/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "maskable any" }, { "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable any" } ] } Step 2: Create Service Worker for the PWA open text editor and enter the following code and save as 'pwabuilder-sw.js' const CACHE = "pwabuilder-offline"; const QUEUE_NAME = "bgSyncQueue";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
self.addEventListener("message", (event) => { if (event.data && event.data.type === "SKIP_WAITING") { self.skipWaiting(); } });
const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin(QUEUE_NAME, { maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes) });
workbox.routing.registerRoute( new RegExp('/*'), new workbox.strategies.StaleWhileRevalidate({ cacheName: CACHE, plugins: [ bgSyncPlugin ] }) );
Step 3: In PHPRunner goto the Editor tab click on the header above the tables listed in the table list and enter the following code <link rel="manifest" href="manifest.json"> click on the footer and enter the following code <script type="module"> import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate'; const el = document.createElement('pwa-update'); document.body.appendChild(el); </script> Step 4: In the bottom of the table list click on custom files and add the manifest.json, pwabuilder-sw.js as custom files to the project and assets/icons as custom folder to the project. Load your app and see the magic of PWA.
|
|