PWA: mga batayan ng Progressive Web App, Service Worker at manifest

Ano ang Progressive Web App

Progressive Web App (PWA) — ay isang diskarte sa pag-develop ng web application na pinagsasama ang pinakamahusay na mga katangian ng web at native na mga application. Ang termino ay ipinakilala ni Francesco Berriman noong 2015, at aktibong itinaguyod ng Google ang PWA bilang kapalit ng mga simpleng mobile application. Ang pangunahing ideya: ang website ay unti-unting nagpapabuti depende sa mga kakayahan ng browser at device. Kung sinusuportahan ng browser ang Service Worker — kumokonekta ang offline mode. Kung sinusuportahan ang manifest — lilitaw ang pindutang «I-install». Kung mayroong API ng mga notification — ang application ay maaaring magpadala ng push. Ang user sa mahinang device na may mabagal na internet ay makakakuha ng pangunahing bersyon ng site, at sa modernong smartphone — isang ganap na application na may icon sa desktop.

Ang PWA ay hindi kailangang i-install sa pamamagitan ng app store. Sapat na ang link. Nalulutas nito ang pangunahing problema ng mga mobile application — mataas na hadlang sa pagpasok. Ang user ay hindi pumupunta sa Google Play o App Store, hindi naghihintay ng pag-download ng 100 MB, hindi nagbibigay ng sampung pahintulot. Binuksan lang niya ang site, at nag-aalok ang browser na i-install ang application. Kung tumanggi ang user — ginagamit pa rin niya ang site. At kung pumayag — lilitaw ang icon sa home screen, at bubuksan ang application tulad ng native: walang address bar ng browser, sa full-screen mode at may mabilis na pagsisimula.

Sa teknikal, ang PWA ay dapat matugunan ang tatlong pamantayan: gumana sa pamamagitan ng HTTPS (secure na koneksyon), magkaroon ng Service Worker (background processing script) at maglaman ng manifest (Web App Manifest). Ang tatlong sangkap na ito ay nagbabago ng ordinaryong site sa isang mai-install na application.

Service Worker: Puso ng PWA

Service Worker — ay isang JavaScript script na pinapatakbo ng browser sa isang hiwalay na thread, independyente sa web page. Wala itong access sa DOM, hindi direktang makikipag-ugnayan sa interface, ngunit maaaring humarang at magbago ng mga network request, pamahalaan ang cache, magproseso ng mga push notification at magsagawa ng background synchronization. Ang Service Worker ay gumagana bilang proxy server sa pagitan ng browser at network: bawat request mula sa page ay dumadaan sa Service Worker, na nagpapasya — ibalik ang data mula sa cache, humiling mula sa server o gawin ang pareho.

Ang Service Worker ay nabubuhay ayon sa sarili nitong lifecycle, hindi nakatali sa bukas na page. Ito ay ini-install, ina-activate at gumagana sa background kahit matapos isara ang lahat ng tab ng site. Ito ay nagpapahintulot sa PWA na makatanggap ng mga push notification at mag-update ng cache sa background, nang walang partisipasyon ng user.

Lifecycle ng Service Worker

Ang Service Worker ay dumadaan sa apat na yugto: pagpaparehistro, pag-install, pag-activate at idle/pagtatapos.

Pagpaparehistro. Ang browser ay tumatanggap ng link sa JS file ng Service Worker at nagsisimulang mag-download. Ang pagpaparehistro ay ginagawa mula sa ordinaryong JavaScript sa page:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW rehistrado:', registration.scope);
    })
    .catch(error => {
      console.log('Nabigo ang pagpaparehistro ng SW:', error);
    });
}

Pag-install. Matapos ang matagumpay na pag-download, pinapagana ng browser ang kaganapang install. Sa yugtong ito, kaugalian na i-cache ang mga pangunahing mapagkukunan (HTML skeleton, CSS, pangunahing mga larawan) upang ang application ay gumana offline. Kung matagumpay ang pag-install, ang Service Worker ay pupunta sa susunod na yugto. Kung ang script ay nag-error — ang pag-install ay kinansela, at ang lumang Service Worker ay patuloy na gumagana.

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('pwa-cache-v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/app.js',
        '/images/logo.png'
      ]);
    })
  );
});

Pag-activate. Kapag ang lahat ng tab ng site ay sarado, ang lumang Service Worker ay nagtatapos at ang bago ay isinaaktibo. Ang kaganapang activate ay ginagamit para sa paglilinis ng mga lumang cache at paglipat ng data:

self.addEventListener('activate', event => {
  const cacheWhitelist = ['pwa-cache-v2'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Idle. Ang na-activate na Service Worker ay humaharang ng mga request at nagpoproseso ng mga kaganapan. Maaaring itigil ng browser upang makatipid ng mga mapagkukunan at muling simulan sa susunod na request. Ang Service Worker ay event-driven: ito ay nabubuhay lamang habang nagpoproseso ng mga kaganapan.

Mga Caching Strategy

Ang Service Worker ay sumusuporta sa ilang mga caching strategy. Ang pagpili ay depende sa uri ng mapagkukunan at mga kinakailangan sa pagiging bago ng data.

Cache First (cache muna). Una ay sinusuri ang cache. Kung ang mapagkukunan ay natagpuan — ibinabalik mula sa cache. Kung hindi — ang request ay pupunta sa server, ang tugon ay nai-save sa cache. Ang strategy ay angkop para sa mga static na mapagkukunan: mga larawan, font, CSS, JS. Nagbibigay ng maximum na bilis at ganap na offline na trabaho.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request).then(fetchResponse => {
        return caches.open('pwa-cache-v1').then(cache => {
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        });
      });
    })
  );
});

Network First (network muna). Ang request ay unang pupunta sa server. Kung ang server ay tumugon — ang data ay ibinabalik sa user at nai-save sa cache. Kung ang server ay hindi available — ang naka-cache na kopya ay ibinabalik. Ang strategy ay angkop para sa mga API request, balita, nilalaman na dapat ay bago ngunit maaari ring gumana offline.

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).then(response => {
      return caches.open('pwa-dynamic-v1').then(cache => {
        cache.put(event.request, response.clone());
        return response;
      });
    }).catch(() => {
      return caches.match(event.request);
    })
  );
});

Stale While Revalidate (luma na may pag-refresh). Ang tugon ay agad na ibinabalik mula sa cache, habang sa background ay nagpapadala ng request sa server para i-update ang cache. Nakikita ng user ang nilalaman agad, at ang susunod na request ay makakatanggap ng sariwang data. Mainam para sa nilalaman na nagbabago, ngunit hindi kritikal kung makita ng user ang bersyon na ilang minutong mas luma.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      const fetchPromise = fetch(event.request).then(response => {
        return caches.open('pwa-dynamic-v1').then(cache => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
      return cached || fetchPromise;
    })
  );
});

Web App Manifest: Paano Lumilitaw ang Application sa Device

Ang manifest — ay isang JSON file, karaniwang manifest.json, na ikinokonekta sa pamamagitan ng <link> tag sa head ng HTML page. Ito ay nagsasabi sa browser kung paano dapat ipakita ang application kapag naka-install sa device: pangalan, mga icon ng iba't ibang laki, kulay ng background, kulay ng tema, oryentasyon at mode ng display (browser, minimal UI, full screen).

{
  "name": "PWA Demo App",
  "short_name": "PWA Demo",
  "description": "Demo PWA application",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Ang parameter na display ay tumutukoy kung paano lilitaw ang application pagkatapos ng pag-install. standalone ay nagtatago ng address bar ng browser at navigation panel — ang application ay mukhang native. fullscreen ay gumagamit ng buong screen nang walang anumang elemento ng browser. minimal-ui ay nag-iiwan ng minimal na elemento ng browser (mga pindutan ng back at refresh).

Ang mga icon ay dapat ihanda sa hindi bababa sa dalawang laki: 192x192 at 512x512 pixels. Ang format na PNG na may suporta sa parameter na purpose (halimbawa, maskable) ay nagpapahintulot sa browser na iakma ang icon sa hugis ng casing ng device — sa Android ang icon ay maaaring gupitin sa isang bilog na parisukat. Pagkatapos ikonekta ang manifest, ang Chrome browser sa Android ay nagsisimulang magpakita ng banner na «Idagdag sa home screen» kapag natugunan ang mga kondisyon: HTTPS, rehistradong Service Worker, tamang manifest at hindi bababa sa dalawang pagbisita na may pagitan ng 5 minuto.

Mga Push Notification sa PWA

Ang PWA ay maaaring magpadala ng mga push notification tulad ng native na application. Para dito, ginagamit ang dalawang API: Push API (pagpapadala ng server) at Notification API (pagpapakita sa device). Ang Service Worker ay tumatanggap ng push event kahit hindi bukas ang application, at maaaring magpakita ng notification na may pamagat, teksto at icon.

Upang makatanggap ng mga push notification, ang user ay dapat magbigay ng pahintulot:

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('Pinayagan ang push');
  }
});

Ang Service Worker ay nag-subscribe sa push event at nagpapakita ng notification:

self.addEventListener('push', event => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    actions: [
      { action: 'open', title: 'Buksan' },
      { action: 'close', title: 'Isara' }
    ]
  });
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  if (event.action === 'open') {
    clients.openWindow('/');
  }
});

Para sa pagpapadala ng push mula sa server, ginagamit ang Web Push (VAPID) protocol. Ine-encrypt ng server ang mensahe at ipinapadala ito sa pamamagitan ng push service ng browser (Firebase Cloud Messaging para sa Chrome, Mozilla Autopush para sa Firefox). Ang subscription ng user (PushSubscription object) ay dapat na i-save sa server sa pagpaparehistro.

Pagganap at Lighthouse

Ang PWA ay dapat mabilis. Ang Google Lighthouse — ay isang auditing tool na sumusuri ng PWA ayon sa checklist: pagpaparehistro ng Service Worker, tugon 200 sa offline access, tamang manifest, HTTPS, tamang laki ng icon, mabilis na pag-load sa mabagal na network. Pinakamababang passing score para sa PWA — 80 sa 100 sa sukat ng Lighthouse. Ang mga application na may score na mas mababa sa 80 ay hindi nakakatanggap ng installation banner sa Chrome.

Mga pangunahing sukatan ng pagganap para sa PWA — First Contentful Paint (FCP) hanggang 1.8 segundo, Largest Contentful Paint (LCP) hanggang 2.5 segundo, Time to Interactive (TTI) hanggang 3.5 segundo. Maaaring makabuluhang pahusayin ng Service Worker ang FCP at LCP kung ica-cache nito ang kritikal na HTML at CSS sa pag-install. Ang strategy na Cache First para sa static at Stale While Revalidate para sa API ay nagbibigay ng pinakamahusay na karanasan ng user.

Offline na Access at Background Synchronization

Isa sa mga pangunahing kakayahan ng PWA — trabaho nang walang internet. Ang Service Worker ay humaharang ng mga request at nagbabalik ng mga naka-cache na bersyon ng mga page. Kung sinusubukan ng user na buksan ang isang page na wala sa cache, maaaring magpakita ng custom na fallback page:

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

Ang background synchronization (Background Sync) ay nagpapahintulot na ipagpaliban ang pagpapadala ng data sa server kung offline ang device. Ine-save ng Service Worker ang request at awtomatikong ipinapadala ito kapag naibalik ang koneksyon:

self.addEventListener('sync', event => {
  if (event.tag === 'sync-messages') {
    event.waitUntil(sendMessages());
  }
});

function sendMessages() {
  return caches.open('pwa-pending-v1').then(cache => {
    return cache.keys().then(requests => {
      return Promise.all(requests.map(request => {
        return fetch(request).then(() => cache.delete(request));
      }));
    });
  });
}

Mga Tool para sa Pag-develop ng PWA

Ang Chrome DevTools ay nagbibigay ng panel na Application, kung saan maaaring i-debug ang Service Worker (pagpaparehistro, status, cache, push), suriin ang manifest, linisin ang cache at lumikha ng sariling mga push notification para sa pagsubok. Ang tab na Network na may emulation ng offline mode ay tumutulong na suriin ang trabaho ng cache. Ang Lighthouse sa panel na Audits ay nagbibigay ng kumpletong PWA audit na may mga rekomendasyon.

Workbox — library mula sa Google na nagpapasimple sa paglikha ng Service Worker. Sa halip na manu-manong pagsulat ng mga caching strategy, ang Workbox ay nag-aalok ng mga handa na module:

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new StaleWhileRevalidate()
);

Ang Workbox ay naka-integrate sa mga bundler (Webpack, Vite) at awtomatikong bumubuo ng precache manifest. Ang PWA Builder (pwabuilder.com) mula sa Microsoft ay bumubuo ng lahat ng PWA file online: Service Worker, manifest, icon, HTML template.