1) Open index.html file
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker
.register("./serviceWorker.js")
.then((res) => {
console.warn("Worker Registered");
})
.catch((err) => {
console.warn("Error in sw", err);
});
});
} else {
console.error("Service workers are not supported in this browser.");
}
</script>2) Create a new file in public folder named as serviceWorker.js
Add Below Code in serviceWorker.js file
//STORAGE OF BROWSER
const CACHE_NAME = "version-1";
const urlsToCache = ["index.html", "offline.html"];
const self = this;
//installation
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
console.log("Opened cache");
return cache.addAll(urlsToCache);
})
);
});
// listen for request
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((res) => {
return fetch(event.request).catch(() => caches.match("offline.html"));
})
);
});
// actitivate the service worker
self.addEventListener("activate", (event) => {
const cacheWhitelist = [];
cacheWhitelist.push(CACHE_NAME);
event.waitUntil(
caches.keys().then((cacheNames) =>
Promise.all(
cacheNames.map((cacheName) => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
)
)
);
});
3) Open manifest.json file
Add below code in manifest.json file
{
"name": "Your App Name",
"short_name": "Your App Name",
"theme_color": "#066759", //
"background_color": "#f7f7f7",
"display": "standalone",
"scope": "/",
"start_url": "/",
"description": "a short description for your app",
"icons": [
{
"src": "mask.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
},
{ "src": "logo192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "logo256.png", "sizes": "256x256", "type": "image/png" },
{ "src": "logo384.png", "sizes": "384x384", "type": "image/png" },
{ "src": "logo512.png", "sizes": "512x512", "type": "image/png" }
]
}
4) Now you have to create logo of different sizes
192×192 | 256×256 | 384×384 | 512×512
Go to website – https://imageresizer.com/
Copy all the logos and paste it into public folder as shown in the video
5) Now you have to create a Maskable icon
Go to website – https://progressier.com/maskable-icons-editor
Upload your logo and create a maskable icon then copy and paste it into public folder
6) Hurray! you have completed all the step for your Progressive Web App
You will see an install option at the right corner and in mobile view users can see a popup to install the progressive web app.
