Die Schönheit des neuen Mobilen Web

Mit meinen ersten Blogbeitrag zu dem Thema PWA in der Versicherungswelt und dem Start eines entsprechenden Github Projektes (“PVA”) habe ich meine “persönliche Journey” in die neue Welt des “Offline Web”, der PWAs gestartet.

Heute bin dabei ich über zwei Features gestolpert, die PWAs, “meine PVA” m.E. auf einem iPhone ‘richtig gut’ aussehen lassen:

Splashcreens für deine wahre Identität im Web

Splashscreen der PVA App beim Laden

Rechts seht ihr den Splashscreen der upgedateten PVA. Normalerweise zeigen PVAs, anders als auf Android, keinen Splashscreen (gesteuert über die Manifest Datei) an.

Wenn eine PWA im installierten Mode länger laden muss (was sicherlich häufiger vorkommt), entweder aus dem lokalen Cache/Datenbanken oder über das Web, dann zeigt das iPhone einfach nur einen “nackten Bildschirm” in der definierten Hintergrundfarbe an.
Ein unschönes Erlebnis, welches aber mit ein paar Handgriffen “gefixed” werden kann.

Im Header der Startseite, üblichweise in einer index. html, müssen für die verschiedenen Formate des iPhones entsprechende Splashscreens als Image hinterlegt werden.

Nachfolgender Code aktiviert die Spashscreens für iOS, welchen ihr gerne per Copy& Paste kopieren könnt. Da es natürlich ein “Hassle” ist, die vielen entsprechenden Images zu manuell zu erzeugen, gibt es auch hier Abhilfe.

  <link href="%PUBLIC_URL%/splashscreens/iphone5_splash.png"
    media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphone6_splash.png"
    media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphoneplus_splash.png"
    media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphonex_splash.png"
    media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphonexr_splash.png"
    media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/iphonexsmax_splash.png"
    media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/ipad_splash.png"
    media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/ipadpro1_splash.png"
    media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/ipadpro3_splash.png"
    media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />
  <link href="%PUBLIC_URL%/splashscreens/ipadpro2_splash.png"
    media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
    rel="apple-touch-startup-image" />

Auf dieser Webseite könnt Ihr Euch sowohl die passenden Splashscreen-Größen generieren, wie auch das passende HTML für das Head Tag. (https://appsco.pe/developer/splash-screens). Tolles Angebot, funktioniert prima.

Statusbars für die vollendete Schönheit

Ein weiteres, schönes, etwas kompliziertes, weil unter iOS noch nicht vollständig umgesetztes Feature ist der “echte Fullscreen”.

Auch die erste Version der PVA App verfügte auch schon unter iOS über einen Fullscreen.

Neue Version mit Status Bar in App Farbe
Alte Version PVA mit Standard Status Bar

Leider war die Status Bar dabei nicht in der Farbe der App, sondern nur Standard Schwarz (siehe rechter Screen).

Man kann nicht alle Farben für eine Toolbar setzen, aber mit diesem Code Snippet übernimmt (content="black-translucent“) die Status Bar auch die Farbe der App bzw. des im Manifestes gesetzten Hintergrundes (linker Screen).

Und schon ist die PWA wieder ein “weiteres Stückchen an eine “echte native App heran gerückt.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Der Code ist im Github Projekt eingescheckt bzw. die PVA App auch upgedatet.

Denkt bitte daran, den Safari Cache zu löschen, bevor ihr die neuen Features ausprobiert.

Links

PVA App – https://pva.mobinauten.de/

PVA Github Projekt – https://github.com/mobinauten/pva (gerne mitmachen!)

“We always overestimate the change that will occur in the short term and underestimate the change that will occur in the long term.” (Bill Gates)