PWA: Arquitectura offline-first amb Service Workers
No és "una web que funciona offline". És una arquitectura de caching amb estratègies d'invalidació, background sync, i gestió de cicle de vida. TTI inferior a 3s en 3G, experiència d'app sense App Store.
Lliurables del servei
El que reps. Sense ambigüitats.
Web tradicional vs PWA Kiwop
El problema amb les webs que coneixes.
Web tradicional: cada request va a internet, sense connexió no hi ha res, càrrega lenta en mòbil, no instal·lable. PWA Kiwop: Service Worker com a proxy intel·ligent, decideixes què servir des de cache, què anar a xarxa, què mostrar com a fallback. L'usuari veu UI en menys de 100ms fins i tot offline. La percepció: "aquesta app respon a l'instant".
Resum per a direcció
El que necessites saber per decidir.
Resum per a CTO / equip tècnic
Arquitectura i requisits d'implementació.
És per a tu?
PWA funciona si la teva audiència no necessita App Store. Si el descobriment en stores és crític, considera natiu.
Per a qui
- Empreses que volen experiència d'app sense desenvolupament natiu dual.
- Negocis amb usuaris mòbils que no volen descarregar apps de stores.
- Projectes on offline o baixa connectivitat és rellevant.
- Organitzacions amb web existent que volen millorar experiència mòbil.
- Equips amb expertise web que volen reutilitzar coneixements (React, Vue).
Per a qui no
- Apps que requereixen accés profund a hardware (Bluetooth LE, NFC, sensors).
- Projectes on presència en App Store/Play Store és crítica per descobriment.
- Experiències que necessiten rendiment natiu intensiu (gaming, AR).
- Si el teu públic usa iOS i espera experiència d'app nativa completa.
- Webs simples que no es beneficien de funcionalitats offline.
Estratègies de caching que implementem
Workbox patterns per a cada cas d'ús.
Stale-While-Revalidate
Serveix des de cache immediatament, actualitza en background. Ideal per a assets que canvien poc però necessiten frescor eventual: blog posts, imatges de producte.
Cache-First + Expiration
Cache amb TTL definit. Per a assets estàtics: fonts, icones, JS/CSS versionat. Redueix requests, garanteix consistency amb max-age.
Network-First + Fallback
Intenta xarxa, cau a cache si offline. Per a dades que han de ser fresques: preus, inventari. Fallback mostra dades stale però funcionals.
Background Sync + Queue
Requests que fallen s'encuen i reintenten amb connexió. Per a formularis, uploads, accions crítiques. Resiliència real.
Procés de treball
De web tradicional a offline-first.
Auditoria i estratègia
Anàlisi de rutes crítiques. Què ha de funcionar offline? Quines dades necessiten sync? Disseny de caching strategy per tipus de recurs.
Service Worker Architecture
Workbox configuration. Precaching d'app shell. Runtime caching strategies. Lifecycle handling per a updates.
Offline UI/UX
Estats de connexió visibles. Fallback pages. Queue indicators per a pending actions. Proves de edge cases.
Push i instal·lació
Push notification setup (si aplica). Install prompt strategy. Web App Manifest optimitzat. Lighthouse CI en pipeline.
Riscos i com els mitiguem
Transparència sobre el que pot anar malament.
Limitacions en iOS
iOS té storage limits més baixos i algunes APIs no disponibles. Mitigació: dissenyem amb les limitacions d'iOS com a baseline, feature detection per a capacitats extra en Android.
Cache stale (dades obsoletes)
Caching agressiu pot mostrar dades velles. Mitigació: estratègies específiques per recurs, versioning de cache, UI que indica "última actualització".
Service Worker updates
Usuaris poden quedar-se amb versió vella. Mitigació: skipWaiting per a updates crítics, prompt no intrusiu per a updates menors, màxim 2 reloads per a versió nova.
Complexitat de debugging
Service Workers afegeixen capa de complexitat. Mitigació: logging estructurat, DevTools workflow documentat, tests de caching en CI.
15 anys construint experiències web, ara offline-first
Des de 2009 desenvolupem aplicacions web que carreguen ràpid i funcionen bé. Les PWAs són l'evolució natural: la mateixa web, però amb superpoders. Instal·lable, offline, notificacions. Sense App Store, sense comissions, sense reviews.
Preguntes tècniques
El que CTOs i Product Managers pregunten.
PWA funciona igual en iOS que en Android?
No igual, però suficientment bé per a la majoria de casos. iOS suporta Service Workers, offline i instal·lació des d'iOS 11.3. Push notifications des d'iOS 16.4. Limitacions: storage limits més baixos, no hi ha badging API. Per al 90% d'apps de negoci, PWA en iOS és viable.
Com gestioneu updates del Service Worker?
SkipWaiting per a updates crítics, prompt per a updates no-crítics. Versionem assets amb hashes. CacheStorage cleanup de versions velles. L'usuari sempre té l'última versió després de màxim 2 reloads.
PWA o app nativa per al meu cas?
PWA si: content-heavy, e-commerce, utilities, vols evitar app stores, la teva audiència no instal·la apps. App nativa si: necessites Bluetooth LE, AR intensiu, background processing complex, la teva audiència espera app en store.
Puc convertir la meva SPA existent en PWA?
Sí. Si ja és HTTPS i responsive, afegir capacitats PWA és straightforward. El treball real és dissenyar què cachejar, com gestionar offline, i quin background sync necessites. Típicament 2-4 setmanes de desenvolupament.
Quina és la inversió típica per a una PWA?
Conversió de web existent: 8.000-15.000 EUR. PWA nova amb offline complex: 20.000-35.000 EUR. PWA enterprise amb push, sync, i multi-tenant: 35.000+ EUR. Significativament menor que desenvolupament natiu dual (iOS + Android).
Les PWAs s'indexen a Google igual que webs normals?
Sí, les PWAs són webs amb superpoders. Google les indexa exactament igual. De fet, Google premia les PWAs amb millors Core Web Vitals (LCP, CLS) perquè carreguen més ràpid gràcies al caching.
Què passa amb usuaris que no instal·len la PWA?
Funciona perfectament com a web normal. La instal·lació és opcional i millora l'experiència (pantalla completa, icona a home), però tots els beneficis de caching i offline funcionen sense instal·lar.
Treballeu amb empreses internacionals?
Sí, som una agència de desenvolupament PWA amb 15+ anys d'experiència. Treballem amb clients de tota Europa i Amèrica. Reunions per videoconferència disponibles.
La teva web triga més de 5s a carregar en 3G?
Auditoria d'offline-readiness. Analitzem oportunitats de caching, mesurem TTI, i dissenyem estratègia PWA. Informe en 48h.
Sol·licitar auditoria Auditoria
tècnica inicial.
IA, seguretat i rendiment. Diagnòstic i proposta tancada per fases.
La teva primera reunió és amb un Arquitecte de Solucions, no amb un comercial.
Sol·licitar diagnòstic