Un PWA (Progressive Web App) este o aplicație web care poate fi instalată pe desktop sau mobil și funcționează offline. Iată un exemplu simplu:
1. Structura fișierelor
pwa-simplu/
├── index.html
├── style.css
├── app.js
└── service-worker.js
2. index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Un PWA simplu</title>
<link rel="stylesheet" href="style.css">
<!-- Manifest pentru instalare PWA -->
<link rel="manifest" href="manifest.json">
</head>
<body>
<h1>Bine ai venit la PWA-ul meu simplu!</h1>
<button id="btn">Click pentru alert</button>
<script src="app.js"></script>
</body>
</html>
3. style.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
4. app.js
// Alert simplu la click
document.getElementById('btn').addEventListener('click', () => {
alert('Salut! Acesta este un PWA simplu.');
});
// Înregistrare service worker pentru offline
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('service-worker.js')
.then(reg => console.log('Service Worker înregistrat:', reg))
.catch(err => console.log('Eroare la înregistrare:', err));
});
}
5. service-worker.js
const cacheName = 'pwa-simplu-v1';
const assets = [
'/',
'/index.html',
'/style.css',
'/app.js'
];
// Instalare și cache
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll(assets))
);
});
// Preluare resurse din cache
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(res => res || fetch(event.request))
);
});
6. manifest.json
{
"name": "Un PWA simplu",
"short_name": "PWA Simplu",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2b2b2b",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Cum funcționează:
- Deschizi
index.htmlîntr-un browser modern. - Apasă pe butonul „Click pentru alert” să testezi JS.
- PWA-ul va putea fi instalat pe desktop/mobil datorită
manifest.json. service-worker.jscachează fișierele pentru a funcționa offline.
