PWA: Progressive Web App, Service Worker və manifest əsasları

Progressive Web App nədir

Progressive Web App (PWA) — veb və native tətbiqlərin ən yaxşı keyfiyyətlərini birləşdirən veb tətbiq inkişafı yanaşmasıdır. Termin 2015-ci ildə Françesko Berriman (Francesco Berriman) tərəfindən təqdim edilmişdir və Google PWA-nı sadə mobil tətbiqlərə əvəz olaraq fəal şəkildə təbliğ edir. Əsas fikir: veb sayt brauzerin və cihazın imkanlarından asılı olaraq tədricən təkmilləşir. Brauzer Service Worker dəstəkləyirsə — oflayn rejim qoşulur. Manifest dəstəkləyirsə — «Quraşdır» düyməsi görünür. Bildiriş API-si varsa — tətbiq push göndərə bilər. Zəif cihazda yavaş interneti olan istifadəçi saytın əsas versiyasını alacaq, müasir smartfonda isə iş masasında ikonası olan tam hüquqlu tətbiq alacaq.

PWA tətbiq mağazası vasitəsilə quraşdırma tələb etmir. Link kifayətdir. Bu, mobil tətbiqlərin əsas problemini — yüksək giriş həddini həll edir. İstifadəçi Google Play və ya App Store-a getmir, 100 MB endirilməsini gözləmir, onlarla icazə vermir. Sadəcə saytı açır və brauzer tətbiqi quraşdırmağı təklif edir. İstifadəçi imtina edərsə — yenə də saytdan istifadə edir. Razılaşarsa — ikona əsas ekranda görünür və tətbiq native kimi açılır: brauzer ünvan sətri olmadan, tam ekran rejimində və sürətli başlanğıcla.

Texniki olaraq PWA üç meyarı təmin etməlidir: HTTPS (təhlükəsiz əlaqə) üzərində işləmək, Service Worker (fon emal skripti) və manifest (Web App Manifest) ehtiva etmək. Bu üç komponent adi saytı quraşdırıla bilən tətbiqə çevirir.

Service Worker: PWA-nın ürəyi

Service Worker — brauzerin veb səhifədən asılı olmayaraq ayrı bir axında işə saldığı JavaScript skriptidir. DOM-a girişi yoxdur, interfeyslə birbaşa qarşılıqlı əlaqədə ola bilməz, lakin şəbəkə sorğularını ələ keçirə və dəyişdirə, keşi idarə edə, push bildirişlərini emal edə və fon sinxronizasiyasını həyata keçirə bilər. Service Worker brauzer və şəbəkə arasında proksi-server kimi işləyir: səhifədən hər sorğu Service Worker-dən keçir, o — məlumatı keşdən qaytarmaq, serverdən sorğulamaq və ya hər ikisini etmək qərarını verir.

Service Worker açıq səhifəyə bağlı olmayan öz həyat dövrünə görə yaşayır. O, quraşdırılır, aktivləşdirilir və saytın bütün tabları bağlandıqdan sonra belə fonda işləyir. Bu, PWA-ya push bildirişləri qəbul etməyə və keşi fonda, istifadəçinin iştirakı olmadan yeniləməyə imkan verir.

Service Worker-in həyat dövrü

Service Worker dörd mərhələdən keçir: qeydiyyat, quraşdırma, aktivləşdirmə və boş dayanma/tamamlama.

Qeydiyyat. Brauzer Service Worker-in JS faylına link alır və endirməyə başlayır. Qeydiyyat səhifədə adi JavaScript-dən yerinə yetirilir:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW qeydiyyatdan keçdi:', registration.scope);
    })
    .catch(error => {
      console.log('SW qeydiyyatı uğursuz oldu:', error);
    });
}

Quraşdırma. Uğurlu endirmədən sonra brauzer install hadisəsini işə salır. Bu mərhələdə əsas resursları (HTML çərçivəsi, CSS, əsas şəkillər) keşləmək adətdir ki, tətbiq oflayn işləyə bilsin. Quraşdırma uğurlu olarsa, Service Worker növbəti mərhələyə keçir. Skript xəta atarsa — quraşdırma ləğv edilir və köhnə Service Worker işləməyə davam edir.

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'
      ]);
    })
  );
});

Aktivləşdirmə. Saytın bütün tabları bağlandıqda, köhnə Service Worker dayanır və yenisi aktivləşir. activate hadisəsi köhnə keşləri təmizləmək və məlumat miqrasiyası üçün istifadə olunur:

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);
          }
        })
      );
    })
  );
});

Boş dayanma. Aktivləşdirilmiş Service Worker sorğuları ələ keçirir və hadisələri emal edir. Resurslara qənaət etmək üçün brauzer tərəfindən dayandırıla və növbəti sorğuda yenidən işə salına bilər. Service Worker hadisə yönümlüdür: o, yalnız hadisələri emal edərkən yaşayır.

Keşləmə strategiyaları

Service Worker bir neçə keşləmə strategiyasını dəstəkləyir. Seçim resurs növündən və məlumatların aktuallığı tələblərindən asılıdır.

Cache First (əvvəlcə keş). Əvvəlcə keş yoxlanılır. Resurs tapılarsa — keşdən qaytarılır. Yoxdursa — sorğu serverə gedir, cavab keşdə saxlanılır. Strategiya statik resurslar üçün uyğundur: şəkillər, şriftlər, CSS, JS. Maksimal sürət və tam oflayn iş təmin edir.

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 (əvvəlcə şəbəkə). Sorğu əvvəlcə serverə gedir. Server cavab verərsə — məlumat istifadəçiyə qaytarılır və keşdə saxlanılır. Server əlçatmaz olarsa — keşlənmiş nüsxə qaytarılır. Strategiya API sorğuları, xəbərlər, aktual olmalı olan, lakin oflayn da işləyə bilən məzmun üçün uyğundur.

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 (yenilənmə ilə köhnə). Cavab dərhal keşdən qaytarılır, fonda isə keşi yeniləmək üçün serverə sorğu göndərilir. İstifadəçi məzmunu dərhal görür, növbəti sorğu isə artıq təzə məlumat alacaq. Dəyişən, lakin istifadəçinin bir neçə dəqiqə köhnə versiyanı görməsi kritik olmayan məzmun üçün idealdır.

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: tətbiq cihazda necə görünür

Manifest — adətən manifest.json olan, HTML səhifəsinin head hissəsində <link> teqi vasitəsilə qoşulan JSON faylıdır. O, brauzerə tətbiqin cihazda quraşdırıldıqda necə göstərilməli olduğunu bildirir: ad, müxtəlif ölçülü ikonlar, fon rəngi, mövzu rəngi, oriyentasiya və göstərmə rejimi (brauzer, minimal UI, tam ekran).

{
  "name": "PWA Demo App",
  "short_name": "PWA Demo",
  "description": "Nümayiş PWA tətbiqi",
  "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"
    }
  ]
}

display parametri tətbiqin quraşdırmadan sonra necə görünəcəyini müəyyən edir. standalone brauzerin ünvan sətrini və naviqasiya panelini gizlədir — tətbiq native kimi görünür. fullscreen heç bir brauzer elementi olmadan bütün ekrandan istifadə edir. minimal-ui brauzerin minimal elementlərini (geri və yeniləmə düymələri) saxlayır.

İkonlar ən azı iki ölçüdə hazırlanmalıdır: 192x192 və 512x512 piksel. purpose parametrinin dəstəyi ilə PNG formatı (məsələn, maskable) brauzerə ikonanı cihazın qabıq formasına uyğunlaşdırmağa imkan verir — Android-də ikona yuvarlaq kvadrata kəsilə bilər. Manifest qoşulduqdan sonra Android-də Chrome brauzeri şərtlər yerinə yetirildikdə «Əsas ekrana əlavə et» bannerini göstərməyə başlayır: HTTPS, qeydiyyatdan keçmiş Service Worker, düzgün manifest və 5 dəqiqə interval ilə ən azı iki ziyarət.

PWA-da push bildirişləri

PWA native tətbiq kimi push bildirişləri göndərə bilər. Bunun üçün iki API istifadə olunur: Push API (server göndərişi) və Notification API (cihazda göstərmə). Service Worker tətbiq açıq olmasa belə push hadisəsini alır və başlıq, mətn və ikona ilə bildiriş göstərə bilər.

Push bildirişləri almaq üçün istifadəçi icazə verməlidir:

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('Push icazə verildi');
  }
});

Service Worker push hadisəsinə abunə olur və bildiriş göstərir:

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: 'Aç' },
      { action: 'close', title: 'Bağla' }
    ]
  });
});

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

Serverdən push göndərmək üçün Web Push (VAPID) protokolu istifadə olunur. Server mesajı şifrələyir və brauzer push xidməti (Chrome üçün Firebase Cloud Messaging, Firefox üçün Mozilla Autopush) vasitəsilə göndərir. İstifadəçinin abunəliyi (PushSubscription obyekti) qeydiyyat zamanı serverdə saxlanmalıdır.

Performans və Lighthouse

PWA sürətli olmalıdır. Google Lighthouse — PWA-nı yoxlama siyahısı üzrə yoxlayan audit alətidir: Service Worker qeydiyyatı, oflayn girişdə 200 cavabı, düzgün manifest, HTTPS, düzgün ikon ölçüsü, yavaş şəbəkələrdə sürətli yükləmə. PWA üçün minimal keçid balı Lighthouse şkalası üzrə 100-dən 80-dir. Bali 80-dən aşağı olan tətbiqlər Chrome-da quraşdırma banneri almır.

PWA üçün əsas performans metrikaları — First Contentful Paint (FCP) 1.8 saniyəyə qədər, Largest Contentful Paint (LCP) 2.5 saniyəyə qədər, Time to Interactive (TTI) 3.5 saniyəyə qədər. Service Worker quraşdırma zamanı kritik HTML və CSS-ni keşləyərsə, FCP və LCP-ni əhəmiyyətli dərəcədə yaxşılaşdıra bilər. Statika üçün Cache First və API üçün Stale While Revalidate strategiyası ən yaxşı istifadəçi təcrübəsini verir.

Oflayn giriş və fon sinxronizasiyası

PWA-nın əsas imkanlarından biri internet olmadan işləməkdir. Service Worker sorğuları ələ keçirir və səhifələrin keşlənmiş versiyalarını qaytarır. İstifadəçi keşdə olmayan səhifəni açmağa çalışarsa, fərdi ehtiyat səhifəsi göstərilə bilər:

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

Fon sinxronizasiyası (Background Sync) cihaz oflayn olduqda məlumatların serverə göndərilməsini təxirə salmağa imkan verir. Service Worker sorğunu saxlayır və əlaqə bərpa edildikdə avtomatik göndərir:

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));
      }));
    });
  });
}

PWA inkişafı üçün alətlər

Chrome DevTools, Service Worker-i sazlamaq (qeydiyyat, status, keş, push), manifesti yoxlamaq, keşi təmizləmək və test üçün öz push bildirişlərini yaratmaq mümkün olan Application panelini təqdim edir. Oflayn rejim emulyasiyası ilə Network vərəqi keşin işini yoxlamağa kömək edir. Audits panelində Lighthouse tövsiyələrlə tam PWA auditi verir.

Workbox — Service Worker yaratmağı asanlaşdıran Google kitabxanası. Keşləmə strategiyalarını əl ilə yazmaq əvəzinə, Workbox hazır modullar təklif edir:

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()
);

Workbox birləşdiricilər (Webpack, Vite) ilə inteqrasiya olunur və avtomatik olaraq ilkin keşləmə manifestini yaradır. Microsoft-dan PWA Builder (pwabuilder.com) bütün PWA fayllarını onlayn yaradır: Service Worker, manifest, ikonlar, HTML şablonu.