Progressive Web Apps (PWAs )

Mobile Apps
Mobile Apps
Chrome version: 87.0.4280.101

How to add PWA to the website?

{
"name": "Joyo",
"short_name": "Joyo",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"description": "A HRM project app.",
"icons": [{
"src": "icons/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icons/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icons/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icons/favicon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icons/favicon-250x250.png",
"sizes": "250x250",
"type": "image/png",
"purpose": "any maskable"
}]
}
<link rel="manifest" href="manifest.json">
<script scr="/app.js"></script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('service worker registered'))
.catch(err => console.log('service worker not registered', err));
}
self.addEventListener('install', (event) => {
console.log('Service Worker has been Installed');
});
self.addEventListener('activate', (event) => {
console.log('Service Worker has been activated');
});
self.addEventListener('fetch', (event) => {
console.log('Service Worker Fetched resource');
});

Summary

Love to write code and discuss technology | If you explain others is simple words it means you know it very well

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store