Progressieve webtoepassingsfuncties inschakelen enabling-pwa
Dankzij een eenvoudige configuratie kan een auteur van inhoud nu functies voor progressieve webapps (PWA) inschakelen voor ervaringen die zijn gemaakt in AEM Sites.
- Kennis van PWA's
- Kennis van uw site en inhoudsstructuur
- Begrip van cachestrategieën
- Ondersteuning van uw ontwikkelingsteam
Inleiding introduction
Progressieve Web apps (PWAs) laat immersieve app-achtige ervaringen voor de plaatsen van AEM toe door hen toe te staan om plaatselijk op de machine van een gebruiker worden opgeslagen en offline toegankelijk zijn. Een gebruiker kan onderweg door een site bladeren, zelfs als hij een internetverbinding verliest. PWA's bieden een naadloze ervaring, zelfs als het netwerk verloren of instabiel is.
In plaats van het vereisen van om het even welke opname van de plaats, kan een inhoudsauteur PWA eigenschappen als extra lusje in de pagina eigenschappen van een plaats vormen.
- Wanneer bewaard of gepubliceerd, brengt deze configuratie een gebeurtenismanager teweeg die de duidelijke dossiers en a de dienstarbeider schrijft die de eigenschappen van PWA op de plaats toelaten.
- Er worden ook segmenttoewijzingen bijgehouden om ervoor te zorgen dat de serviceworker wordt aangeboden vanuit de hoofdmap van de toepassing, zodat inhoud die buiten de app valt, kan worden vernieuwd en offline mogelijkheden worden toegestaan.
Met PWA beschikt de gebruiker over een lokale kopie van de site, zodat hij zelfs zonder internetverbinding een app-achtige ervaring heeft.
Vereisten prerequisites
Er zijn twee vereisten voor uw projectomgeving om PWA-functies voor uw site te kunnen gebruiken:
- Componenten van de Kern van het Gebruik om uit deze eigenschap voordeel te halen
- pas uw Dispatcher regels aan om de vereiste dossiers bloot te stellen
Dit zijn technische stappen die de auteur met het ontwikkelingsteam moet coördineren. Deze stappen zijn slechts eenmaal per site vereist.
Core-componenten gebruiken adjust-components
Core Components versie 2.15.0 en hoger biedt volledige ondersteuning voor de PWA-functies van AEM-sites. Aangezien AEMaaCS altijd de nieuwste versie van de Core Components bevat, kunt u de PWA-functies ook offline gebruiken. Uw AEMaaCS-project voldoet automatisch aan deze vereiste.
Je Dispatcher aanpassen adjust-dispatcher
Met de functie PWA worden /content/<sitename>/manifest.webmanifest bestanden gegenereerd en gebruikt. Door gebrek, stelt Dispatcher dergelijke dossiers niet bloot. Om deze dossiers bloot te stellen, moet de ontwikkelaar de volgende configuratie aan uw plaatsproject toevoegen.
File location: [project directory]/dispatcher/src/conf.dispatcher.d/filters/filters.any >
# Allow webmanifest files
/0102 { /type "allow" /extension "webmanifest" /path "/content/*/manifest" }
Afhankelijk van uw project, kunt u verschillende soorten uitbreidingen aan de herschrijfregels willen omvatten. De extensie webmanifest kan handig zijn om bij het herschrijven ook een regel op te nemen die verzoeken aan /content/<projectName> verbergt en doorstuurt.
RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg|.webmanifest)$
PWA inschakelen voor uw site enabling-pwa-for-your-site
Met voldaan aan de eerste vereisten , is het voor een inhoudauteur gemakkelijk om de eigenschappen van PWA aan een plaats toe te laten. Hieronder volgt een basisoverzicht van hoe u dit kunt doen. De individuele opties worden gedetailleerd in de sectie Gedetailleerde Opties .
-
Log in bij AEM.
-
Van het belangrijkste menu, uitgezochte Navigatie > Plaatsen.
-
Selecteer uw plaatsproject en selecteer Eigenschappen of gebruik hotkey
p. -
Selecteer het Progressieve lusje van App van het Web en vorm de toepasselijke eigenschappen. U wilt ten minste:
-
Selecteer de optie laat PWA toe.
-
Bepaal Opstarten URL.
-
Upload een pictogram van 512 x 512 png naar de DAM en verwijs naar dat pictogram voor de app.
-
Configureer de paden die de serviceworker offline moet gebruiken. Typische paden zijn:
/content/<sitename>/content/experiencefragements/<sitename>/content/dam/<sitename>- Eventuele verwijzingen naar lettertypen van derden
/etc/clientlibs/<sitename>
-
-
Selecteer sparen & Sluiten.
Uw plaats wordt nu gevormd en u kunt het als lokale app installeren.
Uw PWA-site gebruiken using-pwa-enabled-site
Nu u uw plaats hebt gevormd om PWA te steunen, kunt u het voor zich ervaren.
- Heb toegang tot de plaats in a gesteunde browser .
- Er verschijnt een nieuw pictogram op de adresbalk van de browser om aan te geven dat de site kan worden geïnstalleerd als een lokale app.
- Afhankelijk van de browser kan het pictogram variëren en kan de browser ook een melding (zoals een banner of een dialoogvenster) weergeven die aangeeft dat het mogelijk is om de toepassing als een lokale app te installeren.
- Installeer de toepassing.
- De app is geïnstalleerd op het beginscherm van uw apparaat.
- Open de app, blader een beetje, en zie dat de pagina's offline beschikbaar zijn.
Gedetailleerde opties detailed-options
De volgende sectie verstrekt meer detail op de beschikbare opties wanneer vormend uw plaats voor PWA .
Installeerbare ervaring configureren configure-installable-experience
Met deze instellingen kan uw site zich gedragen als een native app door deze installeerbaar te maken op het thuisscherm van de bezoeker en offline beschikbaar te stellen.
-
laat PWA toe - dit is de belangrijkste knevel voor het toelaten van PWA voor de plaats.
-
Opstarten URL - dit is het aangewezen begin URL dat app opent wanneer de gebruiker plaatselijk geïnstalleerde app laadt.
- Dit kan elk pad in de inhoudsstructuur zijn.
- Dit hoeft niet de basis te zijn en is vaak een speciale welkomstpagina voor de app.
- Als deze URL relatief is, wordt de manifest-URL gebruikt als basis-URL om deze op te lossen.
- Als de functie leeg blijft, gebruikt deze het adres van de webpagina vanwaar de app is geïnstalleerd.
- U wordt aangeraden een waarde in te stellen.
-
wijze van de Vertoning - een PWA-Toegelaten app is nog een plaats van AEM die door browser wordt geleverd. Deze vertoningsopties bepalen hoe browser zou moeten worden verborgen of anders aan de gebruiker op het lokale apparaat worden voorgesteld.
- Zelfstandig - browser is verborgen van de gebruiker en het lijkt als inheemse app. Dit is de standaardwaarde.
- Met deze optie moet toepassingsnavigatie volledig door uw inhoud gebruikend verbindingen en componenten op de pagina's van de plaats zonder de browser navigatiecontroles mogelijk zijn.
- Browser - browser verschijnt aangezien het normaal wanneer het bezoeken van de plaats zou.
- Minimale UI - browser is meestal verborgen, als inheemse app, maar de basisnavigatie controles worden blootgesteld.
- Volledig Scherm - browser is verborgen, als inheemse app, maar op het volledige schermwijze teruggegeven.
- Met deze optie moet toepassingsnavigatie volledig door uw inhoud gebruikend verbindingen en componenten op de pagina's van de plaats zonder de browser navigatiecontroles mogelijk zijn.
- Zelfstandig - browser is verborgen van de gebruiker en het lijkt als inheemse app. Dit is de standaardwaarde.
-
de richtlijn van het Scherm - als lokale app, moet PWA weten hoe te om apparatenrichtingen te behandelen.
- om het even welk - app past aan de richtlijn van het apparaat van de gebruiker aan. Dit is de standaardwaarde.
- Portret - dit dwingt app om in portretlay-out ongeacht de richtlijn van het apparaat van de gebruiker te openen.
- Liggend - dit dwingt app om in landschaplay-out ongeacht de richtlijn van het apparaat van de gebruiker te openen.
-
kleur van het Thema - dit bepaalt de kleur van app die beïnvloedt hoe het werkende systeem van de lokale gebruiker de inheemse toolbar UI en navigatiecontroles toont. Afhankelijk van de browser kan dit invloed hebben op andere presentatie-elementen van de app.
- Selecteer een kleur met het pop-upmenu Kleurenvak.
- De kleur kan ook worden gedefinieerd door hexadecimale waarden of RGB-waarden.
-
Achtergrondkleur - dit bepaalt de achtergrondkleur van app , die wordt getoond aangezien app laadt.
- Selecteer een kleur met het pop-upmenu Kleurenvak.
- De kleur kan ook worden gedefinieerd door hexadecimale waarden of RGB-waarden.
- Bepaalde browsers bouwen automatisch een welkomstscherm van de toepassingsnaam, achtergrondkleur, en pictogram.
-
Pictogram - dit bepaalt het pictogram dat app op het apparaat van de gebruiker vertegenwoordigt.
- Het pictogram moet een png-bestand van 512x512 pixels zijn.
- Het pictogram moet worden opgeslagen in DAM .
Cachebeheer (geavanceerd) offline-configuration
Deze instellingen stellen delen van deze site offline beschikbaar en lokaal beschikbaar op het apparaat van uw bezoeker. Hierdoor kunt u de cache van de webtoepassing beheren om netwerkaanvragen te optimaliseren en offline ervaringen te ondersteunen.
-
Caching strategie en frequentie van inhoud verfrissen zich - Dit het plaatsen bepaalt het caching model voor uw PWA.
- Gematigd - Dit het plaatsen is het geval voor de meeste plaatsen en is de standaardwaarde.
- Met deze instelling wordt de inhoud die de gebruiker voor het eerst bekijkt, geladen uit de cache en terwijl de gebruiker die inhoud gebruikt, wordt de rest van de inhoud in de cache opnieuw gevalideerd.
- vaak - dit is het geval voor plaatsen die updates nodig hebben om snel zoals veilinghuizen te zijn.
- Met deze instelling zoekt de app eerst naar de meest recente inhoud via het netwerk en als deze niet beschikbaar is, wordt de lokale cache opnieuw opgehaald.
- Zelden - dit is het geval voor plaatsen die bijna statisch zoals verwijzingspagina's zijn.
- Met deze instelling zoekt de toepassing eerst naar de inhoud in de cache en als deze niet beschikbaar is, wordt de inhoud teruggezet naar het netwerk om deze op te halen.
- Gematigd - Dit het plaatsen is het geval voor de meeste plaatsen en is de standaardwaarde.
-
Dossier pre-caching - Deze die dossiers op AEM worden ontvangen worden bewaard aan het lokale browser geheime voorgeheugen wanneer de de dienstarbeider installeert en alvorens het wordt gebruikt. Dit garandeert dat de webtoepassing volledig functioneert wanneer deze offline is.
-
de uitbreidingen van Wegen - de verzoeken van het netwerk voor de bepaalde wegen worden onderschept en de caching inhoud is terugkeer in overeenstemming met de gevormde Caching strategie en de frequentie van inhoud verfrissen zich.
-
uitsluitingen van het Geheime voorgeheugen - Deze dossiers worden nooit in het voorgeheugen ondergebracht ongeacht de montages onder Dossier pre-caching en de uitbreidingen van de Weg.
Beperkingen en aanbevelingen limitations-recommendations
Niet alle PWA-functies zijn beschikbaar voor AEM Sites. Dit zijn een paar opmerkelijke beperkingen.
- Pagina's worden niet automatisch gesynchroniseerd of bijgewerkt als de gebruiker de app niet gebruikt.
Adobe raadt ook het volgende aan wanneer u PWA implementeert.
Minimaliseer het aantal middelen aan pre-geheime voorgeheugen. minimize-precache
Adobe raadt u aan het aantal pagina's te beperken tot het cachegeheugen.
- Bibliotheken insluiten zodat u het aantal te beheren items bij het in cache plaatsen kunt verminderen.
- Beperk het aantal afbeeldingsvariaties tot het aantal vooraf in de cache plaatsen.
Schakel PWA in nadat de projectscripts en -stijlpagina's zijn gestabiliseerd. pwa-stabilized
Clientbibliotheken worden geleverd met de toevoeging van een cacheselectiekader, waarbij het volgende patroon wordt weergegeven lc-<checksumHash>-lc . Telkens wanneer een van de bestanden (en afhankelijkheden) waaruit een bibliotheek bestaat, wordt gewijzigd, verandert deze kiezer. Als u een cliënt-bibliotheek vermeld die door de dienst-arbeider moet worden pre-caching en u naar een nieuwe versie wilt verwijzen, wint u manueel de ingang terug en werkt bij. Als gevolg hiervan raadt Adobe u aan uw site te configureren als PWA nadat de projectscripts en de stijlpagina's zijn gestabiliseerd.
Minimaliseer het aantal afbeeldingsvariaties. minimize-variations
De afbeeldingscomponent van de AEM Core-componenten bepaalt de voorkant van de beste uitvoering die u wilt ophalen. Dit mechanisme bevat ook een tijdstempel die overeenkomt met de laatste gewijzigde tijd van die bron. Dit mechanisme compliceert de configuratie van de PWA pre-cache.
Wanneer het vormen van pre-geheime voorgeheugen, moet de gebruiker van alle wegvariaties een lijst maken die kunnen worden gehaald. Deze variaties bestaan uit parameters zoals kwaliteit en breedte. U wordt geadviseerd het aantal van deze variaties te verminderen tot maximaal drie - klein, middelgroot, groot. U kunt dat als inhoud-beleid dialoogdoos van de Component van het Beeld doen .
Als het niet zorgvuldig wordt geconfigureerd, kan het geheugen- en netwerkgebruik de prestaties van uw PWA ernstig beïnvloeden. Als u bijvoorbeeld 50 afbeeldingen wilt vooraf instellen en drie breedten per afbeelding wilt hebben, moet de gebruiker die de site beheert, een lijst bijhouden met maximaal 150 items in de PWA-sectie voor het vooraf opslaan in cache van de pagina-eigenschappen.
Adobe raadt u ook aan uw site te configureren als PWA nadat het gebruik van afbeeldingen in het project is gestabiliseerd.