El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

En aquest tema, explorarem els conceptes de Service Workers i Aplicacions Web Progressives (PWAs). Els Service Workers són una tecnologia clau per a les PWAs, permetent funcionalitats com la càrrega fora de línia, notificacions push i altres característiques avançades que milloren l'experiència de l'usuari.

Què és un Service Worker?

Un Service Worker és un script que el navegador executa en segon pla, separat de la pàgina web. Proporciona característiques com la capacitat de gestionar sol·licituds de xarxa, emmagatzemar en memòria cau i enviar notificacions push.

Característiques Clau dels Service Workers:

Execució en segon pla: No interfereixen amb el fil principal de la pàgina web.
Intercepció de sol·licituds de xarxa: Poden gestionar sol·licituds de xarxa per proporcionar funcionalitats fora de línia.
Memòria cau: Permeten emmagatzemar recursos en memòria cau per a un accés ràpid i fora de línia.
Notificacions push: Poden enviar notificacions push als usuaris.

Instal·lació i Activació d'un Service Worker

Pas 1: Registrar el Service Worker

El primer pas és registrar el Service Worker des del fitxer JavaScript principal de la teva aplicació.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registrat amb èxit:', registration);
      })
      .catch(error => {
        console.log('Error en registrar el Service Worker:', error);
      });
  });
}

Pas 2: Escriure el Fitxer del Service Worker

El següent pas és crear el fitxer service-worker.js on definirem el comportament del Service Worker.

self.addEventListener('install', event => {
  console.log('Service Worker instal·lat');
  // Pre-caching resources
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        '/image.png'
      ]);
    })
  );
});

self.addEventListener('activate', event => {
  console.log('Service Worker activat');
});

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

Explicació del Codi

install: Aquest esdeveniment s'activa quan el Service Worker s'instal·la. Aquí és on podem pre-emmagatzemar en memòria cau els recursos necessaris.
activate: Aquest esdeveniment s'activa quan el Service Worker s'activa. És un bon lloc per netejar memòries cau antigues.
fetch: Aquest esdeveniment s'activa per a cada sol·licitud de xarxa. Aquí podem interceptar les sol·licituds i servir-les des de la memòria cau si estan disponibles.

Aplicacions Web Progressives (PWAs)

Les PWAs són aplicacions web que utilitzen tecnologies modernes per proporcionar una experiència d'usuari semblant a les aplicacions natives. Les característiques clau de les PWAs inclouen:

Responsive: Adaptables a qualsevol dispositiu i mida de pantalla.
Offline-first: Funcionen fora de línia gràcies als Service Workers.
Segures: Requereixen HTTPS per garantir la seguretat.
Engaging: Permeten notificacions push i altres funcionalitats interactives.

Manifest de la PWA

Per convertir la teva aplicació web en una PWA, necessites un fitxer manifest.json que defineixi les propietats de la teva aplicació.

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Integració del Manifest

Inclou el manifest en el teu fitxer HTML principal.

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

Exercici Pràctic

Objectiu

Crear una PWA simple que funcioni fora de línia i mostri una notificació push.

Passos

Crear el fitxer manifest.json.
Registrar i escriure el Service Worker.
Implementar la memòria cau de recursos.
Enviar una notificació push.

Solució

manifest.json:

{
  "name": "Simple PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0000ff",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Registrar el Service Worker:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registrat amb èxit:', registration);
      })
      .catch(error => {
        console.log('Error en registrar el Service Worker:', error);
      });
  });
}

Escriure el Service Worker:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        '/icon-192x192.png',
        '/icon-512x512.png'
      ]);
    })
  );
});

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

self.addEventListener('push', event => {
  const title = 'Notificació Push';
  const options = {
    body: 'Això és una notificació push!',
    icon: '/icon-192x192.png',
    badge: '/icon-192x192.png'
  };

  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

Enviar una Notificació Push (simulació):

// Simulació d'enviament de notificació push
navigator.serviceWorker.ready.then(registration => {
  registration.showNotification('Notificació Push', {
    body: 'Això és una notificació push!',
    icon: '/icon-192x192.png',
    badge: '/icon-192x192.png'
  });
});

Conclusió

En aquest tema, hem après què són els Service Workers i com utilitzar-los per crear Aplicacions Web Progressives (PWAs). Hem vist com registrar i escriure un Service Worker, així com crear un manifest per a la nostra PWA. També hem implementat una funcionalitat de notificació push. Aquestes tècniques permeten millorar significativament l'experiència de l'usuari, fent que les aplicacions web siguin més ràpides, fiables i atractives.

Service Workers i Aplicacions Web Progressives (PWAs)

Introducció

Què és un Service Worker?

Característiques Clau dels Service Workers:

Instal·lació i Activació d'un Service Worker

Pas 1: Registrar el Service Worker

Pas 2: Escriure el Fitxer del Service Worker

Explicació del Codi

Aplicacions Web Progressives (PWAs)

Manifest de la PWA

Integració del Manifest

Exercici Pràctic

Objectiu

Passos

Solució

Conclusió

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final