Del via

Bygge og fordele progressive webapplikationer

  • Artikel

Brug Power Pages-designstudio til at konfigurere din progressive webapp (PWA). Du kan aktivere eller deaktivere PWA-funktion. Du kan tilpasse PWA-indstillinger og begynde at oprette en apppakke, som evt. skal udgives til det pågældende enhedslager.

  1. Gå til Power Pages.

  2. Vælg dit websted, og vælg Rediger.

  3. Vælg Konfigurer arbejdsområde i designstudio, og vælg derefter Progressivt webprogram.

    Start progressivt webprogram fra arbejdsområdet Konfigurer.

  4. Vælg Aktivér PWA.

    Aktivér progressivt webprogram fra arbejdsområdet Konfigurer.

Mærke til din app

Du kan oprette dit eget PWA-mærke ved hjælp af tilpasningsindstillinger, der kan ændre appnavn, startside, farve og meget mere.

Bemærk

På iOS-enheder vises ikoner til PWA som miniaturer, og det tilpassede velkomstbillede vises ikke.

  1. Vælg Progressivt webapp i designstudio.

  2. Opdater følgende PWA-indstillinger for dit sted.

    Indstilling Beskrivelse
    titel Navnet på portalens PWA, der vises på mobilenheden og i applageret.
    Description Beskrivelsen af portalens PWA, der vises på mobilenheden og i applageret.
    Startside for appen Startside for webstedet, når det åbnes via PWA.
    Baggrund for velkomstbillede Baggrundsfarven for velkomstskærmen, når PWA indlæses.
    Appikon Ikon for den app, der vises på mobilenheden og i appbutikken.
    Bemærk: Understøtter .jpg-, .jpeg-, .png-formater med en maksimal overførselsstørrelse på 5 MB. Ikonets størrelse skal være 512 × 512 pixel.

    Bemærk

    Afhængigt af din browser kan det tage nogle få minutter, før du kan se ændringerne, der afspejles. Når du har tilpasset PWA, skal du vælge Forhåndsversion for at rydde cachen fra dit sted.

Definér offline-funktionsmåde

PWA tilbyder support for at få en problemfri navigationsoplevelse, når den enhed, der bruges, er offline eller ikke har forbindelse til internettet. Du kan vælge de sider i dit websted, der skal være tilgængelige offline (skrivebeskyttede), og en meddelelsesside for resten af portalfunktionerne, der ikke er aktiveret til offlineadgang.

Konfigurere offline-sider til portalen ved hjælp af PWA

  1. Vælg arbejdsområdet Konfigurer i design studio, og vælg derefter Progressivt webprogram.

  2. Vælg Definer offlinesider under Flere indstillinger.

    Valg af sider til offline-tilstand.

  3. Vælg de sider, som du vil give brugere adgang til, når de bruger PWA offline.

    Administrer offline-sider.

Bemærk

Når du konfigurerer offline-adgang PWA-sider, skal du sørge for, at du tager lagerbegrænsningerne for slutbrugerne i betragtning. Krav til lagerplads til adgang til offline-PWA overstiger det tilgængelige lager på enheden, er hele portalen utilgængelig for offline-adgang. Det anbefales, at du tester brugeroplevelsen med offlineadgang og kun cachelagrer de sider, der er mest nyttige og vigtige for brugerne. Husk, at der kun kan vises oplysninger på offlinesider. Sider, er der tilknyttet Microsoft Dataverse, som indeholder formularer, der skal udfylde eller køre forespørgsler, virker ikke, mens du er offline.

Konfigurere en offline-meddelelsesside

Når en enhed er offline, vises den side, du konfigurerer som offline-meddelelsesside, når brugere forsøger at få adgang til sider, der ikke er aktiveret til offline-adgang.

  1. Vælg arbejdsområdet Sider i designstudio.

  2. Vælg Standard-offlineside.

  3. Tilpasse siden.

Bemærk

  • Du kan ikke ændre Titel eller Delvis URL-adresse ("/standard offline-side") til offline-siden. En standardside i offline-tilstand vises for brugere, hvis offline-siden mangler.
  • Afhængigt af din browser kan det tage nogle få minutter, før du kan se ændringerne, der afspejles. Når du har tilpasset offline PWA, skal du vælge Forhåndsversion for at rydde cachen fra dit sted.

Test stedet i offline-tilstand

Når du aktiverer offline-sider, kan du nu bruge en mobilenhed i offline-tilstand og gennemse forskellige sider, der er aktiveret for offline-adgang.

  1. Gå til stedet med en webbrowser på mobilenheden i onlinetilstand.

  2. Vælg Føj til startskærmbilledet eller en lignende indstilling. Indstillingen på en Android-enhed kan f.eks. være + Føj til>App-skærm.

    Tilføjelse af PWA til startsiden på en mobilenhed.

    Bemærk

    Du kan bruge denne handling til at hente portalsider, der er aktiveret til offlinesøgning. Det kan tage et stykke tid, afhængigt af netværksbåndbredden og størrelsen på de sider, der er valgt til offlinesøgning.

  3. Deaktiver offlinetilstand i din mobilenhed.

  4. Åbn portalen fra startskærmen. Der vises en meddelelse øverst for at minde dig om, at du browser i offlinetilstand. Hvis du vælger sider, der ikke er aktiveret til offline-browsing, vises offline-meddelelsen.

    Skrivebeskyttet side i offline-tilstand for en PWA-app.Ikke forbundet til internetsiden i PWA-appen.

Distribuere din app

Du kan distribuere din app enten ved hjælp af en browser eller via en appbutik.

Distribuere din app ved hjælp af en browser

Når din portal er aktiveret som en PWA, kan brugerne fastgøre Power Pages-stedet som en app til startskærmen på deres enhed. Dette understøttes på alle platforme (Android, iOS, Chromebook og Windows) ud over alle formularfaktorer (mobil, stationære computere og tablet).

Følgende grafik illustrerer brugerens oplevelse, når du tilføjer en portal på startskærmen ved hjælp af den browser, der installerer portalen som en PWA.

En sekvens af billeder, hvor det første billede viser en portal, der er åben i en browser på en mobilenhed. Det næste billede, der viser menukommandoen Føj til startskærmbilledet. Det næste billede, brugeren bliver bedt om at installere appen. Det sidste billede viser appen med sin brugerdefinerede baggrund og branding, der fungerer som en indbygget mobilapp.

Android og iOS har hver især en anden metode til browserbaseret installation.

Distribuere din app via en appbutik

Progressive webapps kan også distribueres via app-butikker til Android, iOS og Windows. Denne distribution sker ved at oprette en apppakke og udgive appen til den pågældende appbutik. I forbindelse med oprettelse af apppakker har vi indgået partnerskab med PPLATFORMBuilder, som giver en platform til oprettelse af programpakker til forskellige appbutikker.

Hvis du vil oprette en apppakke, skal du gå til arbejdsområdet Konfigurer i design studio. Vælg Opret apppakke under Apppakke.

Åbner PWA Builder til at oprette en apppakke i portaler til Studio.

Du bliver ført til PWA Builder-websted, hvor du kan oprette en apppakke til forskellige appbutikker. Den pakke, du opretter ved hjælp af PWA Builder, indeholder:

  • En apppakke til PWA skal bruges i dens respektive appbutik.

  • Et trinvist dokument om publicering af appen.

Du kan finde flere oplysninger i PWA-ressourcehubben.

I forbindelse med iOS yder PWABuilder support til oprettelse af applagerpakken. Du kan finde flere oplysninger i -pakken til App-butikken.

I forbindelse med Windows skal du se pakken til Microsoft Store.

Andre overvejelser for Android

Til Android-platformen kan du også opdatere Android-certifikatet ved hjælp af indstillingen Opdatér Android-certifikatet.

Menupunkt i portaler til Studio til opdatering af Android-certifikat.

Opdater titlen og certifikatet til SHA-256 for at opdatere filen med de digitale aktivlinks (assetlinks.json), der beviser dit ejerskab af PWA.

Opdatering af Android-certifikatdetaljer.

Se også

Oversigt over websteder som progressive webapps
Oversigt over progressiv webapps (PWA'er)
Bygge og fordele progressive webapp (video)