By tommy index.html
This is the main page of your PWA.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My PWA</title>
<link rel="manifest" href="manifest.json">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log("Service Worker Registered"))
.catch(err => console.log("Service Worker Failed:", err));
}
</script>
</head>
<body>
<h1>Welcome to My PWA</h1>
<p>This is a simple Progressive Web App.</p>
</body>
</html>manifest.json
This defines PWA properties like name, icons, and theme color.
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0000ff",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
service-worker.js
This enables offline caching.
const CACHE_NAME = 'pwa-cache-v1';
const FILES_TO_CACHE = [
'index.html',
'manifest.json'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(FILES_TO_CACHE);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
Upload to WordPress
Create a new directory inside /wp-content/uploads/ (e.g., /wp-content/uploads/pwa/).
Upload all files (index.html, manifest.json, service-worker.js, and icons) to this directory.
Access your PWA at:
https://yourwebsite.com/wp-content/uploads/pwa/index.html
Result
https://tommyoon.eu.org/wp-content/uploads/pwa/index.html
(Optional) Add PWA to WordPress Home
<link rel="manifest" href="/wp-content/uploads/pwa/manifest.json">