Cum să creezi o Progressive Web App — Service Worker și Offline

In this tutorial, you'll learn about Cum să creezi o Progressive Web App. We cover key concepts, practical examples, and best practices.

În acest ghid rapid vei învăța cum să creezi o Progressive Web App (PWA) pornind de la un site web existent, adăugând Service Worker, manifest și capabilități offline.

The Problem

Site-urile web obișnuite nu pot fi instalate pe ecranul principal al telefonului, nu funcționează offline și nu au acces la API-uri native. Utilizatorii preferă aplicațiile native, dar dezvoltarea separată este costisitoare.

The Wrong Way

// Service Worker gol sau inexistent
// Site-ul nu funcționează fără conexiune la internet

The Right Way

// sw.js — Service Worker cu cache și offline
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("pwa-cache-v1").then((cache) => {
      return cache.addAll([
        "/",
        "/index.html",
        "/style.css",
        "/app.js",
        "/icon-192.png",
      ]);
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Output: Aplicația se încarcă și din cache, funcționând offline complet.

Step-by-Step Fix

1. Creează manifest.json

{
  "name": "Aplicația Mea",
  "short_name": "AppMea",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196f3",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

2. Înregistrează Service Worker-ul

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

3. Adaugă link-ul către manifest în HTML

<link rel="manifest" href="/manifest.json">

4. Testează cu Lighthouse

# Chrome DevTools > Lighthouse > PWA
# Verifică: instalabil, offline, HTTPS

Prevention Tips

• Toate resursele din cache.addAll trebuie să existe, altfel instalarea eșuează
• Folosește HTTPS — Service Worker-ul nu funcționează pe HTTP
• Actualizează versiunea cache-ului la fiecare deploy
• Testează offline în DevTools > Network > Offline

Common Mistakes

1. Fără HTTPS — Service Worker-ul nu se înregistrează pe conexiuni nesigure
2. Cache prea mare — adăugarea a sute de fișiere în cache blochează instalarea
3. Versionare greșită — fără schimbarea numelui cache-ului, update-urile nu ajung la utilizatori
4. Fără fallback pentru rețea — utilizatorii văd pagini goale când cache-ul lipsește
5. Manifest incomplet — fără icoane de 192x192 și 512x512, PWA nu este instalabilă

FAQ

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro. DodaTech tools integrate seamlessly with web technologies for enhanced productivity and security.