Yksisivuisen sovelluksen luominen ja käyttöönotto Power Pagesissa

Power Pages tukee yhden sivun sovelluskoodin (SPA) integrointia, joka on luotu seuraavan sukupolven tekoälyavusteisilla työkaluilla, kuten GitHub Copilot. Tämän ominaisuuden avulla kehittäjät voivat tuoda modernit, komponenttipohjaiset edustakokemukset Power Pages käyttämällä luonnollista kieltä koodausliittymänä.

Ohjaamalla, testaamalla ja tarkentamalla tekoälyn luomaa koodia tekijät voivat siirtää painopisteensä toistuvista toteutustehtävistä korkeamman tason orkestrointiin. Tämä lähestymistapa lisää intuitiivista ja luovaa kehitystä säilyttäen samalla yritystason laadun ja standardit.

Tässä artikkelissa opit:

• Luo ja määritä SPA-projekti Power Pages varten käyttämällä Power Platform CLI (PAC CLI).
• Koodiresurssien lataaminen Power Pages sivustoon ja sieltä pois.
• Määritä turvallinen ja ylläpidettävä projektirakenne.
• Opi spa-pohjaisten ja perinteisten Power Pages toteutuksen tärkeimmät erot.

Edellytykset

Ennen kuin aloitat, varmista, että sinulla on:

• Power Pages -ympäristö, jossa on järjestelmänvalvojan oikeudet.
• Power Platform CLI (PAC CLI) -versio 1.44.x tai uudempi asennettuna ja todennettuna.
• Power Pages -sivusto versiossa 9.7.4.x tai uudemmassa.
• Salli JavaScript-tiedostojen lataaminen Dataverse-ympäristöihin.
• Paikallinen Git-säilö, jossa on mukautettu edustaprojekti, kuten React, Angular tai Vue.

Salli JavaScript-tiedoston lataaminen

Oletusarvoisesti jotkin Dataverse-ympäristöt estävät JavaScript (.js) -tiedostojen lataamisen. Jos kohtaat virheen "Tuonti epäonnistui: liite ei ole kelvollinen tyyppi tai se on liian suuri. Sitä ei voi ladata palvelimeen tai ladata." Päivitä ympäristösi asetukset sallimaan tämä tiedostotyyppi.

Voit muuttaa ympäristön Power Platform -hallintakeskuksen asetuksia seuraavasti:

1. Kirjaudu Power Platform -hallintakeskukseen.
2. Valitse siirtymisruudussa Hallitse.
3. Valitse Hallitse-ruudussa Ympäristöt.
4. Valitse ympäristö.
5. Valitse komentopalkissa Asetukset.
6. Laajenna Tuote ja valitse sitten Yksityisyys + Suojaus.
7. Poista js osiossa tiedostotunnisteiden luettelosta.
8. Valitse Tallenna.

SPA-sivuston luominen ja käyttöönotto

Power Pages SPA-sivustoja hallitaan käyttämällä PAC CLI -komentoja upload-code-site ja download-code-site. Kun olet ladannut sivuston, se näkyy Power PagesInactive sites -luettelossa. Aktivoi sivusto, jotta se on käyttäjien käytettävissä.

SPA-sivuston lataaminen

Lataa paikallinen lähde ja käännetyt resurssit Power Pages ympäristöösi pac-sivujen upload-code-site komennolla.

Syntax

pac pages upload-code-site `
  --rootPath <local-source-folder> `
  [--compiledPath <build-output-folder>] `
  [--siteName <site-display-name>]

Parametrit

Esimerkki

pac pages upload-code-site `
  --rootPath "../your-project" `
  --compiledPath "./build" `
  --siteName "Contoso Code Site"

Jos sinulla ei ole aiemmin luotua projektia, kokeile SPA-sivustojen mallitoteutuksia käyttämällä Reactiä, Angularia ja Vueta.

Latausparametrien määrittäminen powerpages.config.json avulla

Mukauta komennon upload-code-site toimintaa sisällyttämällä powerpages.config.json tiedosto sivustosi pääkansioon. Kun tämä tiedosto on olemassa, suorita upload-code-site käyttäen vain parametria --rootPath . Komento lukee jäljellä olevat arvot määritystiedostosta. Jos annat sekä komentoriviargumentteja että konfigurointiarvoja, komentoriviargumentit ovat etusijalla.

Määrityskentät

Tarkin ja ajantasaisin kenttäviittaus löytyy kohdasta powerpages.config.json skeema. Lisää vastaava $schema ominaisuus määritystiedostoosi, jotta voit ottaa käyttöön tarkistuksen ja automaattisen täydennystoiminnon JSON-rakennetta tukevissa editoreissa.

Näyte powerpages.config.json

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

SPA-sivuston lataaminen

Lataa olemassa olevan sivuston koodi paikalliseen hakemistoon mukautusta tai varmuuskopiointia varten käyttämällä komentoa pac pages download-code-site.

Syntax

pac pages download-code-site `
  [--environment <env-url-or-guid>] `
  --path <local-target-folder> `
  --webSiteId <site-guid> `
  [--overwrite]

Parametrit

Esimerkki

pac pages download-code-site `
  --environment "https://contoso.crm.dynamics.com" `
  --path "./downloaded-site" `
  --webSiteId "11112222-bbbb-3333-cccc-4444dddd5555" `
  --overwrite

Sivuston käyttöönotto ja testaaminen

1. Siirry kohtaan Power Pages.
2. Valitse Passiiviset sivustot, etsi sivustosi ja valitse Ota takaisin käyttöön.
3. Kun sivusto on aktiivinen, tarkista käyttöönotto siirtymällä sivustosi URL-osoitteeseen.

Projektin rakenne ja määritys

Johdonmukainen projektin asettelu auttaa varmistamaan oikean lataustoiminnan.

/your-project
│
├─ src/                       ← Your source code, like React components
├─ build/                     ← Compiled assets, output of the `npm run build` command
├─ powerpages.config.json     ← Optional CLI configuration file
└─ README.md

Valinnaisen powerpages.config.json-tiedoston avulla voit mukauttaa komennon upload-code-site toimintatapaa.

Koodin jakaminen ja niputtaminen

Kun yksisivuinen sovellus kasvaa, yksittäisestä JavaScript-paketista tulee suuri ja hidas latautumaan. Nykyaikaiset koontityökalut ratkaisevat tämän ongelman koodin jakamisella. Tämä menetelmä jakaa sovelluksen pienempiin paloihin , jotka selain lataa pyydettäessä (esimerkiksi vain silloin, kun käyttäjä siirtyy tietylle reitille). Jokainen lohko lähetetään niin, että sen tiedostonimessä on sisällön hajautuslause , kuten Dashboard-BSbmIXoe.js, jotta selaimet voivat tallentaa sen välimuistiin pitkäksi aikaa ja ladata sen uudelleen vain, kun sen sisältö muuttuu.

Koodin jakaminen tuo käyttöön käyttöönottovaikeuksia, jotka koskevat vain Power Pages SPA-sivustoja: koska jokainen koontiversio tuottaa uusia hajautustiedostonimiä, toistuvat upload-code-site suoritukset jättävät vanhat hajautustiedostot sivustolle. Useiden käyttöönottojen aikana nämä orvot lohkot kertyvät sivuston web-files. bundleFilePatterns:n powerpages.config.json-kenttä on tarkoitettu niiden siivoamiseen.

Ota käyttöön koodin jakaminen

Koodin jakamisen hoitaa edustan koontityökalu, ei Power Pages, joten lähestymistapa riippuu käyttämästäsi kehyksestä ja niputtajasta. Yleisin tapa on ladata sovelluksen osat dynaamisilla tuonnilla, joita käytetään usein reitillä tai näkymätasolla niin, että jokainen osa latautuu vain, kun käyttäjä siirtyy siihen (laiska lataus).

Niputtajat, kuten Vite, webpack ja esbuild, voivat myös ryhmitellä moduulit nimetyiksi lohkoiksi eksplisiittisesti. Tarkat määritykset ovat sovelluskehyksen ja niputtajan dokumentaatiossa.

dist/assets/
├─ index-BJltBIP-.js        ← app entry
├─ index-DMwMk7hv.css       ← styles
├─ Dashboard-BSbmIXoe.js    ← lazy route chunk
├─ InvoiceList-DwjrGrAI.js  ← lazy route chunk
└─ InvoiceDetail-D3DVGkeM.js← lazy route chunk

Riippumatta siitä, minkä lähestymistavan valitset, tulos on sama, ja juuri sillä osalla on väliä käyttöönotossa: koontiversio lähettää useita tulostetiedostoja, joiden nimessä on sisällön hajautus. Koska nämä tunnisteet muuttuvat aina, kun tiedoston sisältö muuttuu, jokainen koontiversio tuottaa eri tiedostonimien joukon. Seuraavissa osioissa kerrotaan, miten voit pitää Dataverse-ympäristösi puhtaina, kun näiden nimien nimet muuttuvat.

Näin upload-code-site vanhentuneita paketteja puhdistetaan

Ennen kuin lataat koostetut resurssit, upload-code-site poistaa jokaisen sivuston web-files-hakemistossa olevan tiedoston, joka vastaa kohteessa bundleFilePatterns olevaa yleismerkkikuviota, ja lataa sitten nykyisen koontiversion. Tämä "poista sitten lataa" -toiminta pitää käyttöönotetun tiedoston samanlaisena kuin uusin käännetty tuloste sen sijaan, että se kerrostaisi jokaisen koontinäytön edellisen päälle.

Jotta puhdistus toimisi, kohteen bundleFilePatterns yleismerkkimallien on vastattava koontiversiosi lähettämiä tiedostonimiä. Niiden pitää olla tarkkoja kahdella tavalla sen mukaan, miten luot työkalujen nimet -tiedostot.

Vaihtoehto 1: Yleismerkkimallien luetteloiminen suoraan

Monet koontityökalut säilyttävät vakaan nimen etuliitteen ja muuttavat vain sisällön hajautetun sisällön, kuten index-[hash].js. Kun tulostetiedostojen nimet noudattavat tällaista ennustettavissa olevaa mallia, luettele yleismerkkimalli kullekin kohteessa bundleFilePatterns. Lisätyökaluja ei tarvita:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

Yleismerkkimalli, kuten index-*.js vastaa kyseistä tiedostoa jokaisessa koontiversiossa riippumatta tunnistemerkistä. Lisää yksi merkintä per tulostiedosto ja lisää uusi malli aina, kun koontiversiosi alkaa tuottaa uutta tulostetiedostoa.

Vaihtoehto 2: Luo yleismerkkikuvioita koonnin jälkeisen komentosarjan avulla

Käytä tätä lähestymistapaa, kun tulostetiedostojen nimet eivät noudata ennustettavaa mallia tai kun sovelluksesi tuottaa useita tiedostoja, joiden nimet muuttuvat, kun lisäät ja poistat reittejä, mikä tekee käsin ylläpidettävästä luettelosta virhe alttiina. Lyhyt komentosarja, joka suoritetaan koontiversiota käyttäen, tarkistaa käännetyn tulosteen ja kirjoittaa bundleFilePatterns uudelleen yleismerkkimallin kullekin palautetusta tiedostosta. Kun koontityökalu esimerkiksi nimeää tiedostot nimellä [name]-[hash].[ext], komentosarja pienennetään Dashboard-BSbmIXoe.js malliksi Dashboard-*.js.

scripts/postbuild.js:

#!/usr/bin/env node

/**
 * Post-build script: scans dist/assets/ and updates powerpages.config.json
 * with bundleFilePatterns that match all Vite-generated chunks.
 *
 * This ensures `pac pages upload-code-site` cleans up old hashed bundles
 * on each deploy instead of accumulating stale files.
 *
 * Usage: node scripts/postbuild.js
 * Or via npm: "postbuild": "node scripts/postbuild.js" in package.json
 */

import { readdirSync, readFileSync, writeFileSync } from 'fs'
import { join } from 'path'

const ROOT = join(import.meta.dirname, '..')
const DIST_ASSETS = join(ROOT, 'dist', 'assets')
const CONFIG_PATH = join(ROOT, 'powerpages.config.json')

// Vite output format: [name]-[hash].[ext]
// We want to extract "name" and "ext" to produce "name-*.ext" patterns
const HASH_PATTERN = /^(.+)-[A-Za-z0-9_-]{6,12}\.(js|css)$/

try {
  const files = readdirSync(DIST_ASSETS)
  const patternSet = new Set()

  for (const file of files) {
    const match = file.match(HASH_PATTERN)
    if (match) {
      const [, baseName, ext] = match
      patternSet.add(`${baseName}-*.${ext}`)
    }
  }

  const patterns = [...patternSet].sort()

  if (patterns.length === 0) {
    console.log('No hashed bundles found in dist/assets/ — skipping config update.')
    process.exit(0)
  }

  // Read current config
  const config = JSON.parse(readFileSync(CONFIG_PATH, 'utf-8'))
  const oldPatterns = config.bundleFilePatterns || []

  // Check if update is needed
  const oldSet = new Set(oldPatterns)
  const newSet = new Set(patterns)
  const changed = oldSet.size !== newSet.size || [...newSet].some(p => !oldSet.has(p))

  if (!changed) {
    console.log(`bundleFilePatterns already up-to-date (${patterns.length} patterns).`)
    process.exit(0)
  }

  // Update config
  config.bundleFilePatterns = patterns
  writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2) + '\n', 'utf-8')

  console.log(`Updated powerpages.config.json with ${patterns.length} bundle patterns:`)
  for (const p of patterns) {
    console.log(`  ${p}`)
  }
} catch (err) {
  console.error('postbuild error:', err.message)
  process.exit(1)
}

Liitä komentosarja koontiversioon, jotta se suoritetaan aina niputtajan jälkeen:

{
  "scripts": {
    "build": "tsc -b && vite build && node scripts/postbuild.js"
  }
}

Nyt käyttöönotto on kaksi komentoa, eikä sivusto koskaan kerää orpoja paloja:

npm run build
pac pages upload-code-site --rootPath .

Koontiversio powerpages.config.json heijastelee tarkkoja nykyisiä paketteja, esimerkiksi:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "Dashboard-*.js",
    "InvoiceDetail-*.js",
    "InvoiceList-*.js",
    "index-*.css",
    "index-*.js"
  ]
}

Todentaminen ja valtuutus

Power Pages SPA -sivustot käyttävät samaa security-mallia kuin perinteiset Power Pages sivustot.

Tunnistetietopalvelujen määrittäminen

1. Siirry kohtaan Power Pages.
2. Etsi sivustosi ja valitse Muokkaa.
3. ValitseSuojauksen tunnistetietopalvelut>.
4. Lisää tai määritä identity providers, kuten Microsoft Entra ID.
5. Jokaisella uudella sivustolla on automaattisesti oletuspalvelun Microsoft Entra ID.

Käyttäjäkontekstin käyttö koodissa

Hanki todennuksen metatiedot asiakasohjelmasta:

• Valtuuksien URL-osoite:

  Microsoft Entra ID valtuuta tai kirjautumisen URL-osoite on seuraava:

  https://login.windows.net/<tenantId>
  

• Etsi muiden määritettyjen tunnistetietojentarjoajien Authority URL valitsemalla Power Pages<4 />SecurityIdentity providers -määritysasetukset.

• Käyttäjän tiedot:

  window["Microsoft"].Dynamic365.Portal.User
  

React-esimerkkityönkulku

import { IconButton, Tooltip } from '@mui/material';
import {
    Login,
    Logout
} from '@mui/icons-material';
import React from 'react';
export const AuthButton = () => {
    const username = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.userName ?? "";
    const firstName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.firstName ?? "";
    const lastName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.lastName ?? "";
    const tenantId = (window as any)["Microsoft"]?.Dynamic365?.Portal?.tenant ?? "";
    const isAuthenticated = username !== "";
    const [token, setToken] = React.useState<string>("");

    React.useEffect(() => {
        const fetchAntiForgeryToken = async (): Promise<string> => {
            try {
                const tokenEndpoint = "/_layout/tokenhtml";

                const response = await fetch(tokenEndpoint, {});

                if (response.status !== 200) {
                    throw new Error(`Failed to fetch token: ${response.status}`);
                }

                const tokenResponse = await response.text();                
                const valueString = 'value="';
                const terminalString = '" />';
                const valueIndex = tokenResponse.indexOf(valueString);

                if (valueIndex === -1) {
                    throw new Error('Token not found in response');
                }

                const requestVerificationToken = tokenResponse.substring(
                    valueIndex + valueString.length,
                    tokenResponse.indexOf(terminalString, valueIndex)
                );

                return requestVerificationToken || '';
            } catch (error) {
                console.warn('[Impersonation] Failed to fetch anti-forgery token:', error);
                return '';
            }
        };

        const getToken = async () => {
            try {
                const token = await fetchAntiForgeryToken();
                setToken(token);
            } catch (error) {
                console.error('Error fetching token:', error);
            }
        };
        getToken();
    }, []);

    return (
        <div className="flex items-center gap-4">
            {isAuthenticated ? (
                <>
                    <span className="text-sm">Welcome {firstName + " " + lastName}</span>
                    <Tooltip title="Logout">
                        <IconButton color="primary" onClick={() => window.location.href = "/Account/Login/LogOff?returnUrl=%2F"}>
                            <Logout />
                        </IconButton>
                    </Tooltip>
                </>
            ) : (
                <form action="/Account/Login/ExternalLogin" method="post">
                    <input name="__RequestVerificationToken" type="hidden" value={token} />
                    <Tooltip title="Login">
                        <IconButton name="provider" type="submit" color="primary" value={`https://login.windows.net/${tenantId}/`}>
                            <Login />
                        </IconButton>
                    </Tooltip>
                </form>
            )}
        </div>
    );
};

Power Pages WWW-ohjelmointirajapintojen käyttäminen

Kehittäjät voivat Power Pages WWW-ohjelmointirajapintojen avulla ladatakseen sisältöä käyttöliittymään tai luodakseen, päivittääkseen ja poistaakseen tietueita. Ennen kuin käytät näitä ohjelmointirajapintoja, varmista, että tarvittavat verkon ohjelmointirajapinnat ovat käytössä ja että asianmukaiset taulukon käyttöoikeudet ja verkkoroolit on määritetty oikein.

// Create query to get all cards from Dataverse
const fetchCards = async () => {
    const response = await fetch("/_api/cr7ae_creditcardses");
    const data = await response.json();
    const cards = data.value;
    const returnData = [];

    // Loop through the cards and get the name and id of each card
    for (let i = 0; i < cards.length; i++) {
        const card = cards[i];
        const cardName = card.cr7ae_name;
        const cardId = card.cr7ae_creditcardsid;
        const features = card.cr7ae_features
            ?.split(',')
            .map((feature: string) => feature.trim());
        const type = card.cr7ae_type;
        const image = card.cr7ae_image;
        const category = card.cr7ae_category
            ?.split(',')
            .map((cat: string) => cat.trim());
        
        // ...additional processing/pushing to returnData...
    }

    return returnData;
};

Määritä paikallinen kehitys ottamalla käyttöön web-ohjelmointirajapinnan kutsut localhostista Microsoft Entra ID -todennuksen avulla

Kehittäjät tarvitsevat nopeampia iterointijaksoja, paikallista virheenkorjausta ja kuuman uudelleenlatauksen ominaisuuksia sovelluksia luotaessa. SPA tukee näitä työnkulkuja ottamalla käyttöön suojattuja WWW-ohjelmointirajapinnan kutsuja localhost:sta Microsoft Entra ID (Azure AD) v1 -todennuksella.

Tämän määrityksen avulla voit:

• Suorita sovelluksesi paikallisesti täyden todennustuen avulla.
• Käytä nykyaikaisia kehitystyökaluja, kuten Vite , kuumaan uudelleenlataamiseen ja nopeaan palautteeseen.
• Vältä CORS-ongelmia, kun kutsut Power Pages -web-ohjelmointirajapintoja.
• Nopeuta kehitystä ilman muutosten käyttöönottoa portaalissa.

Tämä määritys mahdollistaa SPA:n tuottavan paikallisen kehityskokemuksen, joten kehittäjät voivat luoda, testata ja todentaa nopeasti täydellisiä ohjelmointirajapinnatietojen käyttöoikeuksia ja todentamistukea.

Määritysvaiheet

1. SPA-todennuksen käyttöönotto

   1. Avaa Azure portal portaaliin rekisteröity Microsoft Entra sovellus.
   2. Ota käyttöön yhden sivun sovelluksen (SPA) todennus.
   3. Lisää localhost uudelleenohjauksen URI-osoite käyttämällä yhden sivun sovellusympäristömääritystä . Lisätietoja on kohdassa Uudelleenohjauksen URI-osoitteen lisääminen sovellukseesi.
      • Uudelleenohjauksen URI: http://localhost:<port>/.

2. Sivuston asetusten lisääminen

   • Lisää nämä sivuston asetukset Power Pagesissa:

   Authentication/BearerAuthentication/Enabled = true
   Authentication/BearerAuthentication/Protocol = OpenIdConnect
   Authentication/BearerAuthentication/Provider = AzureAD
   

3. ADAL.js käyttö todentamiseen

   • Ota käyttöön asiakaspuolen todentaminen käyttämällä ADAL.js.

   Muistio

   MSAL.js ei ole yhteensopiva, koska Power Pages käyttää Microsoft Entra v1 -päätepisteitä, kun taas MSAL käyttää v2:ta. Myöntäjän muoto vaihtelee versioiden välillä.

4. Valtuutusotsikon lisääminen

   • Sisällytä tämä otsikko kaikkiin WWW-ohjelmointirajapintapyyntöihin:

   Authorization: Bearer <id_token>
   

5. Määritä sivuston näkyvyyden arvoksi Julkinen

   • Tämän asetuksen avulla voit localhost käyttää sivustoa kehitys- ja testaustarkoituksiin.

6. Kehitysvälityspalvelimen määrittäminen

   • Jos käytät Viteä, lisää tämä koodi, jotta vite.config.js CORS:n ongelmat vältetään:

   export default defineConfig({
     plugins: [react()],
     server: {
       proxy: {
         '/_api': {
           target: 'https://site-foo.powerappsportals.com',
           changeOrigin: true,
           secure: true
         }
       }
     }
   });
   

Erot olemassa olevista Power Pages sivustoista

Seuraavassa taulukossa on yhteenveto tärkeimmistä eroista tällä ominaisuudella luotujen SPA-sivustojen ja perinteisten Power Pages sivustojen välillä:

usein kysytyt kysymykset

Mitä tukea yksikkö- ja integraatiotestaukseen on saatavilla?

Tällä hetkellä yksikkö- ja integrointitestaukselle ei ole sisäänrakennettua tukea. Tekijöiden olisi kirjoitettava ja suoritettava nämä testit paikallisesti tai CI/CD-putkissaan.

Tuetaanko Power Fx -integrointia WebAssemblyn avulla?

Tätä ominaisuutta ei tueta tällä hetkellä.

Onko lähdekoodi käytettävissä Power Pages?

Tällä hetkellä tekijät voivat luoda verkkosivustoja TypeScriptin tai GitHub Copilot Agentin avulla. Käännetyt JavaScript- ja CSS-tiedostot ovat helppokäyttöisiä, ja niitä voidaan muokata Visual Studio Code. HTML-tiedostojen suoraa ja laajamittaista muokkausta ei kuitenkaan tällä hetkellä tueta.

Voinko luoda komponentin ulkoisesti käyttämällä tätä ominaisuutta ja tuoda sen Power Pages sivustoon?

Ei, et voi tuoda ulkoisesti luotua osaa aiemmin luotuun Power Pages sivustoon tämän ominaisuuden avulla.

Voinko lisätä valmiita osia, kuten luetteloita ja lomakkeita?

Käyttövalmiiden komponenttien, kuten luetteloiden ja lomakkeiden, lisäämistä ei tällä hetkellä tueta. Voit kuitenkin luoda mukautettuja lomakkeita ja luetteloita käyttämällä React-kehystä ja verkon ohjelmointirajapintoja.

Voinko ottaa SPA-sivuston käyttöön PWA:na määritetystä työtilasta?

Ei. SPA-sivustot eivät tue edistysmielisen verkkosovelluksen (PWA) asetusta määritetyssä työtilassa. Tämä rajoitus tarkoittaa, että et voi käyttää Mobiili-osaa ottaaksesi sivuston käyttöön PWA:na. Jos haluat lisätä PWA-ominaisuuksia, kuten asennettavissa olevia sovelluskokemuksia ja offline-sivuja, ota ne käyttöön sovelluskehykskoodissasi. Voit lisätä esimerkiksi verkkosovelluksen luettelotiedoston ja palvelutyöntekijän.

Miten lähdekoodin hallinta toimii?

Kehittäjät voivat käyttää Power Platformin Git-integraatiota versionhallintaan. Kuitenkin vain käännetyt verkkotiedostot lisätään arkistoon, ei koko lähdekoodia.

Tukevatko nämä sivustot hakukoneoptimointia?

Koska SPA-sivustot on rakennettu React-kehyksellä ja käyttävät asiakaspuolen renderöintiä, SEO-tuki on rajallinen.

Mitä Power Pages suojaus- ja hallintotuen SPA-sivustot tarjoavat?

Power Pages valvoo taulukon käyttöoikeuksia ja käyttöoikeusverkkorooleja WWW-ohjelmointirajapintakutsuissa ja varmistaa, että tietojen käyttö vastaa käyttäjärooleja. Objektin window["Microsoft"].Dynamic365.Portal.User avulla voit noutaa käyttäjän perusominaisuuksia ja räätälöidä kokemuksia käyttäjäpersoonien perusteella.

Lisäksi SPA-sivustot tukevat:

• Julkisen ja yksityisen sivuston määritykset
• Hallintoasetukset, mukaan lukien anonyymin tietojen käytön hallinta
• Todennuspalvelujen määritykset

Näiden ominaisuuksien avulla voit varmistaa mukautettujen osien suojatun ja yhteensopivan integroinnin Power Pages.

Aiheeseen liittyvät tiedot

• Microsoft Power Platform CLI
• Tutorial: Microsoft Power Platform CLI:n käyttö Power Pages
• Käytä Visual Studio Code -laajennusta