Crea e desprega unha aplicación de páxina única en Power Pages

Power Pages soporta a integración de código de aplicación de páxina única (SPA) creado con ferramentas asistidas por IA de próxima xeración, como GitHub Copilot. Esta capacidade permite aos desenvolvedores traer experiencias modernas de front-end baseadas en compoñentes en Power Pages empregando a linguaxe natural como interface de programación.

Ao guiar, probar e refinar o código xerado por IA, os creadores poden cambiar o seu foco de tarefas de implementación repetitivas a unha orquestración de nivel superior. Este enfoque permite un desenvolvemento máis intuitivo e creativo, mantendo ao mesmo tempo a calidade e estándares de nivel empresarial.

Este artigo móstrache como:

Crea e configura un proxecto SPA para Power Pages usando a CLI Power Platform (PAC CLI).
Sube e descarga activos de código desde e desde o teu sitio de Power Pages.
Configurar unha estrutura de proxecto segura e mantible.
Aprende as principais diferenzas entre as implementacións baseadas en SPA e as tradicionais de Power Pages.

Nota

Un sitio SPA é un sitio de Power Pages que se executa integramente no navegador do usuario (renderizado do lado do cliente). Ao contrario dos sitios tradicionais de Power Pages, xestionas os sitios SPA só mediante código fonte e ferramentas de interface de liña de comandos (CLI).
<>integración Git de Power Platform non está soportada para sitios web de Single-Page Aplicacións (SPA) en Power Pages.

Requisitos previos

Antes de comezar, asegúrate de ter:

Un ambiente Power Pages con privilexios admin.
Power Platform CLI (PAC CLI) versión 1.44.x ou posterior instalada e autenticada.
Un sitio de Power Pages na versión 9.7.4.x ou posterior.
Permitir a subida de ficheiros JavaScript en contornas Dataverse.
Un repositorio Git local co teu proxecto front-end personalizado, como React, Angular ou Vue.

Permitir subidas de ficheiros JavaScript

Por defecto, algúns entornos Dataverse bloquean a subida de ficheiros JavaScript(.js). Se atopas o erro "Importación fallida: O anexo ou non é un tipo válido ou é demasiado grande. Non se pode subir nin descargar.", actualiza a configuración do teu entorno para permitir este tipo de ficheiro.

Para axustar a configuración no Centro de administración dun ambiente, siga estes pasos: Power Platform

Inicie sesión no Centro de administración de Power Platform.
No panel de navegación, selecciona Xestionar.
No panel Xestionar , seleccione Entornos.
Seleccione un ambiente.
Na barra de comandos, seleccione Configuración.
Expande Produto e, a seguir, selecciona Privacidade + Seguridade.
Na sección de Anexos Bloqueados , elimine js da lista de extensións de ficheiro.
Seleccione Gardar.

Crear e despregar un sitio SPA

Power Pages sitios SPA xestionanse usando os comandos PAC CLI upload-code-site e download-code-site. Despois de subir un sitio, aparece en Power Pages na lista Sitios inactivos. Activa o sitio para que estea dispoñible para os usuarios.

Cargar un sitio SPA

Usa o comando pac pages upload-code-site para subir o teu código fonte local e os recursos compilados ao teu entorno Power Pages.

Sintaxe

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

Parámetros

Parámetro	Alias	Necesario	Descripción
`--rootPath`	`-rp`	Si	Carpeta local que contén os ficheiros fonte do teu sitio
`--compiledPath`	`-cp`	Non	Ruta aos recursos compilados, como React `build`
`--siteName`	`-sn`	Non	Nome de visualización para o teu sitio Power Pages

Exemplo

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

Se non tes un proxecto existente, proba as implementacións de exemplo de sitios SPA usando React, Angular e Vue.

Definición de parámetros de subida con `powerpages.config.json`

Personaliza o comportamento do upload-code-site comando incluíndo un powerpages.config.json ficheiro na carpeta raíz do teu sitio. Cando este ficheiro estea presente, executa upload-code-site só co --rootPath parámetro. O comando le os valores restantes do ficheiro de configuración. Se proporcionas tanto argumentos da liña de comandos como valores de configuración, os argumentos da liña de comandos teñen prioridade.

Campos de configuración

Campo	Tipo	Necesario	Descripción
`siteName`	cadea	Si	Nome visual do sitio Power Pages.
`compiledPath`	cadea	Si	Ruta ao directorio de saída compilado (por exemplo, o cartafol Vite `dist` ou React `build` ), relativo a `powerpages.config.json`.
`defaultLandingPage`	cadea	Si	A páxina HTML servida cando se abre a raíz do sitio, en relación con `compiledPath` (normalmente `index.html`).
`bundleFilePatterns`	corda[editar \| editar a fonte]	Non	Unha lista de patróns comodín que identifican ficheiros nos sitios `web-files` que a CLI elimina antes de subir a nova versión. Usa este campo para limpar paquetes antigos, con hash de contido, para que os activos antigos non se acumulen no sitio. Consulta división de código e limpeza de paquetes.
`includeSource`	boolean	Non	Cando `true`, o comando carga o teu código fonte ademais dos recursos compilados. Por defecto é `false`.
`sourceExcludePatterns`	corda[editar \| editar a fonte]	Non	Patróns comodín para que os ficheiros fonte os exclúan da subida. Aplícase só cando `includeSource` é `true` (por exemplo, para saltar `node_modules` arquivos ou de entorno local).

Para a referencia de campo máis precisa e up-todata, véxase o powerpages.config.json esquema. Engade a propiedade de coincidencia $schema ao teu ficheiro de configuración para habilitar a validación e o autocompletado en editores que soportan JSON Schema.

Exemplo `powerpages.config.json`

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

Descargar un sitio web de SPA

Usa o comando pac pages download-code-site para descargar o código dun sitio existente a un directorio local para editalo ou facer unha copia de seguridade.

Sintaxe

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

Parámetros

Parámetro	Alias	Necesario	Descripción
`--environment`	`-env`	Non	Dataverse ambiente (GUID ou URL completo). Predeterminado para o teu perfil de autenticación activo
`--path`	`-p`	Si	Directorio local para descargar o código do sitio
`--webSiteId`	`-id`	Si	Rexistro web GUID do sitio Power Pages SPA
`--overwrite`	`-o`	Non	Sobrescribir os ficheiros existentes no directorio de destino se existen

Exemplo

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

Activa e proba o teu sitio

Vai a Power Pages.
Selecciona Sitios inactivos, busca o teu sitio e selecciona Reactivar.
Cando o sitio estea activo, vaia ao URL do sitio para comprobar a implementación.

Suxestión

Calquera comando posterior upload-code-site actualiza automaticamente o sitio activo.

Estrutura e configuración do proxecto

Un deseño coherente do proxecto axuda a garantir un comportamento de carga correcto.

/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

Usa o ficheiro opcional powerpages.config.json para personalizar o funcionamento do comando upload-code-site .

División de código e limpeza de paquetes

A medida que unha aplicación de páxina única medra, un único paquete JavaScript faise grande e lento de cargar. As ferramentas modernas de compilación resolven este problema coa división de código. Esta técnica divide a aplicación en partes máis pequenas que o navegador descarga baixo demanda (por exemplo, só cando o usuario navega por unha ruta específica). Cada fragmento emítese cun hash de contido no nome do seu ficheiro, como Dashboard-BSbmIXoe.js, polo que os navegadores poden almacenalo en caché durante longos períodos e descargalo de novo só cando o seu contido cambia.

A división de código introduce unha consideración de despregamento única para Power Pages sitios SPA: como cada compilación produce novos nomes de ficheiros hashados, as repetidas execucións upload-code-site deixarían os ficheiros hashados antigos no sitio. Ao longo de moitos despregues, estes fragmentos orfos acumúlanse no web-filessitio . O bundleFilePatterns campo powerpages.config.json existe para limpalos.

Activar a división de código

A división de código é xestionada pola túa ferramenta de compilación front-end, non por Power Pages, así que o enfoque depende do framework e do bundler que uses. A técnica máis común é cargar partes da aplicación con importacións dinámicas, a miúdo aplicadas a nivel de ruta ou vista para que cada sección só se descargue cando un usuario navegue ata ela (carga preguizosa).

Agrupadores como Vite, webpack e esbuild tamén poden agrupar módulos en bloques nomeados de forma explícita. Para a configuración exacta, consulta a documentación do teu framework e do bundler.

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

Calquera que sexa o enfoque que escollas, o resultado é o mesmo, e é a parte que importa para o despregamento: a compilación emite múltiples ficheiros de saída, cada un cun hash de contido no seu nome. Como eses hashes cambian cada vez que cambia o contido dun ficheiro, cada compilación produce un conxunto diferente de nomes de ficheiro. As seguintes seccións explican como manter limpos os teus entornos Dataverse a medida que cambian eses nomes.

Como `upload-code-site` limpa os feixes rancio

Antes de subir os teus recursos compilados, upload-code-site elimina todos os ficheiros do sitio web-files que coincidan cun patrón comodín en bundleFilePatterns, e logo sube a versión actual. Este comportamento de eliminar e logo subir mantén o conxunto de ficheiros despregados idéntico ao teu último resultado compilado en lugar de superpoñer cada compilación sobre a anterior.

Para que a limpeza funcione, os patróns comodín deben bundleFilePatterns coincidir cos nomes de ficheiros que emite a túa compilación. Hai dúas formas de mantelos precisos, dependendo de como a túa ferramenta de construción nomee os arquivos.

Opción 1: Listar os patróns comodíns directamente

Moitas ferramentas de compilación manteñen un prefixo de nome estable e só cambian o hash do contido, como index-[hash].js. Cando os nomes dos teus ficheiros de saída seguen un patrón previsible como este, lista un patrón comodín para cada un en bundleFilePatterns. Non se necesitan ferramentas adicionais:

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

Un patrón comodín como index-*.js coincide con ese arquivo en cada compilación, independentemente do hash. Engade unha entrada por ficheiro de saída e engade un novo patrón cada vez que a túa compilación comece a producir un novo ficheiro de saída.

Opción 2: Xerar patróns comodín cun script post-compilación

Usa este enfoque cando os nomes dos teus ficheiros de saída non seguen un patrón previsible, ou cando a túa aplicación xera moitos ficheiros cuxos nomes cambian ao engadir e eliminar rutas, o que fai que unha lista mantida a man sexa propensa a erros. Un script curto que se executa despois da compilación escanea a saída compilada e reescribe bundleFilePatterns cun patrón comodín para cada ficheiro emitido. Por exemplo, cando unha ferramenta de compilación nomea ficheiros como [name]-[hash].[ext], o script redúcese Dashboard-BSbmIXoe.js ao patrón 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)
}

Conecta o script á túa compilación para que sempre se execute despois do bundler:

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

Agora un despregamento son dous comandos, e o sitio nunca acumula fragmentos orfos:

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

Despois da construción, powerpages.config.json reflicte os paquetes exactos de corrente, por exemplo:

{
  "$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"
  ]
}

Autenticación e autorización

Power Pages sitios SPA usan o mesmo modelo seguridade que os sitios tradicionais de Power Pages.

Configurar provedores de identidade

Vai a Power Pages.
Atopa o teu sitio e selecciona Editar.
Seleccioneos provedores de identidade>.
Engade ou configura provedores de identidade, como Microsoft Entra ID.
Cada novo sitio ten automaticamente un provedor predeterminado de Microsoft Entra ID.

Acceder ao contexto do usuario no código

Obter metadatos de autenticación no cliente:

URL da autoridade:

A autoridade ou URL de inicio de sesión para Microsoft Entra ID é:
```
https://login.windows.net/<tenantId>
```
Atopa a URL Authority para outros provedores de identidade configurados indo a Power Pages><your site>>Security>Identity providers> configuración.

Detalles do usuario:

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

Fluxo de reacción da mostra

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>
    );
};

Usa as APIs web de Power Pages

Os desenvolvedores poden usar APIs web Power Pages para cargar contido na interface ou para crear, actualizar e eliminar rexistros. Antes de usar estas APIs, asegúrate de que as APIs web requiridas estean activadas e que os permisos e roles web apropiados estean correctamente configurados.


// 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;
};

Configurar o desenvolvemento local habilitando chamadas á API web desde localhost usando autenticación Microsoft Entra ID

Os desenvolvedores necesitan ciclos de iteración máis rápidos, depuración local e capacidades de recarga en quente ao construír aplicacións. SPA soporta estes fluxos de traballo permitindo chamadas seguras á API web desde localhost usando autenticación Microsoft Entra ID (Azure AD) v1.

Esta configuración permite:

Executa a túa aplicación localmente con soporte de autenticación completo.
Use ferramentas de desenvolvemento modernas como Vite para recarga en quente e retroalimentación rápida.
Evita problemas de CORS ao chamar APIs web de Power Pages.
Acelerar o desenvolvemento sen implementar cambios no portal.

Esta configuración permite unha experiencia produtiva de desenvolvemento local para SPA, polo que os desenvolvedores poden construír, probar e iterar rapidamente con acceso completo á API e soporte de autenticación.

Importante

Usa só os puntos finais Microsoft Entra v1 para autenticación.
A autenticación portadora só se admite nas versións 9.7.6.6 ou posteriores do portal.
Aplicar estas configuracións só en contornas de desenvolvemento.

Pasos de configuración

Activar a autenticación SPA
1. No portal Azure, abre a aplicación Microsoft Entra rexistrada no teu portal.
2. Activar a autenticación de aplicación dunha soa páxina (SPA).
3. Engade localhost como URI de redirección usando a configuración de plataforma de aplicación de páxina única . Para máis información, consulta Como engadir un URI de redirección na túa aplicación.
  - URI de redirección: http://localhost:<port>/.

Engadir a configuración do sitio

Engade estas configuracións sitio en Power Pages:

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

Usar ADAL.js para autenticación
- Implementa a autenticación do lado do cliente usando ADAL.js.
Nota

MSAL.js non é compatible porque Power Pages usa Microsoft Entra puntos finais v1, mentres que MSAL usa v2. O formato do emisor difire entre as versións.
Engadir a cabeceira de autorización
- Inclúe esta cabeceira en todas as solicitudes da API web:
```
Authorization: Bearer <id_token>
```
Establecer a visibilidade do sitio web como público
- Esta configuración permite localhost acceder ao sitio para fins de desenvolvemento e probas.

Configurar o proxy de desenvolvemento

Se usas Vite, engade este código para vite.config.js evitar problemas de CORS:

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

Diferenzas cos sitios existentes de Power Pages

A seguinte táboa resume as diferenzas clave entre os sitios SPA creados con esta función e os sitios tradicionais de Power Pages:

Funcionalidade	Comportamento do sitio SPA
Actualización do lado do servidor	Sempre devolve a páxina raíz do sitio, e o router do lado do cliente renderiza as subrutas.
Conflitos de rutas	As rutas do lado do cliente teñen prioridade e unha actualización dura volve á raíz.
Espazo de traballo da páxina	O espazo de traballo das páxinas non é compatible. Usar o enrutamento do cliente e as páxinas do sitio do cliente. Para a seguranza a nivel de páxina, comproba os roles web asignados co obxecto de usuario global e renderiza a interface de usuario de forma condicional.
Espazo de traballo de estilo	Non se admite a aplicación de estilos co espazo de traballo de estilos . Usa o estilo do teu framework, como CSS, CSS-in-JSou clases de utilidade.
Localización	Soporte nun só idioma. Implementar a carga de recursos no lado do cliente.
Modelos líquidos	Non se admiten os modelos Liquid code nin Liquid. Accede aos datos usando o motor de plantillas e as APIs web do teu framework.

FAQ

Que soporte hai dispoñible para as probas unitarias e de integración?

Actualmente, non hai soporte integrado para probas unitarias e de integración. Os creadores deberían escribir e executar estas probas localmente ou dentro das súas canles de CI/CD.

Hai soporte para a Power Fx integración usando WebAssembly?

Esta funcionalidade non é compatible actualmente.

¿Está dispoñible o código fonte en Power Pages?

Actualmente, os creadores poden crear sitios web usando TypeScript ou GitHub Copilot Agent. Os ficheiros JavaScript e CSS compilados son accesibles e poden editarse en Visual Studio Code. Non obstante, a edición directa e extensa de ficheiros HTML non é compatible actualmente.

¿Podo crear un compoñente externamente usando esta función e levalo a un sitio de Power Pages?

Non, non podes levar un compoñente xerado externamente a un sitio de Power Pages existente usando esta función.

Podo engadir compoñentes preconfigurados como listas e formularios?

Actualmente non se admite engadir compoñentes preconfigurados como listas e formularios. Con todo, podes construír formularios e listas personalizados usando o marco React e as APIs web.

¿Podo activar un sitio SPA como PWA desde o espazo de traballo de configuración?

Non. Os sitios SPA non soportan a configuración de aplicación web progresiva (PWA) no espazo de traballo de configuración. Esta limitación significa que non podes usar a sección Móbil para habilitar un sitio como PWA. Para engadir capacidades de PWA, como experiencias instalables de aplicacións e páxinas sen conexión, implévaas no teu código do framework. Por exemplo, engade un manifesto e traballador de servizo dunha aplicación web.

Como funciona o control de código fonte?

Os desenvolvedores poden usar a integración de Git para o control de código fonte. Power Platform Non obstante, só se engaden ao repositorio os ficheiros web compilados, non o código fonte completo.

Estes sitios web admiten SEO?

Dado que os sitios SPA están construídos co framework React e usan renderización no lado do cliente, a compatibilidade con SEO é limitada.

Que soporte de seguridade e gobernanza de Power Pages ofrecen os sitios SPA?

Power Pages aplica permisos de táboas e roles web de seguridade nas chamadas á API web, asegurando que o acceso aos datos se alinea cos roles do usuario. Usa o obxecto window["Microsoft"].Dynamic365.Portal.User para recuperar propiedades básicas do usuario e personalizar as experiencias en función das características do usuario.

Ademais, os sitios SPA admiten:

Configuracións de sitios públicos e privados
Configuración de gobernanza, incluído o control sobre o acceso anónimo a datos
Configuracións do provedor de autenticación

Estas funcións axudan a garantir unha integración segura e conforme dos compoñentes personalizados dentro de Power Pages.

Comentarios

Resultoulle útil esta páxina?

Última actualización o 2026-07-21

Crea e desprega unha aplicación de páxina única en Power Pages

Requisitos previos

Permitir subidas de ficheiros JavaScript

Crear e despregar un sitio SPA

Cargar un sitio SPA

Sintaxe

Parámetros

Exemplo

Definición de parámetros de subida con powerpages.config.json

Campos de configuración

Exemplo powerpages.config.json

Descargar un sitio web de SPA

Sintaxe

Parámetros

Exemplo

Activa e proba o teu sitio

Estrutura e configuración do proxecto

División de código e limpeza de paquetes

Activar a división de código

Como upload-code-site limpa os feixes rancio

Opción 1: Listar os patróns comodíns directamente

Opción 2: Xerar patróns comodín cun script post-compilación

Autenticación e autorización

Configurar provedores de identidade

Acceder ao contexto do usuario no código

Fluxo de reacción da mostra

Usa as APIs web de Power Pages

Configurar o desenvolvemento local habilitando chamadas á API web desde localhost usando autenticación Microsoft Entra ID

Pasos de configuración

Diferenzas cos sitios existentes de Power Pages

FAQ

Que soporte hai dispoñible para as probas unitarias e de integración?

Hai soporte para a Power Fx integración usando WebAssembly?

¿Está dispoñible o código fonte en Power Pages?

¿Podo crear un compoñente externamente usando esta función e levalo a un sitio de Power Pages?

Podo engadir compoñentes preconfigurados como listas e formularios?

¿Podo activar un sitio SPA como PWA desde o espazo de traballo de configuración?

Como funciona o control de código fonte?

Estes sitios web admiten SEO?

Que soporte de seguridade e gobernanza de Power Pages ofrecen os sitios SPA?

Información relacionada

Comentarios

Recursos adicionais

Definición de parámetros de subida con `powerpages.config.json`

Exemplo `powerpages.config.json`

Como `upload-code-site` limpa os feixes rancio