Desenvolupament PWA: arquitectura offline-first amb Service Workers

Més que 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.

Dissenyar arquitectura PWA Veure metodologia
  • <3s TTI en 3G
Com construïm: requisits, arquitectura, codi revisat, desplegament reversible, rendiment mesurat i evolució amb el teu equip Cada mètrica marca la següent iteració 01 · Requisits El que el negocinecessita 02 · Arquitectura Decisionsdocumentades 03 · Codi Revisat i provat 04 · Desplegament Automàtic ireversible 05 · Rendiment Core Web Vitals enverd 06 · Evolució El teu equip demana,nosaltres entreguem
  1. 01 · Requisits El que el negoci necessita
  2. 02 · Arquitectura Decisions documentades
  3. 03 · Codi Revisat i provat
  4. 04 · Desplegament Automàtic i reversible
  5. 05 · Rendiment Core Web Vitals en verd
  6. 06 · Evolució El teu equip demana, nosaltres entreguem
  7. Cada mètrica marca la següent iteració
Scroll

En xifres

Resultats comprovables

Mètriques que defineixen una PWA professional.

  • 15+ Anys d'experiència Desenvolupament web des de 2009
  • 95+ PWA Score Lighthouse certified
  • Offline Fluxos crítics Funcionament sense xarxa

Què inclou

Lliurables del servei

El que reps. Sense ambigüitats.

  • Auditoria d'offline-readiness i estratègia de caching
  • Service Worker amb Workbox configurat per al teu cas
  • App Shell pattern per a càrrega instantània
  • Web App Manifest optimitzat per a instal·lació
  • Push notifications (si aplica) amb FCM o similar
  • Pipeline CI amb Lighthouse audits automatitzats

Per què

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".

sw.js
// Estratègia de Caching Service Worker
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then(cached => cached ||
fetch(event.request)
)
);
});
  • <100ms Shell
  • ✓ Offline
  • 95+ PWA Score

Definició

Què és una PWA i per què importa el 2026?

Una Progressive Web App (PWA) és una aplicació web que usa tecnologies modernes (Service Workers, Web App Manifest) per oferir experiència d'app nativa des del navegador: instal·lable, offline, notificacions push, càrrega instantània.

El 2026, les PWAs són l'alternativa real al desenvolupament natiu per a molts casos d'ús. Avantatges: un sol codi per a web i "app", sense costos d'App Store (30% comissió), actualitzacions instantànies sense passar per review, URL compartible. El Service Worker és el cor: un proxy programable que intercepta requests i decideix si servir des de cache, anar a xarxa, o mostrar fallback.

Què inclou

Resum per a direcció

El que necessites saber per decidir.

  • Estalvi 50-70% vs desenvolupament natiu dual (iOS + Android)
  • Sense comissions d'App Store (30%) ni procés de review
  • Actualitzacions instantànies sense esperar aprovació
  • URL compartible, indexable per Google, SEO mantingut
  • Conversió de web existent en setmanes, no mesos
  • Risc principal: limitacions en iOS (storage, algunes APIs)

Què inclou

Resum per a CTO / equip tècnic

Arquitectura i requisits d'implementació.

  • Service Workers obligatoris (HTTPS requerit)
  • Workbox per a abstracció de caching strategies
  • App Shell pattern + streaming de contingut
  • IndexedDB per a persistència offline complexa
  • Background Sync per a requests resilients
  • Lighthouse CI en pipeline per mantenir score 95+

Per a qui

É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.

Claus

Estratègies de caching que implementem

Workbox patterns per a cada cas d'ús.

  1. 01

    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.

  2. 02

    Cache-First + Expiration

    Cache amb TTL definit. Per a assets estàtics: fonts, icones, JS/CSS versionat. Redueix requests, garanteix consistency amb max-age.

  3. 03

    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.

  4. 04

    Background Sync + Queue

    Requests que fallen s'encuen i reintenten amb connexió. Per a formularis, uploads, accions crítiques. Resiliència real.

Com treballem

Procés de treball

De web tradicional a offline-first.

  1. 01

    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.

    Setmana 1
  2. 02

    Service Worker Architecture

    Workbox configuration. Precaching d'app shell. Runtime caching strategies. Lifecycle handling per a updates.

    Setmana 2-3
  3. 03

    Offline UI/UX

    Estats de connexió visibles. Fallback pages. Queue indicators per a pending actions. Proves de edge cases.

    Setmana 4
  4. 04

    Push i instal·lació

    Push notification setup (si aplica). Install prompt strategy. Web App Manifest optimitzat. Lighthouse CI en pipeline.

    Setmana 5

Claus

Riscos i com els mitiguem

Transparència sobre el que pot anar malament.

  1. 01

    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.

  2. 02

    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ó".

  3. 03

    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.

  4. 04

    Complexitat de debugging

    Service Workers afegeixen capa de complexitat. Mitigació: logging estructurat, DevTools workflow documentat, tests de caching en CI.

Tecnologies

Pila d'eines

APIs i tecnologies per a offline-first.

  • Service Workers
  • Workbox
  • CacheStorage API
  • IndexedDB
  • Background Sync
  • Periodic Sync
  • Push API
  • Web App Manifest
  • Vite PWA
  • next-pwa
  • Firebase Cloud Messaging
  • Lighthouse CI
  • Web Vitals

La prova

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.

  • 15+ Anys d'experiència
  • 200+ Projectes web
  • Retenció de clients 92%
  • Lighthouse PWA 95+

Preguntes freqüents

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. Per a natiu multiplataforma treballem amb desenvolupament Flutter i React Native.

Puc convertir la meva SPA existent en PWA?

Sí. Si ja és HTTPS i responsive, afegir capacitats PWA és senzill; si està construïda amb React, usem next-pwa o Vite PWA. 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€. PWA nova amb offline complex: 20.000-35.000€. PWA enterprise amb push, sync, i multi-tenant: 35.000+€. 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.

Següent pas

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
  • Sense compromís
  • Resposta en 24h
  • Proposta personalitzada
Última actualització: juliol del 2026

Parlem.

Consulta tècnica inicial

IA, seguretat i rendiment. Diagnòstic i proposta tancada per fases.

  • NDA disponible
  • Resposta <24h
  • Proposta per fases

La teva primera reunió és amb un Arquitecte de Solucions, no amb un comercial.

Sol·licitar diagnòstic