Arhitectura aplicațiilor web moderne

Înainte de a aprofunda PWA, este esențial să înțelegeți arhitectura aplicațiilor web moderne. Un PWA nu este doar un site web cu un Service Worker adăugat - este o aplicație construită pe principii arhitecturale solide care permit performanță, scalabilitate și reziliență.

Arhitectura Application Shell (App Shell) este fundamentul oricărui PWA performant. Acest model separă infrastructura aplicației (shell-ul) de conținutul dinamic, permițând încărcarea instantanee a interfeței și popularea ulterioară a datelor.

Structura tipică a unui App Shell:

app/
├── index.html          // Shell-ul HTML principal
├── css/
│   └── app-shell.css   // Stiluri critice pentru shell
├── js/
│   ├── app.js          // Logica principală a shell-ului
│   └── router.js       // Navigare client-side
├── manifest.json       // Web App Manifest
├── sw.js               // Service Worker
└── assets/
├── icons/          // Icoane PWA
└── fonts/          // Fonturi locale

// app-shell.js - Logica de încărcare a conținutului

class AppShell {
constructor() {
this.contentArea = document.getElementById('content');
this.loadingState = document.getElementById('loading');
}

async loadContent(url) {
this.showLoading();
try {
// Încearcă mai întâi din cache
const cached = await this.getFromCache(url);
if (cached) {
this.renderContent(cached);
}
// Apoi actualizează de pe rețea
const fresh = await fetch(url);
const data = await fresh.json();
this.renderContent(data);
this.saveToCache(url, data);
} catch (error) {
// Offline - afișează conținut din cache
const cached = await this.getFromCache(url);
if (cached) {
this.renderContent(cached);
this.showOfflineBanner();
} else {
this.showErrorPage();
}
}
}

async getFromCache(url) {
const cache = await caches.open('api-data');
const response = await cache.match(url);
return response ? response.json() : null;
}

async saveToCache(url, data) {
const cache = await caches.open('api-data');
const response = new Response(JSON.stringify(data));
await cache.put(url, response);
}

renderContent(data) {
this.hideLoading();
this.contentArea.innerHTML = this.template(data);
}

showLoading() {
this.loadingState.style.display = 'block';
}

hideLoading() {
this.loadingState.style.display = 'none';
}
}

Pentru un PWA care se comportă ca o aplicație nativă, navigarea trebuie gestionată client-side, fără reîncărcarea completă a paginii:

// router.js - Router simplu pentru PWA

class PWARouter {
constructor() {
this.routes = new Map();
window.addEventListener('popstate', () => this.handleRoute());
document.addEventListener('click', e => {
const link = e.target.closest('a[data-route]');
if (link) {
e.preventDefault();
this.navigate(link.getAttribute('href'));
}
});
}

addRoute(path, handler) {
this.routes.set(path, handler);
}

navigate(path) {
history.pushState(null, '', path);
this.handleRoute();
}

handleRoute() {
const path = window.location.pathname;
const handler = this.routes.get(path) || this.routes.get('*');
if (handler) handler();
}
}

// Utilizare
const router = new PWARouter();
router.addRoute('/', () => app.loadContent('/api/home'));
router.addRoute('/produse', () => app.loadContent('/api/produse'));
router.addRoute('*', () => app.showErrorPage());