Progressive Web Apps on Windows OverviewProgressive Web Apps on Windows overview

Progressive Web Apps (PWAs) bieten Zugriff auf offene Webtechnologien für die plattformübergreifende Interoperabilität und bieten Ihren Benutzern eine systemeigene, app- like-Erfahrung, die für ihre Geräte angepasst ist.Progressive Web Apps (PWAs) provide access to open web technologies for cross-platform interoperability and provide your users with a native, app-like experience customized for their devices. PWAs sind Websites, die schrittweise erweitert werden, um wie systemeigene Apps auf unterstützenden Plattformen zu funktionieren.PWAs are websites that are progressively enhanced to function like native apps on supporting platforms. Die Eigenschaften einer PWA vereinen das Beste aus Web- und nativen Apps.The qualities of a PWA combine the best of the web and native apps.

Aus Websuchergebnissen und unterstützenden App-StoresFrom web search results and supporting app stores

Anheften und Starten vom Startbildschirm, Startmenü, Taskleiste und so weiterPin and launch from the home screen, Start Menu, Taskbar, and so on

Senden von Pushbenachrichtigungen, auch wenn die App nicht aktiv istSend push notifications, even when the app is not active

Funktioniert offline und unter Bedingungen mit geringem NetzwerkWorks offline and in low-network conditions

Die Benutzererfahrung wird mit den Gerätefunktionen nach oben (oder nach unten) skaliert.Experience scales up (or down) with device capabilities

Bietet einen sicheren HTTPS-Endpunkt und andere BenutzerschutzmechanismenProvides a secure HTTPS endpoint and other user safeguards

 

 

Passt sich an die Bildschirmgröße oder Ausrichtung und Eingabemethode des Benutzers an.Adapts to the user's screen size or orientation and input method

Freigeben und Starten über einen StandardlinkShare and launch from a standard hyperlink

 

Erstellen Sie (oder konvertieren) Ihre vorhandene Website in PWA, um Ihr Engagement mit Ihren Benutzern zu verbessern.Build (or convert) your existing website to a PWA to enhance your engagement with your users. Zu den Verbesserungen gehören Pushbenachrichtigungen, app-like integration und offline support.Enhancements include push notifications, app-like integration, and offline support. Erstellen Sie weiterhin Ihre Zielgruppe im geöffneten Web, damit Benutzer Ihre PWA Suchen und Teilen von Links ermitteln können.Continue to build your audience on the open web for users to discover your PWA through search and link-sharing. Das Beste ist, dass Ihre App mithilfe des Webservercodes aktualisiert wird.Best of all, your app is updated in using your web server code.

PWAs on Microsoft Edge (Chromium)PWAs on Microsoft Edge (Chromium)

Wenn Sie eine Progressive Web App für Webstandard-APIs erstellen, kann Ihre App plattform- und geräteübergreifend bereitgestellt werden und die gerätespezifischen Funktionen nutzen.When you build a Progressive Web App targeting web standard APIs, your app may be deployed across platforms and devices and take advantage of the device-specific capabilities as available. PWAs in Microsoft Edge (Chromium) fügen Ihrer Website die folgenden Vorteile hinzu.PWAs in Microsoft Edge (Chromium) add the following advantages to your website.

  • Ihre App basiert auf einer standardbasierten Webplattform.Your app is built on a standards-based web platform.
  • Ermöglicht Es Ihren Benutzern, Ihre App direkt über den Browser zu installieren.Allows your users to install your app directly from the browser.
  • Ermöglicht Benutzern die Installation Ihrer App ohne Store Bereitstellung oder Registrierung.Allows your users to install your app without a Store-based deployment or registration.

Desktop-PWAs werden auf allen Plattformen unterstützt, Microsoft Edge (Chromium) verfügbar ist.Desktop PWAs are supported on any of the platforms Microsoft Edge (Chromium) is available. Microsoft Edge (Chromium) ist unter Windows 7, Windows 10 und macOS verfügbar.Microsoft Edge (Chromium) is available on Windows 7, Windows 10, and macOS. Die folgenden Vorteile sind enthalten.The following benefits are included.

  • Apps können direkt im Browser mithilfe **** des Installationssymbols in der Navigationsleiste installiert werden.Apps may be installed directly from within the browser using the Install icon in the navigation bar.

    Installieren von App-Flyout und Symbol

  • Apps können auch im Menü apps installiert, ausgeführt und Einstellungen > verwaltet werden.Apps may also be installed, run, and managed from the Settings > Apps menu

    App-Menüelemente unter Einstellungen

  • Webbenachrichtigungen sind in das Benachrichtigungssystem Windows integriertWeb Notifications are integrated into the Windows notification system

  • Freigegebener Cookiespeicher mit dem Browserprofil, das die App installiert hatShared cookie store with the browser profile that installed the app

  • Zugriff auf andere Browserfeatures mithilfe des Menüs Einstellung und mehr ( ) einschließlich Zertifikatüberprüfung, Websiteberechtigungen, Nachverfolgungsschutz ... und BrowsererweiterungenAccess to other browser features using the Setting and more (...) menu including certificate validation, site permissions, tracking protection, and browser extensions

  • Vollzugriff auf Microsoft Edge DevTools zum Debuggen Ihrer AppFull access to Microsoft Edge DevTools for debugging your app

Hinweis

Weitere Informationen zu PWA, bevorstehenden Features und kurzen Demos finden Sie unter Build 2020 PWA Session.For more information about PWA benefits, upcoming features, and short demos, navigate to Build 2020 PWA session.

AnforderungenRequirements

Um als PWA ausführen zu können, sollte Ihre vom Server gehostete Web-App die folgenden Mindestanforderungen enthalten.To run as a PWA, your server-hosted web app should include following minimum requirements.

Schützt Ihre Benutzer, indem sie eine sichere Verbindung für die Server- oder App-Kommunikation bereitstellen.Protects your users by providing a secure connection for server or app communication. Service Workers und andere PWA funktionieren nur mit Webressourcen, die über eine sichere Verbindung (oder aus localhost Debugzwecken) bedient werden).Service Workers and other PWA technologies only work with web resources served over a secure connection (or from localhost for debugging purposes).

Verwendet Service Worker-Threads, um als Netzwerk-Proxys zwischen Ihrem Server und Ihrer Client-App zu fungieren.Uses Service Worker threads to act as network proxies between your server and client app. Service Worker-Threads bieten Offlineunterstützung, Ressourcen zwischenspeichern, Pushbenachrichtigungen, Hintergrunddatensynchronisierung und Leistungsoptimierungen beim Seitenladen.Service Worker threads provide offline support, resource caching, push notifications, background data sync, and page-load performance optimizations.

Stellt eine JSON-basierte Metadatendatei bereit, in der wichtige Informationen zu Ihrer Web-App beschrieben werden, sodass Windows 10 und andere Hostplattformen Ihren PWA-Benutzern eine installierbare, systemeigene app-bezogene Besensung bieten.Provides a JSON-based metadata file that describes key information about your web app, so that Windows 10 and other host platforms provide your PWA users with an installable, native app-like experience. Wichtige Informationen umfassen Symbole, Sprache und URL-Einstiegspunkt.Key information includes icons, language, and URL entry point.

Um ein großartiges PWA, muss Ihre App auch die folgenden Anforderungen erfüllen.To be a great PWA, your app must also meet the following requirements.

Stellen Sie PWA, indem Sie tests in verschiedenen Browsern und Umgebungen durchführen.Ensure your PWA works by testing in different browsers and environments.

Verwendet flüssige Layouts und flexible Bilder.Employs fluid layouts and flexible images. Das responsive Design umfasst die folgenden Elemente, die Ihre UX an das Gerät Ihres Benutzers anpassen.Responsive design includes the following elements that adapt your UX to your user's device.

Verwendet Geräteemulationstools aus Ihrem Browser, um lokal zu testen oder eine Remotedebugsitzung auf Windows oder Android zu erstellen, um direkt auf einem Zielgerät zu testen.Uses device emulation tools from your browser to locally test, or create a remote debugging session on Windows or Android to test directly on a target device.

Leitet jede Seite Ihrer Website an eine eindeutige URL weiter, sodass vorhandene Benutzer Ihnen helfen können, eine noch breitere Zielgruppe über die Freigabe sozialer Medien zu erreichen.Routes each page of your site to a unique URL so existing users may help you engage an even broader audience through social media sharing.

Verwendet Codequalitätstools wie den Webhint-Linter, um die Effizienz, Robustheit, Sicherheit und Barrierefreiheit Ihrer App zu optimieren.Uses code quality tools like the Webhint linter to optimize the efficiency, robustness, safety, and accessibility of your app.

Überprüft Ihre PWA anhand der Google-PWA Prüfliste.Verifies your PWA against the Google baseline PWA checklist.

Hinweis

Um Ihre PWA in eine Microsoft Store zu verwandeln, navigieren Sie zu Progressive Web Apps im Microsoft Store.To turn your PWA into a Microsoft Store app, navigate to Progressive Web Apps in the Microsoft Store.

Weitere InformationenSee also