HTML5 Course in Roman Hindi/Urdu - Lecture 11: HTML5 History API aur PWA Manifest - Fully Detailed
HTML5 History API (pushState, popState, replaceState) - Har Method Ki Full Details
HTML5 History API browser history ko manipulate karta hai bina full page reload ke, Single Page Applications (SPAs) ke liye zaroori. Yeh URL change karta hai, back/forward buttons ko handle karta hai. Focus on HTML5 methods: pushState (new entry add), replaceState (current replace), popState event (navigation detect).
Key Benefit: Smooth navigation, better UX jaise native apps.
pushState Method - New History Entry Add Karna
Purpose: URL change karna bina server request ke, state object store (data) ke saath.
Syntax: history.pushState(state, title, url). State: JS object, title: string (ignored mostly), url: new path.
Kab use karein: AJAX content load par URL update.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PushState Example - Lecture 11</title>
</head>
<body>
<h1>SPA Navigation Demo</h1>
<a href="#" onclick="loadPage('home')">Home</a> |
<a href="#" onclick="loadPage('about')">About</a> |
<a href="#" onclick="loadPage('contact')">Contact</a>
<div id="content">Home Content</div>
<script>
function loadPage(page) {
// AJAX content load (simulate)
document.getElementById('content').innerHTML = page + ' Content Loaded';
// Push new state
history.pushState({page: page}, '', '/' + page);
}
// Popstate event for back/forward
window.onpopstate = function(event) {
if (event.state) {
loadPage(event.state.page);
}
};
</script>
</body>
</html>Links click par content change hoga, URL update, back button popState trigger karega.
replaceState Method - Current Entry Replace Karna
Purpose: History ka current entry update, back stack mein nahi add. Initial load par use.
Syntax: history.replaceState(state, title, url). Same as pushState lekin replace.
Kab use karein: Error pages ya initial state fix.
<script>
// Example: Initial load par
window.onload = function() {
history.replaceState({page: 'home'}, '', '/home');
};
// Ya dynamic
function updateCurrent(page) {
history.replaceState({page: page}, '', '/' + page);
}
</script>Current URL replace karega bina new entry ke.
popState Event - Navigation Handle Karna
Purpose: Back/forward click detect, state restore.
Events: window.onpopstate = function(event) { if (event.state) { ... } }. Event.state null ho sakta hai initial par.
Kab use karein: SPA routing mein.
<script>
window.onpopstate = function(event) {
var state = event.state || {page: 'home'};
document.getElementById('content').innerHTML = state.page + ' Restored';
// AJAX reload if needed
};
</script>Browser buttons par content restore hoga.
Tip: Base URL set karo <base href="/"> relative paths ke liye. Security: Same-origin policy.
PWA Manifest - App-Like Web Apps
Purpose: Web app ko installable banata hai, home screen icon, offline support. JSON file link via link tag.
File: manifest.json root mein, MIME type application/manifest+json.
Link: <link rel="manifest" href="/manifest.json"> head mein.
Kab use karein: Mobile web apps, PWAs.
Manifest.json Structure
Required: name (app name), short_name, start_url (launch URL), display ("standalone/fullscreen/minimal-ui/browser").
Icons: Array of objects {src, sizes, type}, jaise 192x192 PNG.
Others: theme_color, background_color, orientation, scope, lang.
{
"name": "My PWA App",
"short_name": "PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"lang": "hi",
"scope": "/",
"orientation": "portrait"
}Yeh JSON PWA metadata define karta hai.
HTML Link aur Service Worker Teaser
HTML: Head mein link add.
<head>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000000">
</head>Service Worker offline ke liye (baad ki lecture), register karo JS se.
Tip: Lighthouse tool se PWA audit karo Chrome DevTools mein. Icons multiple sizes ke liye.
Practice Tasks (Detailed with Steps)
- History API Practice: "history-api.html" banao. 3 links add karo pushState se content change, popState handle karo back button ke liye.
- ReplaceState Practice: "replace-state.html" mein onload replaceState call karo initial URL set ke liye, ek button se current replace.
- Manifest Practice: "manifest.html" banao, simple manifest.json create karo (icons placeholder), link tag add karo head mein.
- PWA Setup Practice: Ek folder mein manifest.json banao with icons (sample images), HTML link karo, browser mein test (add to home screen).
- Combined: Ek SPA banao History API se (pages: home, about), manifest add karo PWA banane ke liye. 40 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: pushState URL change kyun nahi reload karta?
- A: Bina server request ke sirf browser history update, AJAX content load karo.
- Q: popState initial load par trigger?
- A: Nahi, sirf back/forward par; onload manual state set karo.
- Q: Manifest icons kitne sizes?
- A: Minimum 192x192, 512x512 for Android; Apple touch icons alag.
- Q: PWA offline kaise?
- A: Service Worker cache, manifest sirf install ke liye.
Next Lecture Teaser
Lecture 12: HTML5 Service Workers Basics aur Web App Manifest Advanced – Offline capabilities aur PWA enhancements.
Yeh lecture complete. Ab aap History API aur PWA manifest master kar chuke ho.
