index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#009578">
<title>PWA</title>
<link rel="stylesheet" href="src/master.css">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="images/logo_2.jpg">
</head>
<body>
<h3>Progressive Web App</h3>
<script src="src/index.js"></script>
<h4>Addition</h4>
<label for="num1">Enter 1st Number:</label><br>
<input type="text" id="num1" name="num1"><br>
<br>
<label for="num2">Enter 2nd Number:</label><br>
<input type="text" id="num2" name="num2"><br><br>
<button type="button" name="button" onclick="addition()">Add</button>
<div>
<h4>Result: <span id="res"> </span></h4>
</div>
<script>
function addition() {
var x = parseInt(document.getElementById("num1").value);
var y = parseInt(document.getElementById("num2").value);
var z = x + y;
document.getElementById("res").innerHTML = z;
}
</script>
</body>
</html>manifest.json
{
"name": "PWA demo",
"short_name": "PWA",
"start_url": ".",
"background_color": "#6dcdb1",
"theme_color": "#009578",
"display": "standalone",
"icons": [
{
"src": "images/logo_2.jpg",
"sizes": "512x512",
"type": "image/jpg"
},
{
"src": "images/logo_1.png",
"sizes": "512x512",
"type": "image/png"
}
]
}sw.js
self.addEventListener("install", e => {
// console.log("Install decode!");
e.waitUntil(
caches.open("static").then(cache => {
return cache.addAll(["./", "./src/master.css", "./images/logo_2.jpg"]);
})
);
});
self.addEventListener("fetch", e => {
// console.log(`Intercepting fetch request for: ${e.request.url}`);
e.respondWith(
caches.match(e.request).then(response => {
return response || fetch(e.request);
})
);
});src/index.js
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("sw.js").then(registration => {
console.log("SW Registered!");
console.log(registration);
}).catch(error => {
console.log("SW Registration failed!");
console.log(error);
})
}src/master.css
body {
background: #eeeeee;
}