Progressive web app

En progressive web app är en webbplats som beter sig mer som en native mobilapp. Den laddar snabbt, fungerar offline eller på långsamma nätverk, kan installeras på en hemskärm utan att gå via en app store och kan skicka push-notiser på stödda plattformar. Termen beskriver en uppsättning förmågor snarare än ett specifikt ramverk eller teknik. ## Vad som gör en sajt till en PWA De tekniska kraven är blygsamma. En PWA behöver serveras över HTTPS. Den behöver en web app manifest, en liten JSON-fil som beskriver appens namn, ikoner, färger och hur den ska startas. Den behöver en service worker, ett bakgrundsskript som avlyssnar nätverksanrop, cachar responser och låter sajten ladda offline. Den behöver vara responsiv och fungera på vilken skärmstorlek som helst. De flesta moderna webbapplikationer uppfyller de flesta av de kraven utan extra arbete. Att lägga till en manifest och en service worker gör en välbyggd sajt till en PWA. Googles Lighthouse-verktyg granskar PWA-efterlevnad och ger en poäng. ## Vad PWA:er faktiskt gör för kunder De kundvända fördelarna är praktiska. En kund som bokmärker en PWA till sin hemskärm får en app-lik ikon och en helskärmsupplevelse utan webbläsar-chrome. Sajten laddar direkt vid återbesök eftersom service workern cachar tillgångar. Produktsidor och kundvagnstillstånd kan finnas tillgängliga offline för browsing. På Android kan PWA:er installeras med ett tryck och skicka push-notiser. På iOS är upplevelsen mer begränsad: installation fungerar men med färre förmågor, och push-notiser landade först med iOS 16.4. Den här asymmetrin är verklig och värd att planera runt om push är viktigt. ## Shopware PWA-kontexten I Shopware-ekosystemet var "Shopware PWA" i åratal en specifik produkt: Shopwares officiella Vue.js-frontendprojekt. Det projektet har arkiverats, och ekosystemet använder nu termen mer löst för att betyda vilken headless-frontend som helst som kör på Shopwares Store API. Sökintresset runt "Shopware PWA" kvarstår eftersom ämnet fortfarande dyker upp i utvärderingar, men den specifika produkten är inte längre aktiv. En modern Shopware-storefront levererad på en frikopplad frontend kan fortfarande uppfylla PWA-kriterier; den behöver bara inte använda det arkiverade projektet för att göra det. ## PWA vs headless commerce PWA beskriver egenskaper hos en frontend. Headless commerce beskriver en arkitektonisk separation mellan frontend och backend. De två överlappar: en headless commerce-frontend kan enkelt byggas som en PWA, och de flesta moderna är det. Men ett monolitiskt e-handelstema kan också göras till en PWA genom att lägga till en manifest och service worker. Och en headless-frontend är inte automatiskt en PWA om den saknar service worker eller offline-strategi. ## Hur Frntkey passar in Frntkey är en Nuxt.js-baserad e-handelsfrontend som kan konfigureras som en PWA. Service worker, manifest och offline-strategi sitter ovanpå den grundläggande renderingsstacken snarare än att vara inbakade i varje projekt. Om PWA-beteende ska aktiveras är ett per-projekt-beslut baserat på handlarens publik och hur mycket offline- eller app-installationsbeteende som faktiskt är användbart för kunderna. Snabba Core Web Vitals och server-side rendering levererar de flesta av de synliga fördelarna med en PWA utan att kräva den fullständiga PWA-uppsättningen. ## Relaterade termer Ecommerce frontend · Core Web Vitals · Server-side rendering · Headless commerce