HTML5 Course in Roman Hindi/Urdu - Lecture 12: Service Workers Basics aur Manifest Advanced - Fully Detailed
HTML5 Service Workers Basics - Offline Capabilities
Service Workers (SW) HTML5 ka powerful feature hai jo browser mein background scripts chalata hai, offline support, push notifications, aur caching ke liye. Yeh proxy server jaise kaam karta hai network requests ko intercept. Focus on HTML5 registration aur basic lifecycle; full use ke liye JS chahiye.
Key Benefit: PWAs ko app-like banata hai, fast loading offline mein.
Service Worker Registration
Purpose: SW script register karna, HTTPS par zaroori (localhost ok dev mein).
Syntax: navigator.serviceWorker.register('/sw.js').then(reg => console.log('SW registered')).catch(err => console.log('Error'));
Scope: Script path se decide, root par rakhne se full site cover.
Kab use karein: Offline apps, caching strategies.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SW Registration Example - Lecture 12</title>
</head>
<body>
<h1>Service Worker Demo</h1>
<p>SW Status: <span id="status">Loading...</span></p>
<button onclick="registerSW()">Register SW</button>
<script>
function registerSW() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
document.getElementById('status').textContent = 'SW registered with scope: ' + registration.scope;
}).catch(function(error) {
document.getElementById('status').textContent = 'SW registration failed: ' + error;
});
} else {
document.getElementById('status').textContent = 'SW not supported';
}
}
// Auto-register on load
window.addEventListener('load', registerSW);
</script>
</body>
</html>Button ya load par SW register hoga, status update. sw.js file alag banao.
Service Worker Lifecycle
Events: Install (caches open), Activate (old SW replace), Fetch (requests intercept).
Basic sw.js: self.addEventListener('install', e => e.waitUntil(caches.open('v1').then(cache => cache.addAll(['/'])))); self.addEventListener('fetch', e => e.respondWith(caches.match(e.request).then(res => res || fetch(e.request))));
Kab use karein: Caching static assets.
// sw.js file content (separate)
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = ['/', '/styles.css', '/script.js'];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== CACHE_NAME) {
return caches.delete(cacheName);
}
})
);
})
);
});Install par cache, fetch par serve from cache ya network, activate par old clear.
Advanced SW Features
Push Notifications: self.addEventListener('push', e => self.registration.showNotification('Title', {body: e.data.text()}));
Background Sync: sync event for offline actions.
Strategies: Cache-first, Network-first, Stale-while-revalidate.
Tip: DevTools Application tab se SW debug. Unregister: registration.unregister().
Web App Manifest Advanced - PWA Enhancements
Manifest.json ko advanced banao with categories, screenshots, protocols. Yeh PWA ko store-like banata hai.
Advanced Fields: categories (array, jaise "education"), screenshots (images for store), related_applications (native app links), prefer_related_applications.
Advanced Manifest.json
{
"name": "Advanced PWA Tutorial",
"short_name": "PWA Tutor",
"description": "HTML5 PWA Course",
"start_url": "/index.html",
"scope": "/",
"display": "standalone",
"orientation": "portrait-primary",
"theme_color": "#2196F3",
"background_color": "#ffffff",
"categories": ["education", "productivity"],
"icons": [
{
"src": "icon-72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"screenshots": [
{
"src": "screenshot1.png",
"sizes": "1280x720",
"type": "image/png",
"form_factor": "wide"
}
],
"lang": "hi",
"dir": "ltr",
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=com.example.app"
}
]
}Categories store listing mein help, screenshots previews, maskable icons adaptive.
HTML Integration aur Testing
Link: , meta name="apple-mobile-web-app-capable" content="yes" iOS ke liye.
Testing: Chrome Lighthouse PWA score, Add to Home Screen prompt.
<head>
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="apple-icon.png">
</head>Apple-specific meta PWAs ko native jaise banata hai.
Tip: Manifest validate karo JSON lint se. Service Worker ke saath combine for full PWA.
Practice Tasks (Detailed with Steps)
- SW Registration Practice: "sw-register.html" banao. Button se register/unregister, status show karo.
- SW Caching Practice: "sw-cache.html" mein sw.js banao static files cache ke liye, offline test (DevTools Network offline).
- Manifest Advanced Practice: "advanced-manifest.html" mein manifest.json update karo categories, screenshots add (placeholder images).
- PWA Full Practice: Folder setup: HTML with link, manifest.json, sw.js register. Lighthouse score 90+ target.
- Combined: Ek offline page banao SW caching se, manifest with icons, History API se navigation. 45 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: SW HTTPS kyun?
- A: Security, man-in-middle attacks prevent. Dev mein localhost ok.
- Q: SW update kaise?
- A: Cache name change (v1 to v2), activate event mein old delete.
- Q: Manifest display modes?
- A: Standalone (no browser UI), fullscreen (immersive), minimal-ui (basic controls).
- Q: PWA install criteria?
- A: HTTPS, manifest, SW, valid start_url.
Next Lecture Teaser
Lecture 13: HTML5 Accessibility (ARIA roles, alt, lang) aur Internationalization (i18n) – Inclusive aur global web.
Yeh lecture complete. Ab aap Service Workers aur advanced manifest master kar chuke ho.
