Native Anwendungen und App Stores - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 397

Im Aside Magazine beispielsweise befindet sich ein kleiner und relativ dezenter Hin-
weis am oberen Bildrand, der auf die Bookmark-Schaltfläche verweist (Abbildung
9.30). Dieser unscheinbare Effekt sorgt bereits dafür, dass etwa 62 % der Besucher das
Magazin zum Home-Bildschirm hinzufügen. Eine wesentlich bessere Möglichkeit ist
das Add2Home-Skript von Matteo Spinelli: Es fügt per JavaScript einen dynamischen
und bei Bedarf animierten Hinweis auf die Funktion in Ihre WebApp ein.

Laden Sie zunächst das Skript von https://github.com/cubiq/add-to-homescreen her-
unter. Speichern Sie die Dateien add2home.js und add2home.css in Ihrem Projektord-
ner ab, und binden Sie sie anschließend in den head -Bereich Ihrer WebApp ein:

<link rel="stylesheet" href="styles/add2home.css">
<script type="application/javascript" src="javascript/add2home.js"></script>

9

Starten Sie nun Ihre WebApp im Browser. Nach zwei Sekunden erscheint ein kleiner
Tooltip mit dem Text Installieren Sie diese App auf Ihrem iPhone: [Symbol]
antippen und dann 'Zum Home-Bildschirm' (Abbildung 9.31). Die Nachricht
bleibt etwa 20 Sekunden dort stehen und verschwindet dann von allein.

Abbildung 9.31 Add2Home-Skript

Zusätzlich können Sie einige Optionen konfigurieren. Fügen Sie diese vor dem Ein-
bindecode ein:

<script>
var addToHomeConfig = {
lifespan: 60000,
touchIcon: true