Windows 7 Desktop Integration mit Internet Explorer 9

Article
02/27/2011

Internet Explorer 9 unterstützt die nahtlose Integration von Webseiten auf Computern unter Windows 7 durch das Anheften an der Taskleiste, auf den Desktop oder in das Startmenü. Untersuchungen von Microsoft haben ergeben, dass Anwender angeheftete Webseiten zwischen 15% und 50% häufiger besuchen.

Anheften von Webseiten

Die Windows 7 Desktop Integration funktioniert bisher nur mit Internet Explorer 9. Das Mozilla-Team plant zur Zeit ähnliche Funktionen in der übernächsten Firefox-Version 5. Webseitenbetreiber sollten daher nicht mit Hilfe einer Browserweiche, sondern über Feature-Erkennung herausfinden, ob der Besucher einen Webbrowser nutzt, der die neuen Funktionen unterstützt.

Das folgende Beispiel zeigt eine mögliche Abfrage, welche true zurückliefert, wenn das Feature im aktuell genutzten Browser unterstützt wird:

    1:  if (window.external.msIsSiteMode) {

    2:      // Check if the website was launched from a pinned site.

    3:      if (window.external.msIsSiteMode())

    4:      {

    5:          // TRUE

    6:      }

    7:      else

    8:      {

    9:          // FALSE

   10:      }

   11:  }

Möchte man Besucher einer Webseite dazu bewegen, mit Internet Explorer 9 die Webseite in Windows 7 zu integrieren, kann man mittels JavaScript über die Methode window.external.msIsSiteMode() ermitteln, ob die Webseite schon angeheftet wurde. In diesem Fall liefert die Methode true zurück. Diese Schnittstelle kann über jedes HTML-Element angesprochen werden, wie folgendes Codebeispiel zeigt:

    1:   <a onclick="window.external.msAddSiteMode();" href="#">Anheften</a><br />

Sollte diese Abfrage jedoch false zurückliefern, kann man die Besucher darauf aufmerksam machen, dass sie die Webseite in Windows 7 direkt integrieren können. Um eine Webseite an die Taskleiste anzuheften, muss der Besucher nur eine Registerkarte aus dem Internet Explorer 9 per Drag und Drop auf die Taskleiste ziehen und dort fallen lassen. Alternativ kann man auch das Icon der Webseite aus der Adressleiste oder aus der Übersicht nach dem Öffnen einer neuen Reiterkarte zum Anheften nehmen.

Neue Funktionen

Nach dem Anheften können Anwender neue Funktionen nutzen, wenn der Entwickler die Webseite um die entsprechenden Funktionen erweitert hat:

Statische Liste von Elementen für schnelle Navigation zu oft genutzten Teilen der Webseite.
Dynamische Liste von Elementen für personalisierte Aufgaben (zum Beispiel aktuellste News).
Erzeugen von Aufmerksamkeit durch sanftes Blinken oder Überlagern der Webseite durch ein neues Icon (zum Beispiel zum Anzeigen der Anzahl ungelesener Emails in einem Webmailclient).
Hinzufügen von Steuerungsfunktionen in die Vorschau des Programms über der Taskleiste.
Anpassen des Look & Feel des Webbrowsers durch farbliche Anpassung des Zurück- und Vorwärtsbuttons.
Hervorheben der Webseite durch ein Icon in hoher Auflösung außerhalb des Webbrowsers.

High-Res Icon

Durch die Integration in die Taskleiste wird die Webseite wie ein Programm angezeigt und kann über diese Verknüpfung direkt gestartet werden. Als Icon wird das Favicon der Webseite genutzt. Sebastian Kuhbach von Winfuture.de hat mir freundlicherweise erlaubt, seine Webseite als Beispiel zu nehmen. So sieht das klassische Favicon von Winfuture in der Adressleiste und auf der Registerkarte aus:

Wenn man aber die Webseite an die Taskleiste anheften möchte, benötigt Windows 7 ein Icon mit einer höheren Auflösung. Die Taskleiste ist um einiges größer als das klassische Favicon. Internet Explorer 9 nutzt Icons mit folgenden Auflösungen:

Adressleiste (16x16)
Neue Registerkarte (32x32)
Taskleiste (32x32)
Browser UI einer angehefteten Webseite (24x24)

Angeheftete Webseiten nutzen darüberhinaus:

Aufgaben in Sprunglisten (16x16)
Vorschaubilder von Toolbar-Buttons (16x16)
Überlagernde Icons (16x16)

Ein Favicon kann mehrere Bilder in unterschiedlicher Auflösung beherbergen. Für die beste Darstellung mit Internet Explorer 9 empfehlen wir folgende Auflösungen:

Empfehlung: 16x16, 32x32, 48x48
Optimal: 16x16, 24x24, 32x32, 64x64

Wenn eine Webseite kein Icon in geeigneter Auflösung zur Verfügung stellt, wird das vorhandene nicht einfach hochskaliert. Dabei auftretende unschöne Pixelartefakte aufgrund der geringen Quellgröße würden das Gesamtbild deutlich trüben. Daher wird das bestehende Icon in Originalgröße eingebunden und mit einem weißen Rahmen umgeben.

Um ein hochaufgelöstes Favicon zu erzeugen, nehme ich das Logo von Winfuture, entferne den Textanteil und zentriere den Grafikteil, so dass das Bild quadratisch mit der Auflösung von 1920x1920 Pixel vorliegt. Dann importiere ich das Bild in X-Icon Editor und wähle die gewünschten Zielauflösungen aus:

Ein Blick auf die Vorschau zeigt, wie das neue Icon an den verschiedenen Stellen in Internet Explorer 9 und Windows 7 dargestellt wird:

Wenn man zufrieden mit dem Ergebnis ist, exportiert man die fertige Datei ins ICO-Format und speichert sie auf der eigenen Webseite. Meistens platziert man das Favicon im Wurzelverzeichnis der Webseite und bindet es über ein Link-Element in der <head>-Bereich der Webseite als neues Favicon ein:

    1:  <link rel="shortcut icon" href="/favicon.ico" />

Zu beachten ist dass das Favicon bei jedem Webseitenzugriff geladen wird. Bei populären Webseiten kann bei der Verwendung eines High-Res Icon durchaus der Traffic um Gigabytes zunehmen. Daher ist es ratsam, im Webserver das clientseitige Caching des Favicons über den HTTP-Header einzuschalten. Internet Explorer 9 beachtet hier die Elemente "max-age" und "expires date". Zusätzlich kann für die Datei die GZIP-Komprimierung aktivieren, so dass die Dateigröße während der Auslieferung um ungefähr die Hälfte verringert werden kann.

Weitere Informationen rund um Favicons stellt Microsoft im Microsoft Developer Network zur Verfügung:

Metadaten

Neben dem Favicon können für das Anheften von Webseiten spezielle Metadaten im <head>-Bereich der Webseite übergeben werden, die die Darstellung der angehefteten Webseite beeinflussen. Diese Daten spielen während der Installation und zur Laufzeit eine Rolle.

application-name

"application-name" definiert den Namen der Anwendungsinstanz der angehefteten Seite. Der Begriff erscheint, sobald man über das Icon der angehefteten Seite auf der Taskleiste mit der Maus fährt sowie als Fenstertitel der Anwendungsinstanz der angehefteten Seite.

    1:  <meta name="application-name" content="WinFuture.de" />

Wenn das Element nicht vorhanden ist, wird der Name des Dokuments an dieser Stelle verwendet.

"msapplication-tooltip" blendet einen zusätzlichen Hilfetext ein, wenn man mit der Maus über das Icon der angehefteten Seite im Startmenü oder auf dem Desktop fährt.

    1:  <meta name="msapplication-tooltip" content="WinFuture.de" />

msapplication-starturl

"msapplication-starturl" enthält die URL der Webanwendung. Die Startadresse kann der vollqualifizierte oder ein ein relativer Bezeichner der aktuellen Webseite sein. Es sind sowohl HTTP, als auch HTTPS als Protokoll erlaubt. Sollte die URL eine Umleitung auf eine andere Webseite sein, muss die Webseite komplett mit führendem "https://" und abschließendem "/" angegeben werden:

    1:  <meta name="msapplication-starturl" content="./" />

Wenn dieses Element nicht vorhanden ist, wird die URL der aktuellen Webseite verwendet.

msapplication-window

"msapplication-window" legt die Startgröße der angehefteten Webseite fest, wenn sie vom Anwender zum ersten Mal aufgerufen wird. Sobald der Anwender jedoch das Fenster in der Größe verändert, gelten zukünftig die neuen Größen.

    1:  <meta name="msapplication-window" content="width=800;height=600" />

Die minimale Größe für "width" sind 800 und für "height" 600 Pixel. Größere Werte sind natürlich auch möglich.

msapplication-navbutton-color

Über "msapplication-navbutton-color" kann man die Farbe des Vorwärts- und Zurückbuttons beeinflussen. Die Farbe kann als Name oder Hexwert angegeben werden.

    1:  <meta name="msapplication-navbutton-color" content="#016AB0" />

Wenn dieses Element nicht vorhanden ist, wird die Farbe von der Palette des Favicons abgeleitet.

Startmenü

Webseiten lassen sich über die Methode window.external.msAddSiteMode() neben der Taskleiste auch in das Startmenü integrieren:

    1:  <a onclick="window.external.msAddSiteMode();" href="#">Startmenü</a><br />

Danach blendet Windows 7 eine Sicherheitsabfrage ein, die der Anwender bestätigen muss, bevor die Webseite dem Startmenü hinzugefügt wird:

Wenn der Webentwickler diese Funktion auf der Webseite nicht integriert hat, kann jeder Anwender auch über die GUI den Vorgang selbst durchführen. Dazu muss er nur den Extras-Button (Tastaturkürzel ALT+X) anklicken und unter "Datei" die Option "Webseite dem Startmenü hinzufügen" auswählen:

Sprunglisten

Über Aufgaben in der Sprungliste können angeheftete Webseiten spezifische Aktionen für die am häufigsten genutzten Funktionen anbieten. Basierend auf den Angeboten der Webseite kann man zum Beispiel die Hauptnavigation und/oder Elemente, die Besucher am häufigsten nutzen, integrieren. Anwender müssen dann nicht mehr den Webbrowser starten, die Webseite aufrufen und langwierig innerhalb der Webseite navigieren, um derartige Funktionen schnell nutzen zu können.

Stattdessen reicht in Zukunft ein rechter Mausklick auf das Icon der an der Taskleiste angehefteten Webseite, um die gewünschte Funktion aufrufen zu können, ohne dass der Webbrowser vorher manuell geöffnet werden muss. Hier ein Screenshot der Implementierung unseres Partners XING:

Aufgaben

Alle Aufgaben einer Sprungliste können als statische URLs über einfache HTML Metatags innerhalb der .website Datei hinterlegt werden. Beim Anheften der Webseite werden diese ausgewertet und zwischengespeichert. Jedes Element lässt sich problemlos von der Webseite durch Verändern des jeweiligen Metatags beeinflussen, wobei die Änderung beim nächsten Start der angehefteten Webseite durch Klicken auf das Icon umgesetzt wird. Wir empfehlen daher, als Aufgaben nur Bereiche der Webseite zu integrieren, die sich nicht sehr häufig ändern, damit Anwender, welche sich an die Nutzung gewöhnt haben, eine konsistente Bedienung vorfinden.

Die URLs sind dabei nicht beschränkt auf die jeweils zu der angehefteten Webseite gehörende Domain. Das folgende Beispiel illustriert die Nutzung durch Definition von zwei Aufgaben: Aufgabe 1 und Aufgabe 2. Wenn der Besucher Aufgabe 1 anwählt, wird die angeheftete Webseite geöffnet und Seite1.html dargestellt. Bei der Anwahl von Aufgabe 2 wird dagegen eine Seite2.html einer anderen Domain (in diesem Beispiel microsoft.de) geöffnet.

    1:  <META name="msapplication-task" content="name=Aufgabe 1;action-uri=https://server/Seite1.html;icon-uri=https://server/icon1.ico"/>

    2:  <META name="msapplication-task" content="name=Aufgabe 2;action-uri=https://microsoft.de/Seite2.html;icon-uri=https://server/icon2.ico"/>

Die angeheftete Webseite öffnet alle Aufgaben innerhalb der eigenen Registerkarte im aktuellen Fenster. Sollte noch keine Browserinstanz der angehefteten Webseite geöffnet sein, wird eine neue gestartet. Um die Sprungliste nicht zu unübersichtlich werden zu lassen, können maximal 5 Aufgaben pro Webseite definiert werden. Relative URLs im action-uri Feld werden zur Laufzeit aufgelöst mit dem URI der Webseite, welche die Metatags enthält.

Zur Veranschaulichung des obigen Beispiels hier der Quellcode für die Implementierung der Aufgaben des obigen Beispiels von XING:

    1:  <meta name="msapplication-navbutton-color" content="#006567" />

    2:  <meta name="msapplication-starturl" content="https://www.xing.com" />

    3:  <meta name="msapplication-task" content="name=Nachrichten;action-uri=https://www.xing.com/app/message;icon-uri=https://www.xing.com/img/n/ie9/icn_messages.ico" />

    4:  <meta name="msapplication-task" content="name=Meine Kontakte;action-uri=https://www.xing.com/app/contact;icon-uri=https://www.xing.com/img/n/ie9/icn_requests.ico" />

    5:  <meta name="msapplication-task" content="name=Persönliche Jobangebote;action-uri=https://www.xing.com/jobs/personal_postings;icon-uri=https://www.xing.com/img/n/ie9/icn_jobs.ico" />

    6:  <meta name="msapplication-task" content="name=Meine Events;action-uri=https://www.xing.com/events/my_events;icon-uri=https://www.xing.com/img/n/ie9/icn_events.ico" />

Eigene Kategorien

Eine weitere Möglichkeit der Integration in Windows 7 ist die Nutzung einer eigenen Kategorie innerhalb der Sprunglisten. In obigem Beispiel von XING wird zum Beispiel die selbsterstellte Kategorie Benachrichtigungen verwendet. Eine eigene Kategorie erlaubt die dynamische Integration von Information für Besucher, die Internet Explorer 9 nutzen.

Neue Einträge können einer eigenen Kategorie von jeder Webseite der gleichen Domain hinzugefügt werden. Sie werden visuell getrennt von den Aufgaben der Sprungliste dargestellt und können vom Besucher direkt beeinflusst werden. Er kann einzelne Einträge direkt über einen linken Mausklick öffnen, wobei dieser Eintrag dann in einer neuen Registerkarte innerhalb der gleichen Browserinstanz dargestellt wird. Mit Hilfe eines rechten Mausklicks kann er den Eintrag permanent an die Liste anheften oder auch aus der Liste entfernen.

Die eigene Kategorie kann man innerhalb der Sprungliste als kontextabhängige Navigationshilfe in Form von Zielen oder Aktionen nutzen. Ziele können der Zugriff auf Dateien, Dokumente oder spezifische URLs sein, während Aktionen zum Beispiel auch kontextabhängige Interaktionen oder Benachrichtigungen mit dem Backend beinhalten können:

Neue empfangene Emails
Freunde, die online sind
Erinnerungen an anstehende Aufgaben und Termine
...

Dabei kann auch auf den bisherigen Verlauf zugegriffen werden. Einträge innerhalb der Kategorie stellen URLs mit nutzerspezifischen Inhalten dar. Das können – wie im obigen Beispiel – Elemente der Profilseite eines Social Networks sein. Es könnten aber genauso gut die Top 5 Radiostationen eines Musik Streaming-Angebots sein.

Ein weiterer Vorteil bei der Verwendung einer eigenen Kategorie ist die Tatsache, dass alle Einträge nach dem Schließen des Webbrowsers erhalten bleiben und Besuchern kontextsensitiven Zugriff auf Bereiche der Webseite anbieten, auch wenn die angeheftete Webseite nicht ausgeführt wird. Hier ein Screenshot der Implementierung unseres Partners XING:

mit dem dazugehörigen Quellcode für die Implementierung der eigenen Kategorie Benachrichtigungen mit benutzerspezifischen Inhalten. XING hat den dafür notwendigen Quellcode in das Script sitemode.js ausgelagert, welches man mit Hilfe der Developer Tools über F12 im Internet Explorer 9 einsehen und mit Hilfe der Funktion JavaScript formatieren lesbar darstellen lässt:

    1:  var xing=xing||{};

    2:  xing.controls=xing.controls||{};

    3:  xing.controls.SiteMode={

    4:      _ids:{

    5:          MESSAGES:"header-messages",REQUESTS:"header-contacts"

    6:      }

    7:      ,_icons:{

    8:          UPDATE:"/img/n/ie9/icn_updates.ico",MESSAGE:"/img/n/ie9/icn_messages.ico",REQUEST:"/img/n/ie9/icn_requests.ico"

    9:      }

   10:      ,_urls:{

   11:          INBOX:"/app/message?box=inbox",UNCONFIRMED_CONTACTS:"/app/contact?op=toconfirm"

   12:      }

   13:      ,initialize:function(a){

   14:          try{

   15:              var b=window.external.msIsSiteMode()

   16:          }

   17:          catch(c){

   18:              return

   19:          }

   20:          if(b){

   21:              this._options=a;

   22:              this._messagesWrapper=$(this._ids.MESSAGES);

   23:              this._requestsWrapper=$(this._ids.REQUESTS);

   24:              this._control();

   25:              this._observe()

   26:          }

   27:      }

   28:      ,

   29:      _observe:function(){

   30:          Event.Notifications.observe("my_xing.update_counter",this._control.bind(this))

   31:      }

   32:      ,_control:function(){

   33:          var a=this._messagesWrapper&&Number(this._messagesWrapper.innerHTML),b=this._requestsWrapper&&Number(this._requestsWrapper.innerHTML);

   34:          if(a||b){

   35:              this._displayOverlayIcon(this._icons.UPDATE);

   36:              this._createJumplist({

   37:                  messages:a,requests:b

   38:              })

   39:          }

   40:          else this._clear()

   41:      }

   42:      ,_displayOverlayIcon:function(a){

   43:          window.external.msSiteModeSetIconOverlay(a)

   44:      }

   45:      ,_createJumplist:function(a){

   46:          window.external.msSiteModeClearJumpList();

   47:          window.external.msSiteModeCreateJumpList(this._options.notifications);

   48:          a.messages&&window.external.msSiteModeAddJumpListItem(this._options.new_messages+" ("+a.messages+")",this._urls.INBOX,this._icons.MESSAGE);

   49:          a.requests&&window.external.msSiteModeAddJumpListItem(this._options.new_requests+" ("+a.requests+")",this._urls.UNCONFIRMED_CONTACTS,this._icons.REQUEST);

   50:          window.external.msSiteModeShowJumpList()

   51:      }

   52:      ,_clear:function(){

   53:          window.external.msSiteModeClearIconOverlay();

   54:          window.external.msSiteModeClearJumpList()

   55:      }

   56:  };

Umsetzung

In meinem Artikel Anheften von Webseiten zeigte ich anhand der Beispielseite winfuture.de, wie die neuen Funktionen mit Hilfe von Internet Explorer 9 umgesetzt werden können. Das dort beschriebene Verfahren zum Anfeten der Webseite und die Integration eines Icons mit unterschiedlich hochauflösenden Bildern ist mittlerweile umgesetzt. Jetzt möchte ich anhand der gleichen Webseite zeigen, wie einfach sich Aufgaben in Sprunglisten mit einer eigenen Kategorie umsetzen lassen:

Erstellen der Kategorie

Mit Hilfe der Methode msSiteModeCreateJumplist wird im ersten Schritt eine neue Kategorie mit der Bezeichnung MyWinFuture erstellt:

    1:  window.external.msSiteModeCreateJumplist('MyWinFuture');

Die neue Kategorie wird erst sichtbar, wenn mindestens ein Eintrag hinzugefügt wird. Jede weitere ersetzt die jeweils vorher erstellte Kategorie.

Anlegen eines Eintrages

Im zweiten Schritt füge ich die neuen Einträge MyWinFuture anzeigen und Öffentliches Profil hinzu. Der erste Parameter legt dabei den Namen, der zweite die URL fest, wenn der Eintrag ausgewählt wird. Über den dritten Parameter kann ein eigenes Icon angegeben werden, welches bei der Darstellung des Eintrages in der eigenen Kategorie der Sprungliste genutzt wird:

    1:  window.external.msSiteModeAddJumpListItem('MyWinFuture anzeigen', 'https://winfuture.de/mywinfuture.html', 'https://i.wfcdn.de/5/MyWinFuture.ico');

    2:  window.external.msSiteModeAddJumpListItem('Öffentliches Profil', 'https://winfuture.de/mywinfuture,115515.html', 'https://i.wfcdn.de/5/Profil.ico');

Über einen optionalen vierten Parameter window-type kann die Darstellung beeinflusst werden:

tab – in einer neuen Registerkarte (default)
self – in der aktuellen Registerkarte
window – in einem neuen Fenster der angehefteten Webseite

Anzeigen des Eintrages

Nach dem Aufruf der Methode msSiteModeShowJumplist aktualisiert Windows automatisch die Sprungliste:

    1:  window.external.msSiteModeShowJumplist();

Löschen der Liste

Der Aufruf der Methode msSiteModeClearJumplist löscht sofort alle Einträge der eigenen Kategorie in der Sprungliste.

    1:  window.external.msSiteModeClearJumplist();

Darstellung

Die APIs der angehefteten Webseiten erlaubt die Darstellung von maximal 20 Einträgen gleichzeitig in einer eigenen Kategorie. Ab dem 21ten Eintrag werden die als erstes hinzugefügten Einträge überschrieben. Schon bestehende Einträge werden dabei nicht doppelt erzeugt, sondern an in der Sprungliste ganz nach oben geschoben. Dabei kann jede Webseite der gleichen Domain Einträge der Sprungliste über die JavaScript APIs modifizieren.

In besonderen Fällen werden jedoch auch weniger Einträge angezeigt, wenn zum Bespiel die Bildschirmauflösung oder Schriftgröße die Darstellung aller Einträge nicht erlaubt. Dann wird die Liste von oben soweit gekürzt, bis die verbleibenden Einträge vollständig dargestellt werden können.

Alle Webseiten sind prinzipiell für die Inhalte ihrer Sprunglisten selbst verantwortlich. Wie oben schon erwähnt können Besucher jedoch auch einzelne Einträge manuell entfernen. Über diesen Vorgang kann die Webseite sich benachrichtigen lassen, solange sie sich für eines der folgenden Events registriert:

    1:  document.addEventListener('mssitemodejumplistitemremoved', removed, false);

    2:  document.attachEvent('onmssitemodejumplistitemremoved', removed);

Dadurch wird ein Callback mit einem URL-Parameter erzeugt:

    1:  function removed(url) { … }

Allerdings kann dadurch nicht die Benutzeraktion abgefangen oder von Windows ein Shell Event zurückgeliefert werden. Das Event wird erst dann erstellt, wenn der Besucher einen Eintrag in der Sprungliste verändert und die Webseite die Methode msSiteModeShowJumplist aufruft. Danach wird die API die Sprungliste synchronisieren.