Angeheftete Websites unter Windows 8

IEBlog Deutsch

Blog des Internet Explorer-Entwicklerteams

Angeheftete Websites unter Windows 8

  • Comments 0

Auf der Windows 8-Startseite finden Sie all Ihre Lieblingsapps und häufig verwendete Inhalte. Die App-Kacheln wirken lebendig und zeigen stets aktuelle und benutzerdefinierte Inhalte an, mit denen Sie auf dem Laufenden bleiben.

Wir haben bereits einen Beitrag über das Browsen mit Internet Explorer 10 im Metro-Stil unter Windows 8 veröffentlicht. Dieser Beitrag beschreibt ausführlich die angehefteten Websites in IE10 und ihre Verfügbarkeit auf der Windows 8-Startseite – einschließlich der visuellen Darstellung, die an der Website ausgerichtet, ist und der Benachrichtigungen, die auf neue Inhalte hinweisen. Außerdem gehen wir darauf ein, wie Webentwickler angeheftete Websites unterstützen können.

In folgendem Video sind angeheftete Websites in der Windows 8 Consumer Preview in Aktion zu sehen.


Angeheftete Websites unter Windows 8

Angeheftete Websites – mehr als Favoriten

Windows-Benutzer verbringen einen Großteil ihrer Zeit im Web. Aus den freiwilligen Telemetriedaten zu Windows (dem offiziellen Microsoft-Programm zur Verbesserung der Benutzerfreundlichkeit) geht hervor, dass die Benutzer regelmäßig die gleichen Websites aufrufen. Angeheftete Websites ermöglichen unter Windows 8 den schnellen und einfachen Zugriff auf Websites. Durch die Benachrichtigungen erhalten die Website-Kacheln aktuelle Informationen und zeigen an, wenn neue Inhalte verfügbar sind.

Mit angehefteten Websites können Entwickler die Benutzer besser an ihre Website anbinden und direkt auf der Windows-Startseite für diese werben. Wir haben festgestellt, dass Websites, die dieses Feature mit IE9 unter Windows 7 nutzen, einen Besucherzuwachs von 15 Prozent bis 50 Prozent verzeichnen. Windows 8 ist nun noch benutzerfreundlicher. Die Website-Kacheln werden aktualisiert, selbst wenn Sie die Website im Browser nicht geöffnet haben.

Die folgenden beiden Screenshots zeigen angeheftete Website-Kacheln und Benachrichtigungen.

Angeheftete Websites auf der Startseite mit an die Website angepasstem Design und Benachrichtigungen
Angeheftete Websites auf der Startseite mit an die Website angepasstem Design und Benachrichtigungen

Beispiel einer Benachrichtigung auf der Kachel einer angehefteten Website
Beispiel einer Benachrichtigung auf der Kachel einer angehefteten Website

Angeheftete Website-Kacheln mit an die Website angepasstem Design

Als Webentwickler können Sie ein Website-Symbol (Favicon) bereitstellen, welches von IE10 überall im Browser verwendet wird, um die Website darzustellen: in der Adressleiste, auf der neuen Registrierkartenseite und auf der Startseite. Das große Websitesymbol (32 x 32 Pixel) wird von IE10 zur Darstellung der Website verwendet, wenn diese an die Startseite geheftet wird. Auf die gleiche Art und Weise wurde die Website von IE9 an die Taskleiste geheftet.

Screenshot, der das Anheften einer Website mit IE10 im Metro-Stil darstellt, bei dem eine Vorschau der Website-Kachel angezeigt wird
Screenshot, der das Anheften einer Website mit IE10 im Metro-Stil darstellt, bei dem eine Vorschau der Website-Kachel angezeigt wird

Die dominierende Farbe des Symbols wird von IE10 hierbei automatisch als Hintergrundfarbe der Kachel auf der Startseite verwendet.

Ein Tool zum Erstellen von Symbolen ist X-Icon Editor. Verwenden Sie dieses Tool, um das 32x32-Symbol für Ihre Website zu erstellen. Außerdem lassen sich mit diesem Tool Bilder in das Icon-Dateiformat (.ico) konvertieren. Verwenden Sie anschließend das herkömmliche Favicon-Markup, um die ICO-Datei zuzuordnen:

<link href="testdrive.ico" rel="shortcut icon" />

Benachrichtigungen, die im Hintergrund aktualisiert werden

Windows 8 kann Aktualisierungen für Kacheln abrufen, die an die Startseite angeheftet sind. Dies funktioniert gut bei einfachen Benachrichtigungen, z. B. bei neuen Nachrichten von anderen Benutzern (E-Mail und soziale Netzwerke), neuen Angeboten auf einer Shopping-Website, neuen Artikeln in einem Newsfeed usw.

Mit Internet Explorer 10 und Windows 8 können Sie Benachrichtigungen direkt auf den angehefteten Website-Kacheln bereitstellen. Das bedeutet, dass Benutzer Aktualisierungen für ihre Websites erhalten, ohne dass die entsprechende Website im Browser geöffnet ist. Heften Sie zum Beispiel die Fresh Tweets-Demo mithilfe von IE10 unter Windows 8 Consumer Preview an die Startseite an. Die Kachel der angeheftete Website wird regelmäßig aktualisiert und informiert den Benutzer, wenn neue Tweets verfügbar sind.

Für Hintergrundbenachrichtigungen sind Komponenten erforderlich, die von Websites bereitgestellt werden. Dies sind im Einzelnen: (1) Benachrichtigungs-XML, eine XML-Antwort, die die Benachrichtigungen für Windows beschreibt und (2) Metatags für angeheftete Websites, Webseiten-Markup, welches den Ort an dem Windows die Benachrichtigungen abrufen soll enthält und die Abrufhäufigkeit bestimmt.

Benachrichtigungs-XML

Windows übernimmt das Abrufen und Darstellen der Benachrichtigungen. Windows ruft die Benachrichtigungs-XML ab, die die visuelle Darstellung der angehefteten Website-Kachel beschreibt. Das Benachrichtigungs-XML-Schema definiert diese einfache XML-Antwort. Beispielsweise kann folgender XML-Code gesendet werden, um die Kachel mit der Nummer „3“ zu aktualisieren:

<?xml version="1.0" encoding="utf-8" ?>

<badge value="3"/>

Bei Benachrichtigungen kann es sich um Nummern oder Glyphen handeln, wie beispielsweise die Anzeiger „alert“ und „new message“. Eine vollständige Liste der möglichen Benachrichtigungen finden Sie unter Auswählen eines Benachrichtigungsbilds auf MSDN.

Metatags für angeheftete Websites

Im nächsten Schritt wird die Benachrichtigungs-XML der Webseite zugeordnet. IE10 verwendet das Metatag „application-name“, um zu ermitteln, ob die Webseite Funktionen für angeheftete Websites, z. B. Benachrichtigungen und Sprunglisten, unterstützt. Fügen Sie ein neues Metatag in Ihr Markup ein, um Benachrichtigungen zu unterstützen. In diesem Markup müssen die URL der Benachrichtigungs-XML und die Häufigkeit enthalten sein, mit der Windows diese abfragen soll. IE prüft sowohl zum Zeitpunkt des Anheftens als auch bei allen folgenden Aufrufen der Website über die angeheftete Websitekachel, ob das Metatag „msApplication-badge“ auf der Seite vorhanden ist.

<meta name="msapplication-badge" value="frequency=360;polling-uri=http://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360" />

Das Parameter „value“ besteht aus zwei Teilen: polling-uri (erforderlich) und frequency (optional).

polling-uri ist der absolute URI, von dem Windows das oben beschriebene einfache XML-Dokument anfordert.

frequency ist die optionale Angabe für die Minutenanzahl zwischen den Aktualisierungen und muss einen der folgenden Werte aufweisen:

  • 30 (Windows ruft den URI alle 30 Minuten ab)
  • 60 (1 Stunde)
  • 360 (6 Stunden)
  • 720 (12 Stunden)
  • 1440 (1 Tag. Dies ist der Standardwert.)

Wenn frequency nicht angegeben ist oder über einen anderen Wert verfügt, lautet der Standardwert 1440 Minuten (tägliche Aktualisierungen).

Entwickler-APIs für das Aktualisieren von Benachrichtigungen

Die Benachrichtigungen auf der Website-Kachel kann auch direkt durch die Webseite gelöscht und aktualisiert werden, um sicherzustellen, dass die Website-Kachel auf dem neusten Stand ist.

Wenn ein Benutzer die angeheftete Website-Kachel auf der Startseite aufruft, wird diese in einer eigenen Sitzung mit der Bezeichnung „SideMode“ ausgeführt. Die Benachrichtigungen können dann mithilfe der folgenden JavaScript-Funktionen aktualisiert werden.

window.external.msSiteModeClearBadge() löscht die Benachrichtigung auf der Kachel. Wenn ein Benutzer in der Fresh Tweets Demo eine Benachrichtigung erhält und die Kachel zum Starten des Browsers antippt, verwendet die Webseite msSiteModeClearBadge(), um die Benachrichtigung von der Kachel zu löschen. Wenn auf der Kachel das nächste Mal eine Aktualisierung angezeigt wird, weiß der Benutzer, dass es neue Inhalte gibt.

window.external.msSiteModeRefreshBadge() fordert Windows zur Aktualisierung der Benachrichtigung mithilfe des Abruf-URIs auf. Beispiel: Ein Benutzer sieht drei ungelesene Nachrichten auf der angehefteten Website-Kachel und klickt daraufhin auf die Kachel, um zur entsprechenden Website zurückzukehren. Wenn der Benutzer nur die erste Aktualisierung liest, kann ein Update ausgelöst werden, damit die Benachrichtigung die richtige Anzahl gelesener/ungelesener Nachrichten anzeigt.

In der Windows 8 Consumer Preview funktionieren diese beiden APIs nur auf Websites in den Zonen „Lokales Intranet“ oder „Vertrauenswürdige Sites“. Diese Einschränkung wird in der nächsten Version beseitigt. Wenn Sie diese APIs in der Consumer Preview auf Ihrer eigenen Website testen möchten, müssen Sie Ihre Website auf der Registerkarte „Sicherheit“ im Dialogfeld „Interneteigenschaften“ zur Liste „Vertrauenswürdige Sites“ hinzufügen.

Taskleistenbenachrichtigungen auf dem Desktop

Benachrichtigungen, die als Symbolüberlagerungen für angeheftete Websites auf der Desktop-Taskleiste angezeigt werden, sind für Windows 8 und IE10 auch weiterhin verfügbar. Diese Art von Benachrichtigung ist jedoch nicht auf angehefteten Websites der Windows 8-Startseite verfügbar. Windows 8 handhabt die Benachrichtigungen für sämtliche Kacheln auf der Startseite mit hoher Energieeffizienz.

Sprunglisten für schnelles Navigieren innerhalb der Website

Viele führende Websites, z. B. NYTimes.com, CNN.com und Amazon.com, unterstützen Funktionen für angeheftete Websites im IE9, z. B. Sprunglisten, um eine bestimmte Aufgabe oder einen bestimmten Teil der Website aufzurufen. Bei IE10 sind Sprunglisten als Teil der Navigationsleiste verfügbar, um eine für die Fingereingabe optimierte Navigation auf der Website zu ermöglichen.

Wenn der Benutzer die Website auf der Startseite ausführt, zeigt die Anheftschaltfläche an, dass Sprunglisten für diese Website verfügbar sind.

Screenshot der „Fresh Tweets Demo“-Sprungliste
Screenshot der „Fresh Tweets Demo“-Sprungliste

Die angezeigte Sprungliste ist mit der IE9-Sprungliste auf der Windows 7 Taskleiste identisch.

Sie können der Sprungliste Ihrer Website über das Seiten-Markup statische Aufgaben (weitere Informationen) oder dynamische Elemente hinzufügen, die auf Benutzerinteraktion basieren (weitere Informationen). Benachrichtigungen und Sprunglisten sind in Windows 8 ein Website-zentrisches Feature. Jeder vollständig qualifizierte Domainname kann nur ein einziges Set von Abrufdaten und Sprunglistendaten haben.

Fazit

Durch die Integration auf der Windows 8 Startseite, stellt Internet Explorer 10 Websites ins Zentrum der Aufmerksamkeit. Webentwickler können Website-zentrische Steuerelemente für Kacheln angehefteter Websites erstellen, neue Aktualisierungen teilen und Sprunglisten zum schnellen Navigieren auf der Website anbieten.

Wir freuen uns, dass Sie Ihrer Website diese einfachen Features hinzufügen, um dieser in Windows 8 noch mehr Bedeutung zu verleihen.

– Travis Leithead, Program Manager, Internet Explorer