- Create your website code.
- Create manifest.json in the home directory with below code.
{
"name": "My One Page PWA",
"short_name": "PWA",
"description": "A simple one-page PWA",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
3. Link manifest.josn in your project index file.
<link rel="manifest" href="/manifest.json">
4. Create a service-worker.js file.
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-cache').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/stylesheet.css',
'/app.js',
'/icons/img-192x192.png',
'/icons/img-512x512.png'
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
5. Add the Register the service worker code to your main JavaScript file ( i.e. app.js)
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then((registration) => {
console.log('Service worker registered:', registration);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
});
}
6. Host your website in HTTPS
7. Test your website via Chrome’s Lighthouse or the Application panel in Chrome DevTools.
Cheers!
