Aktivera progressiva webbprogramfunktioner enabling-pwa

Genom en enkel konfiguration kan en innehållsförfattare nu aktivera progressiva webbappsfunktioner (PWA) för upplevelser som skapats i AEM Sites.

CAUTION
Det här är en avancerad funktion som kräver:
  • Kunskap om PWA
  • Kunskap om er webbplats och innehållsstruktur
  • Förståelse av cachelagringsstrategier
  • Support från ditt utvecklingsteam
Innan du använder den här funktionen rekommenderar Adobe att du diskuterar detta med ditt utvecklingsteam för att definiera det bästa sättet att använda den i ditt projekt.

Introduktion introduction

Progressiva webbprogram (PWA) möjliggör engagerande appliknande upplevelser för AEM webbplatser genom att tillåta att de lagras lokalt på användarens dator och är tillgängliga offline. Användaren kan surfa på en webbplats när han/hon är på språng även om han/hon förlorar en internetanslutning. PWA ger en sömlös upplevelse även om nätverket förloras eller blir instabilt.

I stället för att kräva någon kodning av webbplatsen kan en innehållsförfattare konfigurera PWA-egenskaper som en extra flik i sidegenskaperna för en plats.

  • När konfigurationen sparas eller publiceras utlöses en händelsehanterare som skriver ut manifestfilerna och en servicearbetare som aktiverar PWA-funktioner på platsen.
  • Samlingsmappningar upprätthålls också för att säkerställa att servicearbetaren hanteras från programmets rot för att aktivera proxinginnehåll som tillåter offlinefunktioner i appen.

Med PWA har användaren en lokal kopia av webbplatsen, vilket ger en appliknande upplevelse även utan internetanslutning.

NOTE
Progressiva webbprogram är en teknik som utvecklas och stöd för installation av lokala appar och andra funktioner som beror på vilken webbläsare du använder.

Förutsättningar prerequisites

För att du ska kunna använda PWA-funktioner för din webbplats finns det två krav för din projektmiljö:

  1. Använd kärnkomponenter för att utnyttja den här funktionen
  2. Justera dina Dispatcher-regler för att visa de filer som krävs

Detta är tekniska steg som författaren måste samordna med utvecklingsteamet. De här stegen krävs bara en gång per plats.

Använd kärnkomponenter adjust-components

Core Components version 2.15.0 och senare har fullt stöd för PWA-funktionerna i AEM. Eftersom AEMaaCS alltid innehåller den senaste versionen av de centrala komponenterna kan du använda PWA-funktioner direkt. Ditt AEMaaCS-projekt uppfyller automatiskt detta krav.

NOTE
Adobe rekommenderar inte att du använder PWA-funktionerna i anpassade komponenter eller komponenter som inte har utökats från kärnkomponenterna.

Justera din Dispatcher adjust-dispatcher

Funktionen PWA genererar och använder /content/<sitename>/manifest.webmanifest filer. Som standard visas inte sådana filer i Dispatcher. För att dessa filer ska kunna visas måste utvecklaren lägga till följande konfiguration i platsprojektet.

File location: [project directory]/dispatcher/src/conf.dispatcher.d/filters/filters.any >

# Allow webmanifest files
/0102 { /type "allow" /extension "webmanifest" /path "/content/*/manifest" }

Beroende på vilket projekt du arbetar med kanske du vill inkludera olika typer av tillägg till reglerna för omskrivning. Tillägget webmanifest kan vara användbart för att inkludera i omskrivningsvillkoren när du introducerade en regel som döljer och dirigerar om begäranden till /content/<projectName>.

RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg|.webmanifest)$

Aktivera PWA för din webbplats enabling-pwa-for-your-site

När förutsättningarna är uppfyllda är det enkelt för en innehållsförfattare att aktivera PWA-funktioner för en webbplats. Här följer en grundläggande beskrivning av hur du gör detta. Enskilda alternativ beskrivs i avsnittet Detaljerade alternativ.

  1. Logga in i AEM.

  2. Välj Navigering > Webbplatser på huvudmenyn.

  3. Välj ditt webbplatsprojekt och välj Egenskaper eller använd snabbtangenten p.

  4. Välj fliken Progressiv webbapp och konfigurera tillämpliga egenskaper. Du vill åtminstone:

    1. Markera alternativet Aktivera PWA.

    2. Definiera Start-URL.

      Aktivera PWA

    3. Överför en 512x512-png-ikon till DAM och referera till den som programikonen.

      Definiera PWA-ikon

    4. Konfigurera de sökvägar som du vill att tjänstarbetaren ska arbeta offline. Vanliga sökvägar är:

      • /content/<sitename>
      • /content/experiencefragements/<sitename>
      • /content/dam/<sitename>
      • Alla teckensnittsreferenser från tredje part
      • /etc/clientlibs/<sitename>

      Definiera offlinesökvägar för PWA

  5. Välj Spara och stäng.

Platsen har konfigurerats och du kan installera den som en lokal app.

Använda din PWA-aktiverade webbplats using-pwa-enabled-site

Nu när du har konfigurerat din webbplats så att den stöder PWA kan du uppleva den själv.

  1. Få åtkomst till webbplatsen i en webbläsare som stöds.
  2. En ny ikon visas i webbläsarens adressfält, vilket anger att webbplatsen kan installeras som en lokal app.
    • Ikonen kan variera beroende på webbläsaren och webbläsaren kan även visa ett meddelande (t.ex. en banderoll eller dialogruta) som anger att det går att installera som en lokal app.
  3. Installera programmet.
  4. Appen installeras på enhetens startskärm.
  5. Öppna appen, bläddra lite och se att sidorna är tillgängliga offline.

Detaljerade alternativ detailed-options

Följande avsnitt innehåller mer information om de alternativ som är tillgängliga när du konfigurerar platsen för PWA.

Konfigurera installerbar upplevelse configure-installable-experience

Med de här inställningarna kan din webbplats bete sig som ett systemspecifikt program genom att göra den installerbar på besökarens hemskärm och tillgänglig offline.

  • Aktivera PWA - Det här är huvudväxeln för att aktivera PWA för webbplatsen.

  • Start-URL - Det här är den önskade start-URL som appen öppnas när användaren läser in det lokalt installerade programmet.

    • Detta kan vara vilken sökväg som helst i innehållsstrukturen.
    • Detta behöver inte vara roten och är ofta en dedikerad välkomstsida för programmet.
    • Om den här URL:en är relativ används manifest-URL:en som bas-URL:en för att matcha den.
    • När funktionen är tom används adressen till den webbsida som appen installerades från.
    • Vi rekommenderar att du anger ett värde.
  • Visningsläge - En PWA-aktiverad app är fortfarande en AEM webbplats som levereras via en webbläsare. Dessa visningsalternativ definierar hur webbläsaren ska döljas eller på annat sätt visas för användaren på den lokala enheten.

    • Fristående - Webbläsaren är dold för användaren och den ser ut som en intern app. Det här är standardvärdet.
      • Med det här alternativet måste appnavigering vara möjlig helt och hållet via ditt innehåll med hjälp av länkar och komponenter på webbplatsens sidor, utan att webbläsarens navigeringskontroller används.
    • Webbläsare - Webbläsaren visas som vanligt när du besöker webbplatsen.
    • Minimalt användargränssnitt - Webbläsaren är oftast dold, som ett systemspecifikt program, men grundläggande navigeringskontroller visas.
    • Helskärm - Webbläsaren är dold, som ett inbyggt program, men den återges i helskärmsläge.
      • Med det här alternativet måste appnavigering vara möjlig helt och hållet via ditt innehåll med hjälp av länkar och komponenter på webbplatsens sidor, utan att webbläsarens navigeringskontroller används.
  • Skärmorientering - Som lokal app måste PWA kunna hantera enhetsorienteringar.

    • Valfri - Appen justeras efter orienteringen för användarens enhet. Det här är standardvärdet.
    • Stående - Detta tvingar programmet att öppnas i stående layout oavsett orientering för användarens enhet.
    • Liggande - Detta tvingar programmet att öppnas i liggande format oavsett orientering för användarens enhet.
  • Temafärg - Detta definierar den färg i programmet som påverkar hur den lokala användarens operativsystem visar det inbyggda verktygsfältet och navigeringskontrollerna i användargränssnittet. Beroende på webbläsaren kan det påverka andra presentationselement i programmet.

    • Använd popup-fönstret för färgpaletter för att välja en färg.
    • Färgen kan också definieras med hex- eller RGB-värde.
  • Bakgrundsfärg - Detta definierar bakgrundsfärgen för appen, som visas när appen läses in.

    • Använd popup-fönstret för färgpaletter för att välja en färg.
    • Färgen kan också definieras med hex- eller RGB-värde.
    • I vissa webbläsare byggs en välkomstskärm automatiskt från programnamnet, bakgrundsfärgen och ikonen.
  • Ikon - Detta definierar ikonen som representerar appen på användarens enhet.

    • Ikonen måste vara en PNG-fil med storleken 512x512 pixlar.
    • Ikonen måste lagras i DAM.

Cachehantering (avancerat) offline-configuration

Dessa inställningar gör delar av den här webbplatsen tillgängliga offline och lokalt på besökarens enhet. På så sätt kan du styra cacheminnet för webbprogrammet för att optimera nätverksförfrågningar och stödja offlineupplevelser.

  • Cachelagringsstrategi och frekvens för innehållsuppdatering - Den här inställningen definierar cachningsmodellen för PWA.

    • Måttligt - Den här inställningen gäller för de flesta webbplatser och är standardvärdet.
      • Med den här inställningen läses det innehåll som först visas av användaren in från cacheminnet, och medan användaren konsumerar det innehållet valideras resten av innehållet i cacheminnet.
    • Ofta - Detta gäller webbplatser som behöver uppdateras snabbt, till exempel auktionslokaler.
      • Med den här inställningen söker programmet först efter det senaste innehållet via nätverket, och om det inte är tillgängligt återgår det till den lokala cachen.
    • Sällan - Detta gäller webbplatser som är nästan statiska, till exempel referenssidor.
      • Med den här inställningen söker programmet först efter innehållet i cachen och om det inte är tillgängligt återgår det till nätverket för att hämta det.
  • Förcachelagring av filer - De här filerna som lagras på AEM sparas i den lokala webbläsarcachen när tjänstarbetaren installerar och innan den används. Detta garanterar att webbprogrammet fungerar som det ska när det är offline.

  • Sökvägar omfattar - Nätverksbegäranden för de definierade sökvägarna fångas upp och cachelagrat innehåll returneras i enlighet med den konfigurerade Cachelagringsstrategin och frekvensen för innehållsuppdatering.

  • Cacheundantag - De här filerna cachelagras aldrig oavsett inställningarna under Filförcachelagring och Sökvägsinkluderingar.

TIP
Utvecklarteamet har troligen värdefulla synpunkter på hur offlinekonfigurationen ska konfigureras.

Begränsningar och Recommendations limitations-recommendations

Alla PWA-funktioner är inte tillgängliga för AEM Sites. Det här är några tydliga begränsningar.

  • Sidorna synkroniseras inte automatiskt eller uppdateras inte om användaren inte använder appen.

Adobe rekommenderar även följande när du implementerar PWA.

Minimera antalet resurser som ska förcachas. minimize-precache

Adobe rekommenderar att du begränsar antalet sidor som ska förcachas.

  • Bädda in bibliotek så att du kan minska antalet poster som ska hanteras vid förcachelagring.
  • Begränsa antalet bildvariationer till förcache.

Aktivera PWA efter att projektskript och formatmallar har stabiliserats. pwa-stabilized

Klientbibliotek levereras med en cacheväljare som observerar följande mönster lc-<checksumHash>-lc. Varje gång en av filerna (och beroenden) som utgör ett bibliotek ändras den här väljaren. Om du har listat ett klientbibliotek som ska cachas i förväg av servicechef och vill referera till en ny version, hämtar och uppdaterar du posten manuellt. Därför rekommenderar Adobe att du konfigurerar platsen till PWA efter att projektskripten och formatmallarna har stabiliserats.

Minimera antalet bildvariationer. minimize-variations

Bildkomponenten för AEM Core Components avgör den översta delen av den bästa återgivningen som ska hämtas. Den här mekanismen innehåller också en tidsstämpel som motsvarar den senaste ändringstiden för resursen. Den här mekanismen komplicerar konfigurationen av förcache-minnet för PWA.

När användaren konfigurerar pre-cache måste han/hon visa alla sökvägsvariationer som kan hämtas. Dessa variationer består av parametrar som kvalitet och bredd. Vi rekommenderar att du minskar antalet av dessa variationer till högst tre - liten, medel, stor. Det kan du göra via dialogrutan för innehållsprinciper i bildkomponenten.

Om den inte konfigureras noggrant kan minnes- och nätverkskonsumtionen påverka PWA prestanda negativt. Om du tänker skapa t.ex. 50 bilder framför varandra och har tre bredder per bild, måste användaren som underhåller webbplatsen ha en lista med upp till 150 poster i PWA-avsnittet för förhandscache i sidegenskaperna.

Adobe rekommenderar också att du konfigurerar webbplatsen till PWA efter att projektanvändningen av bilder har stabiliserats.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab