Comparteix a través de

Crear i distribuir una aplicació web progressiva

  • Article

Utilitzeu l'estudi de disseny del Power Pages per configurar l'aplicació web progressiva (PWA). Podeu habilitar o inhabilitar la capacitat PWA. Podeu personalitzar la configuració de PWA i preparar-vos per crear un paquet d'aplicacions per publicar-lo als magatzems de dispositius respectius si ho desitgeu.

  1. Aneu al Power Pages.

  2. Trieu el lloc i seleccioneu Edita.

  3. Al estudi de disseny, seleccioneu l'àrea de treball Configura i seleccioneu Aplicació web progressiva.

    Inicieu una aplicació web progressiva des de l'àrea de treball Configura.

  4. Seleccioneu Habilita PWA.

    Habiliteu una aplicació web progressiva des de l'àrea de treball Configura.

Personalitzeu la marca de l'aplicació

Podeu crear la vostra pròpia PWA de marca mitjançant les opcions de personalització per canviar el nom de l'aplicació, la pàgina inicial, el color, etc.

Nota

Als dispositius iOS, les icones de PWA es mostraran com a icones en miniatura i la pantalla d'inici personalitzada no es mostrarà.

  1. A l'estudi de disseny, seleccioneu Aplicació web progressiva.

  2. Actualitzeu la configuració de PWA següent per al lloc.

    Escena Descripció
    Càrrec El nom de la PWA del portal que apareix al dispositiu mòbil i a la botiga d'aplicacions.
    Descripció La descripció de la PWA que apareix al dispositiu mòbil i a la botiga d'aplicacions.
    Pàgina inicial de l'aplicació La pàgina d'inici del lloc quan s'obre a través de la PWA.
    Fons de pantalla d’inici Color de fons de la pantalla d'inici quan es carrega el PWA.
    Icona de l’aplicació La icona de l'aplicació que apareix al dispositiu mòbil i a la botiga d'aplicacions.
    Nota: Admet formats .jpg, .jpeg .png amb una mida màxima de càrrega de 5 MB. La mida de la icona ha de ser de 512 x 512 píxels.

    Nota

    En funció del navegador, pot trigar uns instants a reflectir els canvis. Després de personalitzar el PWA, seleccioneu Versió preliminar per esborrar la memòria cau del lloc.

Definir el comportament fora de línia

PWA ofereix compatibilitat per a una experiència de navegació sense problemes quan el dispositiu que s'utilitza està fora de línia o es desconnecta d'Internet. Podeu triar les pàgines del vostre lloc que estan disponibles fora de línia (només de lectura) i una pàgina de missatges per a la resta de capacitats del portal que no estan habilitades per a l'accés fora de línia.

Configurar les pàgines fora de línia per al portal PWA

  1. A l'estudi de disseny, a l'àrea de treball Configura , seleccioneu Aplicació web progressiva.

  2. A Més configuració, seleccioneu Defineix pàgines fora de línia.

    Seleccionar pàgines per al mode fora de línia.

  3. Seleccioneu les pàgines a les que voleu permetre als usuaris accedir quan utilitzen el PWA fora de línia.

    Administració de les pàgines fora de línia

Nota

Quan configureu l'accés fora de línia per a les pàgines P GPS, assegureu-vos de tenir en compte les limitacions d'emmagatzematge dels dispositius d'usuari. Quan el requisit d'emmagatzematge per a l'accés PWA fora de línia supera l'emmagatzematge disponible al dispositiu, tot el portal no estarà disponible per a l'accés fora de línia. Es recomana provar l'experiència d'usuari d'accés fora de línia i que només es desin a la memòria cau les pàgines que seran més útils i importants per als usuaris. Recordeu que les pàgines fora de línia només poden mostrar informació; les pàgines connectades al Microsoft Dataverse que contenen formularis per emplenar o executar consultes no funcionaran mentre treballeu fora de línia.

Configurar una pàgina de missatge fora de línia

Quan un dispositiu està fora de línia, la pàgina que configureu com a pàgina de missatges fora de línia apareix quan els usuaris intenten accedir a pàgines que no estan habilitades per a l'accés fora de línia.

  1. A l'estudi de disseny, seleccioneu l'àrea de treball Pàgines.

  2. Seleccioneu Pàgina fora de línia predeterminada.

  3. Personalitzeu la pàgina.

Nota

  • No podeu canviar els camps Títol o URL parcial ("/default-offline-page") de la pàgina fora de línia. Es mostrarà als usuaris una pàgina fora de línia per defecte si falta la pàgina fora de línia.
  • En funció del navegador, pot trigar uns instants a reflectir els canvis. Després de personalitzar l'experiència del PWA fora de línia, seleccioneu Versió preliminar per esborrar la memòria cau del lloc.

Provar el lloc en mode fora de línia

Després d'habilitar les pàgines fora de línia, podeu utilitzar un dispositiu mòbil en mode fora de línia i navegar per diferents pàgines habilitades per a l'accés fora de línia.

  1. Navegueu al lloc mitjançant un navegador web al dispositiu mòbil en mode en línia.

  2. Seleccioneu Afegeix a la pantalla inicial o una opció semblant. Per exemple, en un dispositiu Android, l'opció podria ser + Afegir a la>pantalla d'Aplicació .

    Afegir el PWA a la pàgina inicial d'un dispositiu mòbil.

    Nota

    Aquesta acció descarrega pàgines del portal que s'han habilitat per a la navegació fora de línia. Això pot trigar una estona, en funció de l'amplada de banda de xarxa i la mida de les pàgines seleccionades per a la navegació fora de línia.

  3. Habilita la sincronització fora de línia per al dispositiu mòbil.

  4. Obriu el vostre portal de la pantalla d'inici. Veuràs una notificació a la part superior que et recorda que estàs navegant en mode sense connexió. Si seleccioneu pàgines que no estiguin habilitades per a la navegació fora de línia, es mostrarà el missatge fora de línia.

    Pàgina només de lectura en el mode fora de línia per a una aplicació PWA.No hi ha connexió a la pàgina d'aplicació PWA.

Distribuïu la vostra aplicació

Podeu distribuir l'aplicació des d'un navegador o a través d'una botiga d'aplicacions.

Distribuir l'aplicació mitjançant un navegador

Quan el portal està habilitat com a PWA, els usuaris poden ancorar el lloc del Power Pages com una aplicació a la pantalla inicial del seu dispositiu. Aquesta opció s'admet en totes les plataformes (Android, iOS, Chromebook i Windows), a més de tots els factors de forma (mòbil, escriptori i tauleta).

Els gràfics següents il·lustren l'experiència de l'usuari d'afegir un portal a la pantalla d'inici mitjançant el navegador que instal·la el portal com a PWA.

Una seqüència d'imatges, la primera imatge mostra un portal obert en un navegador en un dispositiu mòbil. La següent imatge mostra l'ordre de menú Afegeix a la pantalla d'inici. A la imatge següent, es demanarà a l'usuari que instal·li l'aplicació. L'última imatge mostra l'aplicació amb el seu fons i marca personalitzats, que funciona com una aplicació mòbil nativa.

Android i iOS cadascun ofereix un mètode diferent per a la instal·lació basada en navegador.

Distribuir l'aplicació a través d'una botiga d'aplicacions

Les aplicacions web progressives també es poden distribuir a través de botigues d'aplicacions per a Android iOS i Windows. Aquesta distribució es fa creant un paquet d'aplicacions i publicant l'aplicació a la botiga d'aplicacions respectiva. Per crear els paquets d'aplicacions, ens associem amb PWABuilder, que proporciona una plataforma per generar paquets d'aplicacions per a diverses botigues d'aplicacions.

Per crear un paquet d'aplicacions, aneu a Configura l'àrea de treball a l'estudi de disseny. A Paquet d'aplicacions, seleccioneu Crea el paquet d'aplicacions.

S'està obrint el PWA Builder per crear un paquet d'aplicació al Portals Studio.

Això us porta al lloc web de PWA Builder on podeu crear un paquet d'aplicacions per a diverses botigues d'aplicacions. El paquet que creeu amb el generador de PWA conté:

  • Paquet d'aplicacions per a PWA que s'utilitzarà a la seva respectiva botiga d'aplicacions.

  • Document pas a pas sobre la publicació de l'aplicació.

Per obtenir més informació, aneu al centre de recursos PWA.

Per a això iOS, PWABuilder proporciona suport per generar el paquet de la botiga d'aplicacions. Per obtenir més informació, vegeu paquet per a l'App Store.

Per a Windows, vegeu el paquet per al Microsoft Store.

Altres consideracions per a Android

Per a la Android plataforma, també pots actualitzar el Android certificat amb l'opció Actualitzar el Android certificat .

Element de menú a Studio de portals per actualitzar el certificat d'Android.

Actualitzeu el títol i l'empremta digital de l'SHA-256 del certificat digital per actualitzar el fitxer d'enllaços d'actius digitals (assetlinks.json) que demostra la propietat del vostre PWA.

Actualitzeu els detalls del certificat d'Android.

Consulteu també

Visió general dels llocs com a aplicacions
web progressives Visió general de les aplicacions web progressives (PWA)
Crear i distribuir una aplicació web progressiva (vídeo)