Freigeben über

Behandeln von Links zu einer PWA

Eine progressive Web-App (PWA) auf dem Betriebssystem des Geräts kann Links verarbeiten, sodass die PWA beim Aktivieren einer zugeordneten URL den Start anstelle des Webbrowsers anfordern kann, um eine ansprechendere Erfahrung zu schaffen.

Diese Linkbehandlung ähnelt der Behandlung nativer Apps mit Links auf vielen Betriebssystemen.

Das Betriebssystem, auf dem Ihre PWA installiert ist, startet ihre PWA automatisch für alle Links, die auf Inhalte verweisen, die sich innerhalb des PWA-Bereichs befinden, wenn eine der folgenden Bedingungen erfüllt ist:

  • Die PWA wurde aus dem Microsoft Store unter Windows installiert.
  • Die PWA wurde mithilfe von Microsoft Edge installiert, und Microsoft Edge ist der Standardbrowser auf dem Gerät.

Es ist kein Code erforderlich, damit die automatische Linkverarbeitung funktioniert, aber Endbenutzer können die automatische Linkbehandlung deaktivieren. So deaktivieren Sie die automatische Linkverarbeitung:

  1. Navigieren Sie in Microsoft Edge zu edge://apps.

  2. Suchen Sie die PWA, für die Sie die automatische Linkbehandlung deaktivieren möchten, und klicken Sie auf Details.

  3. Klicken Sie auf der Seite PWA-Details im Abschnitt Linkbehandlung auf die Umschaltfläche.

Die edge://apps Detailseite für die PWAmp-Musikplayer-App, die zeigt, wo sich die Umschaltfläche für die Linkverarbeitung befindet.

Bereichserweiterungen ermöglichen es einer progressiven Web-App (PWA), die Navigation zu Domänen, Unterdomänen oder Pfaden zu erfassen, die nicht ihren eigenen Bereich haben. Bereichserweiterungen ermöglichen die Darstellung von Web-Apps, die auf mehreren Domänen der obersten Ebene, mehreren Unterdomänen oder mehreren Pfaden basieren, als einzelne Web-App.

Die Bereichserweiterung kann für Fälle wie PWAs nützlich sein, die die Lokalisierung mithilfe mehrerer Domänen, Unterdomänen oder Pfade behandeln.

PWA-Bereich, wenn keine Bereichserweiterungen verwendet werden

Das Manifest einer PWA definiert, auf welchen Teil der Hostingdomäne, z. B. ein bestimmter Pfad, der PWA-Bereich ist. Beispielsweise kann für den www.contoso.com Domänennamen unter dem Pfad www.contoso.com/appeine PWA definiert sein, deren Bereich auf /appfestgelegt ist.

In diesem Fall sind alle Webseiten innerhalb des www.contoso.com/app Pfads Teil des PWA-Bereichs. Wenn Sie jedoch keine Bereichserweiterungen verwenden, sind die folgenden Webseiten nicht Teil dieses PWA-Bereichs:

  • Webseiten in einer anderen Domäne, z www.contoso.co.uk. B. .
  • Webseiten in einer anderen Unterdomäne, z bar.contoso.com. B. .
  • Webseiten in einem anderen Pfad, z www.contoso.com/foo. B. .

Erweitern des Bereichs auf andere Domänen, Unterdomänen oder Pfade

Mithilfe von Bereichserweiterungen kann eine PWA andere Domänen, Unterdomänen oder Pfade umfassen. Zum Beispiel:

Eine PWA kann die folgenden Domänen der obersten Ebene umfassen:

  • contoso.com
  • contoso.co.uk
  • contoso.fr

Eine PWA kann die folgenden Unterdomänen umfassen:

  • www.contoso.com
  • bar.contoso.com

Eine PWA kann die folgenden Pfade umfassen:

  • www.contoso.com/app
  • www.contoso.com/foo

Das scope_extensions Web-App-Manifestmitglied

Das scope_extensions Web-App-Manifestmitglied ermöglicht es einer Web-App, ihren Bereich auf andere Ursprünge zu erweitern.

Diese Web-App-Manifestdatei befindet sich beispielsweise in der Domäne sample-app.comund erweitert den Bereich auf eine andere Domäne: example.com

{
  "name": "Example app",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {
      "type": "origin",
      "origin": "https://example.com"
    }
  ]
}

Die im scope_extensions Member aufgeführten Ursprünge müssen bestätigen, dass sie der Web-App zugeordnet sind, indem sie eine Konfigurationsdatei mit dem Namen hosten .well-known/web-app-origin-association. Die Konfigurationsdatei muss den Ursprung der Web-App auflisten.

Diese .well-known/web-app-origin-association Konfigurationsdatei befindet sich beispielsweise in der Domäne example.comund listet den Ursprung der Web-App als Domäne sample-app.comauf:

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

Siehe auch:

Siehe auch

MDN:

Erklärer:

  • Last updated on