Grundlagen des mobilen Webs

Du hast bestimmt schon eine Webseite auf dem Handy geöffnet und musstest zoomen, um eine einzige Zeile zu lesen. Die Seite war für einen breiten Bildschirm gemacht, und das Handy hat sie klein gezeichnet. Ein paar Zeilen Code sagen dem Handy, wie es sie richtig zeichnet, und diese Lektion sieht sie sich an.

• Viewport (Anzeigebereich): der Teil des Bildschirms, in den die Seite gezeichnet wird.
• Responsiv: ein Layout, das sich an die Breite des Bildschirms anpasst.
• Media Query: eine CSS-Regel, die nur gilt, wenn eine Bedingung stimmt, zum Beispiel eine Mindestbreite.
• Manifest: eine kleine Datei, die dem Handy Name, Symbole und Farben einer Web-App nennt.
• Service Worker: ein Skript, das der Browser behält und das Anfragen aus einer gespeicherten Kopie beantworten kann.
• Cache: ein Speicher für gesicherte Kopien von Dateien.

ls app listet die Web-App auf: eine Seite, ihre Stile, ihr Skript, ein Manifest, einen Service Worker und zwei Symbole. Das zweite Skript fragt den Vorschau-Server nach dreien davon und gibt die Antwort aus. Jede lautet 200, das heißt gefunden, und das Manifest hat einen eigenen Typ, application/manifest+json. Öffne jetzt den Link Preview in deinem eigenen Browser, mache das Fenster schmal und sieh zu, wie sich das Layout ändert.

Das Skript liest index.html und sucht ein meta-Tag mit dem Namen viewport. Es wird gefunden, mit width=device-width, initial-scale=1: die Seite so breit wie der Bildschirm zeichnen, in normaler Größe. Probiere es aus: Lösche diese Zeile in JupyterLab, speichere, führe das Skript noch einmal aus, und es meldet MISSING (fehlt). Ein Handy würde die Seite dann zeichnen, als wäre der Bildschirm viel breiter, und sie verkleinern.

Das Stylesheet ist mobile first: Die einfachen Regeln sind das Handy, und Media Queries fügen Regeln hinzu, wenn der Bildschirm breiter wird. Das Skript findet drei. Zwei sind Breiten, 600 px und 900 px, und die dritte ist keine Breite, sondern eine Vorliebe für den Dunkelmodus. Ziehe das Fenster deines Browsers breiter als 600 px, und das Formular steht in einer Reihe. Breiter als 900 px, und die Liste hat zwei Spalten.

Eine Fingerspitze deckt viel mehr ab als ein Mauszeiger und verdeckt, was sie drückt. Dieses Lab nimmt 44 Pixel als die Linie, die eine Schaltfläche erreichen sollte. Das Skript listet jede Größe im Stylesheet auf: Die Schaltfläche Add (Hinzufügen) ist 32 px hoch, die Filter-Schaltflächen 36 px und die runde Erledigt-Schaltfläche 30 mal 30, also liegen vier Größen unter 44. Sie sind absichtlich etwas zu klein, und sie zu beheben ist deine Aufgabe.

Das Manifest ist eine JSON-Datei. Das Skript prüft sieben Felder. Sechs sind vorhanden: der Name, ein Kurzname für unter dem Symbol, die Seite, die zuerst geöffnet wird, die Anzeigeart (standalone, das heißt ohne die eigenen Leisten des Browsers), die Symbole und die Farbe der oberen Leiste. Eines fehlt, MISSING, background_color, die Farbe, die beim Start der App zu sehen ist. Beide Symboldateien existieren. Ob ein Handy anbietet, die App zu installieren, hängt vom Browser ab, such die Option also im Menü deines eigenen Browsers.

Der Service Worker nennt einen Cache, habits-v1, und eine Liste von acht Dateien, die bei der Installation gesichert werden. Das Skript prüft, ob jede existiert, und sieben tun es. Die achte, /offline.html, gibt es nicht. Das ist ein echter Fehler: Wenn eine einzige Datei der Liste nicht gesichert werden kann, scheitert die ganze Installation, und offline funktioniert nichts. Ein Browser erlaubt Service Worker nur auf einer sicheren Adresse, deshalb kann er diesen auf dem Vorschau-Link ablehnen: Die Konsole deines Browsers sagt, was der Fall ist.

Eine native App wird für ein einziges Handysystem gebaut und aus einem Store installiert. Eine mobile Web-App ist eine Webseite. Sie hat einen Code für alle Handys, sie ist aktuell, sobald du die Dateien änderst, und ein Link öffnet sie. Sie kann Daten auf dem Handy speichern, mit einem Service Worker offline arbeiten und sich in vielen Browsern zum Startbildschirm hinzufügen lassen. Sie kommt weniger weit an das Handy heran: Was sie nutzen darf, etwa Benachrichtigungen oder Arbeit im Hintergrund, hängt von Browser und Handy ab, und der Browser kann ihre gespeicherten Daten löschen. Die Wahl zwischen beiden ist ein Abwägen, kein Wettkampf.