PWA nədir
Progressive Web App üç əlavəsi olan adi veb saytdır.
- HTTPS (inkişaf zamanı
localhost). Service worker yalnız təhlükəsiz kontekstdə işləyir. - Web App Manifest: ad, ikonlar, rənglər və açılış ünvanı olan JSON faylı.
- Service Worker: səhifə ilə şəbəkə arasında duran, sorğuları tutan və onlara keşdən cavab verə bilən skript.
Nəticədə sayt ana ekrana quraşdırıla bilir, ayrıca pəncərədə açılır və əlaqə olmadan da işləyir. Nəzərə alın ki, service worker-də window və DOM yoxdur; onun içində qlobal obyekt self-dir, Cache API isə caches kimi əlçatandır.
Manifest və quraşdırma
Manifest brauzerə quraşdırılmış tətbiqin necə görünəcəyini bildirir. Onu hər səhifədə qoşun:
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">{
"name": "Prowid Notes",
"short_name": "Notes",
"start_url": "/?source=pwa",
"scope": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512",
"type": "image/png", "purpose": "maskable" }
]
}| Sahə | Mənası |
|---|---|
name, short_name | Tam ad və ikonun altındakı qısa yazı |
start_url | İkondan açılan səhifə; ?source=pwa parametri analitikaya kömək edir |
display | standalone ünvan sətrini gizlədir; browser adi tab saxlayır |
icons | Adi minimum 192 və 512 px; maskable dairəvi və yumru formalara uyğunlaşır |
💡 Quraşdırma qaydaları brauzerlər arasında fərqlənir, ona görə lazım olan brauzerlərdə yoxlayın. Oflayn iş üçün hər halda service worker lazımdır.
