Erstellen von PWAs für die Randleiste in Microsoft Edge

Artikel
02/27/2024

Progressive Web-Apps (PWAs) können an die Randleiste in Microsoft Edge angeheftet werden.

Die Randleiste in Microsoft Edge ermöglicht Benutzern den einfachen Zugriff auf beliebte Websites und Hilfsprogramme neben ihren Browserregisterkarten. Der Inhalt auf der Randleiste erweitert die primäre Aufgabe des Benutzers, indem er das parallele Browsen ermöglicht und die Notwendigkeit zum Wechseln von Kontexten zwischen Browserregisterkarten minimiert.

Durch die Signalisierung der Absicht, an die Randleiste angeheftet zu werden, erhält Ihr PWA die folgenden Vorteile:

Ihre PWA kann im Microsoft Edge-Randleistenspeicher höher gestuft werden.
Ihre PWA kann erkennen, ob sie auf der Microsoft Edge-Randleiste ausgeführt wird oder nicht.
Ihr PWA definiert einen eigenen Stil und ein eigenes Layout, um eine benutzerfreundliche Randleiste zu ermöglichen.

Um Ihre PWA für das Anheften an die Randleiste in Microsoft Edge vorzubereiten, verwenden Sie den edge_side_panel Manifestmember:

Stellen Sie sicher, dass Ihre PWA über eine Web-App-Manifestdatei verfügt, die mindestens die nameMember , short_name, descriptionund icons enthält.

Weitere Informationen finden Sie unter Verwenden eines Web-App-Manifests zum Integrieren einer progressiven Web-App in das Betriebssystem.

Fügen Sie das edge_side_panel Mitglied zu Ihrem Web-App-Manifest hinzu. Beispiel:

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {}
}

Die Randleiste in Microsoft Edge hat eine standardmäßige Mindestbreite von 376 Pixeln und kann von Benutzern geändert werden. Daher sollte das Layout Ihrer App die Mindestbreite von 376 Pixeln unterstützen und reaktionsfähig sein.

Beim Erstellen Ihrer App können Sie testen, ob das Layout der App verwendet werden kann, wenn sie schmal ist, und sicherstellen, dass das Design mit unterschiedlichen Breiten reagiert, indem Sie das Tool Geräteemulation in Microsoft Edge DevTools verwenden. Weitere Informationen finden Sie unter Überprüfen, ob das Webseitenlayout verwendet werden kann, wenn es schmal ist.

Wenn das Layout Ihrer App die Mindestbreite von 376 Pixeln nicht unterstützen kann, können Sie ihre bevorzugte Breite mithilfe der preferred_width -Eigenschaft in Ihrem Web-App-Manifest definieren. Beispiel:

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

Wenn Sie eine bevorzugte Breite im Manifest Ihrer App definieren, geschieht Folgendes:

Wenn Ihre App in der Randleiste geöffnet wird, wird die Größe der Randleiste automatisch auf ihre bevorzugte Breite geändert.
Benutzer können die Größe der Randleiste ändern, um sie größer als Ihre bevorzugte Breite oder kleiner auf die Mindestbreite von 376 Pixeln zu machen.

Einer der wichtigsten Vorteile des Erstellens einer App als PWA besteht darin, dass sich Ihre App aus einer Codebasis an alle Geräte und Betriebssysteme anpasst, unabhängig von ihren Funktionen und Bildschirmgrößen.

Das edge_side_panel Manifestmitglied macht Ihre App als eigenständige App installierbar und ermöglicht das Anheften Ihrer App an die Randleiste in Microsoft Edge.

Wenn Sie jedoch lieber eine App erstellen möchten, die nur an die Randleiste angeheftet, aber nicht als eigenständige App installiert werden kann, legen Sie den Wert des display Members auf browserfest, wie unten gezeigt (oder lassen Sie das display Element aus Ihrem Web-App-Manifest aus):

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "browser",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

Die Erkennung, wann Ihre App in der Randleiste ausgeführt wird, kann hilfreich sein, um Ihren Benutzern die bestmögliche Benutzererfahrung zu bieten, wenn Ihre App in diesem Browserbereich ausgeführt wird.

Sie können erkennen, wann Ihre App in der Randleiste ausgeführt wird, indem Sie User-Agent Clienthinweise verwenden. Weitere Informationen zu User-Agent Clienthinweisen finden Sie unter Erkennen von Microsoft Edge über Ihre Website.

Führen Sie eine der folgenden Schritte aus, um zu ermitteln, wann Ihre App in der Randleiste ausgeführt wird:

Lesen Sie auf Ihrem Webserver den HTTPS-Anforderungsheader Sec-CH-UA , und suchen Sie nach der Edge Side Panel Marke. Beispiel:
```
Sec-CH-UA: "Microsoft Edge";v="112", "Edge Side Panel";v="1", "Placeholder;Browser Brand";v="99"
```

Oder verwenden Sie im Browser die navigator.userAgentData JavaScript-API, und lesen Sie den Wert der brands Eigenschaft. Beispiel:

const brands = navigator.userAgentData.brands;
const sidebarBrandInfo = brands.find(b => b.brand === "Edge Side Panel");
if (sidebarBrandInfo) {
  console.log(sidebarBrandInfo); // { brand: "Edge Side Panel", version: "1" }
} else {
  console.log("App is not running in the Microsoft Edge sidebar");
}

Um zu ermitteln, ob Ihre App auf der Randleiste ausgeführt wird, können Sie auch die Benutzer-Agent-Zeichenfolge verwenden.

Hinweis: Es wird dringend empfohlen, Clienthinweise des Benutzer-Agents anstelle der Benutzer-Agent-Zeichenfolge zu verwenden. Die Benutzer-Agent-Zeichenfolge ist ein veralteter Mechanismus für die Browsererkennung und weist Probleme mit der Websitekompatibilität auf.

Wenn Sie in Ihrer App keine Clienthinweise für den Benutzer-Agent verwenden können, suchen Sie Edge Side Panel in der Benutzer-Agent-Zeichenfolge nach. Hier sind einige Beispiele für Benutzer-Agent-Zeichenfolgen, die den Edge Side Panel Wert enthalten:

User-Agent: ... (Edge Side Panel)...
User-Agent: ... (..., Edge Side Panel)...
User-Agent: ... (Edge Side Panel, ...)...

Beziehung zu Ihrer mobilen App

Angenommen, Sie erstellen eine Desktopvariante Ihrer App und eine mobile Variante Ihrer App. In diesem Szenario wird die Desktopvariante verwendet, wenn Ihre App an die Randleiste angeheftet ist. Standardmäßig erhalten Apps auf der Randleiste, die das edge_side_panel Manifestmitglied verwenden, den Clienthinweis für den Microsoft Edge-Desktopbenutzer-Agent:

Sec-CH-UA-Mobile: ?0

Wie unter Anpassen ihrer App an die minimale Randleistenbreite erläutert, empfehlen wir, das Layout Ihrer App reaktionsfähig zu machen, damit sie sich mithilfe einer einzigen Codebasis an mehrere Formfaktoren anpassen kann.

Sie können jedoch die Edge Side Panel Clienthinweismarke des Benutzer-Agents verwenden, um die mobile Variante Ihrer App in der Microsoft Edge-Randleiste wiederzuverwenden.

Befolgen Sie diese Empfehlungen, wenn Sie eine mobile Variante Ihrer App in der Randleiste verwenden:

Entfernen Sie alle "In App öffnen"-Meldungen, die Benutzer anweisen, Ihre App aus einem App Store herunterzuladen.
Testen Sie die Barrierefreiheit und Benutzerfreundlichkeit Ihrer App mit allen Eingabemethoden: Maus, Tastatur und Toucheingabe. Informationen zum Testen der Barrierefreiheit Ihrer App finden Sie unter Barrierefreiheitstests.

Demo-App

PWAmp ist eine PWA-Demoanwendung für Musikplayer, die an die Randleiste in Microsoft Edge angeheftet werden kann. So testen Sie PWAmp als Randleisten-App:

Öffnen Sie Microsoft Edge, und stellen Sie sicher, dass die Randleiste angezeigt wird. Wenn die Randleiste nicht angezeigt wird, wechseln Sie zu edge://settings/sidebar , und aktivieren Sie dann die Umschaltfläche Seitenleiste immer anzeigen :
Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu PWAmp . Sie müssen die App nicht installieren.
Öffnen Sie die Randleiste, klicken Sie auf Anpassen, und klicken Sie dann auf In Randleiste öffnen:

Die PWAmp-Musikplayer-App wird in der Randleiste angezeigt.
Klicken Sie auf das PWAmp-Symbol in der Randleiste, um die App zu öffnen und zusammen mit Ihren anderen Registerkarten zu verwenden:

Der Quellcode für die PWAmp-Demo-App enthält Folgendes, um die Microsoft Edge-Randleiste zu unterstützen:

Das edge_side_panel Element in der manifest.json-Datei .
Die isSidebarPWA Variable, die die navigator.userAgentData JavaScript-API in der app.js-Datei verwendet.

Den gesamten PWAmp Demo-Quellcode finden Sie unter MicrosoftEdge / Demos > pwamp. Informationen zum lokalen Herunterladen des Quellcodes finden Sie unter Herunterladen oder Klonen des Demos-Repositorys unter Beispielcode für DevTools.

Feedback geben

Das Microsoft Edge-Team begrüßt Ihr Feedback zu diesem Feature. Lesen Sie den Side Panel Explainer im Microsoft Edge Web Platform Explainer-Repository, und hinterlassen Sie Feedback, indem Sie ein neues Problem im Repository erstellen oder nach vorhandenen Problemen suchen und vorhandenen Unterhaltungen beitreten.

Aktivieren der Unterstützung der Seitenleiste in Ihrer PWA

Anpassen Ihrer App an die minimale Randleistenbreite

Erstellen einer Nur-Randleisten-App

Erkennen der Verwendung in der Randleiste

Beziehung zu Ihrer mobilen App

Demo-App

Feedback geben

Zusätzliche Ressourcen