Una Aplicació Web Progressiva (PWA) és una aplicació web que utilitza capacitats modernes del web per oferir una experiència similar a una aplicació nativa. Les PWA combinen les millors característiques de les aplicacions web i les aplicacions mòbils natives.

• Responsive: S'adapten a qualsevol mida de pantalla.
• Offline: Funcionen sense connexió a Internet gràcies a la memòria cau.
• Seguretat: S'executen sobre HTTPS per garantir la seguretat de les dades.
• Actualitzacions Automàtiques: Sempre estan actualitzades gràcies a la seva naturalesa web.
• Instal·lables: Es poden instal·lar a l'escriptori o al dispositiu mòbil com una aplicació nativa.

1. Crear un Nou Projecte Ionic

   ionic start myPWAApp blank --type=angular
   cd myPWAApp
   

2. Afegir el Suport PWA Ionic proporciona un paquet que facilita la configuració d'una PWA.

   ng add @angular/pwa --project app
   

3. Configurar el manifest.json El fitxer manifest.json defineix com es comporta la PWA quan s'instal·la al dispositiu.

   {
     "name": "My PWA App",
     "short_name": "PWA App",
     "start_url": "/",
     "display": "standalone",
     "background_color": "#ffffff",
     "theme_color": "#4A90E2",
     "icons": [
       {
         "src": "assets/icons/icon-72x72.png",
         "sizes": "72x72",
         "type": "image/png"
       },
       {
         "src": "assets/icons/icon-96x96.png",
         "sizes": "96x96",
         "type": "image/png"
       },
       {
         "src": "assets/icons/icon-128x128.png",
         "sizes": "128x128",
         "type": "image/png"
       },
       {
         "src": "assets/icons/icon-144x144.png",
         "sizes": "144x144",
         "type": "image/png"
       },
       {
         "src": "assets/icons/icon-152x152.png",
         "sizes": "152x152",
         "type": "image/png"
       },
       {
         "src": "assets/icons/icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       },
       {
         "src": "assets/icons/icon-384x384.png",
         "sizes": "384x384",
         "type": "image/png"
       },
       {
         "src": "assets/icons/icon-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
       }
     ]
   }
   

4. Configurar el Service Worker El ng add @angular/pwa ja configura un service worker per a tu. Pots personalitzar-lo a ngsw-config.json.

Obre el navegador i accedeix a http://localhost:8100. Utilitza les eines de desenvolupador del navegador per simular diferents dispositius i condicions de xarxa.

Els fitxers de producció es generaran a la carpeta www.

Per servir la PWA, pots utilitzar qualsevol servidor web estàtic. Un exemple amb http-server:

Accedeix a http://localhost:8080 per veure la teva PWA en acció.

Crear una PWA amb Ionic que mostri una llista d'elements i permeti afegir-ne de nous, tot funcionant offline.

1. Crear el Projecte

   ionic start myOfflineApp blank --type=angular
   cd myOfflineApp
   ng add @angular/pwa --project app
   

2. Crear una Pàgina per a la Llista

   ionic generate page list
   

3. Afegir Funcionalitat per Afegir Elements Modifica list.page.html:

   <ion-header>
     <ion-toolbar>
       <ion-title>My Offline List</ion-title>
     </ion-toolbar>
   </ion-header>
   
   <ion-content>
     <ion-list>
       <ion-item *ngFor="let item of items">{{ item }}</ion-item>
     </ion-list>
     <ion-item>
       <ion-input [(ngModel)]="newItem" placeholder="New Item"></ion-input>
       <ion-button (click)="addItem()">Add</ion-button>
     </ion-item>
   </ion-content>
   

   Modifica list.page.ts:

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-list',
     templateUrl: 'list.page.html',
     styleUrls: ['list.page.scss'],
   })
   export class ListPage {
     items: string[] = [];
     newItem: string = '';
   
     addItem() {
       if (this.newItem.trim().length > 0) {
         this.items.push(this.newItem);
         this.newItem = '';
       }
     }
   }
   

4. Configurar el Service Worker per a Funcionalitat Offline Modifica ngsw-config.json per incloure la pàgina de la llista:

   {
     "index": "/index.html",
     "assetGroups": [
       {
         "name": "app",
         "installMode": "prefetch",
         "resources": {
           "files": [
             "/favicon.ico",
             "/index.html",
             "/*.css",
             "/*.js"
           ]
         }
       },
       {
         "name": "assets",
         "installMode": "lazy",
         "updateMode": "prefetch",
         "resources": {
           "files": [
             "/assets/**",
             "/*.(png|jpg|jpeg|gif|svg)"
           ]
         }
       }
     ],
     "dataGroups": [
       {
         "name": "api",
         "urls": [
           "/list"
         ],
         "cacheConfig": {
           "strategy": "freshness",
           "maxSize": 100,
           "maxAge": "1d",
           "timeout": "10s"
         }
       }
     ]
   }
   

1. Executa l'aplicació en mode de desenvolupament:

   ionic serve
   

2. Obre les eines de desenvolupador del navegador i activa el mode offline.

3. Afegeix elements a la llista i comprova que es mantenen fins i tot sense connexió a Internet.

En aquesta secció, hem après què són les Aplicacions Web Progressives (PWA) i com podem configurar una PWA utilitzant Ionic. Hem vist com configurar el manifest.json i el service worker, així com com provar la funcionalitat offline. Finalment, hem realitzat un exercici pràctic per reforçar els conceptes apresos.

En el següent tema, explorarem com utilitzar Ionic amb altres frameworks com React i Vue.