|
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. |
|
