Wie integriert man die PWA Asset in die Web App?

Die Einbindung von visuell beeindruckenden PWA-Assets in Ihre Webanwendung kann eine schwierige Aufgabe sein, aber mit dem miTT PWA Asset Generator ist es ganz einfach. die App-Icons in das Manifest einbinden die Meta Tags für iOS Icon and splash screen im head hinzufügen Prüfung des Manifests, der Icons und Splash Screens für iOS Das Manifest ist eine JSON-Datei, die im Head enthalten ist. Die Icon Implementation könnte wie folgt aussehen. Um das iOS-Icon und das Splash-Screen-Image zu implementieren, sollte man den folgenden Code in den Kopf der Website einfügen. Hier wird nur ein Beispiel für den Splash Screen gezeigt.

PWA Assets Generator
PWA App Icons und iOS Splash Screens
für die Progressive Web App

miTT PWA Asset Generator ist ein kostenloses Tool zur Erstellung von App Icons für Ihre Progressive Web App (PWA) und ios Splash Screens. Es hilft Ihnen für die Wordpress PWA Plugin wie miTT PWA, Joomla PWA PWA Plugin oder jede andere Web-App bzw. PWA.

PWA Assets generieren
für WordPress
für Joomla
oder jede andere Web-App

unterstützte Bildformate: png, jpg, webp
empfohlene Icon Größe : 512x512px
Seitenverhältnis: 1:1

Nach dem Ausfüllen der Felder und dem Hochladen des Bildes,
wird ein Zip-Ordner mit den generierten Icons und iOS Splash Screens
für PWA erstellt und zum Download bereitgestellt.

App-Store-Assets generieren
Apple Icon 1024x1024
Play Icon 512x512
Feature Graphic 1024x500

ein quadratisches Icon hochladen: png, jpg, webp
empfohlene Größe: 1024x1024px
das Apple Icon wird auf die Hintergrundfarbe geflattet - Apple lehnt Icons mit Alphakanal ab

Sie erhalten ein Zip mit apple-icon-1024.png (ohne Alphakanal),
play-icon-512.png und feature-graphic-1024x500.png -
fertig für App Store Connect und die Play Console.

App Store Screenshot Sizes: alle Größen für Apple und Google Play

Neben Icons und Feature Graphic verlangen beide Stores Screenshots in bestimmten Größen. Das sind die aktuellen App Store Screenshot Sizes für App Store Connect und die Google Play Console:

Store / Gerät	Größe in Pixel	Hinweis
App Store - iPhone 6,9"	1320 x 2868 (Hochformat)	Pflicht, z. B. iPhone 16 Pro Max; 2868 x 1320 für Querformat
App Store - iPhone 6,5"	1284 x 2778 oder 1242 x 2688	akzeptierte Alternative, wird für kleinere Geräte skaliert
App Store - iPad 13"	2064 x 2752 (oder 2048 x 2732)	Pflicht, wenn die App auf dem iPad läuft
App Store - App Icon	1024 x 1024	PNG ohne Alphakanal - dieser Generator flattet das Icon automatisch
Google Play - Smartphone-Screenshots	1080 x 1920 empfohlen	2-8 Screenshots, jede Seite zwischen 320 und 3840 px, 16:9 oder 9:16
Google Play - 7"-/10"-Tablet	bis 3840 px	optional, aber empfohlen für das Tablet-Ranking
Google Play - Feature Graphic	1024 x 500	Pflicht für Promotion-Platzierungen - erzeugt dieses Tool
Google Play - App Icon	512 x 512	PNG, max. 1 MB - erzeugt dieses Tool

Vor dem Einreichen: Testen Sie Ihre Universal Links und Android App Links mit dem kostenlosen AASA-Validator - er prüft apple-app-site-association und assetlinks.json. Und wer den kompletten Store-Release abgeben möchte, findet unter App erstellen lassen Festpreis-Pakete.

Erstellung benutzerdefinierte App Icon und Splash-Screens für Ihre PWA

Bei der Entwicklung einer Progressive Web App ist die Effizienz bei der Erstellung konsistenter Assets entscheidend. PWA-Asset-Generatoren, wie das kostenlose Tool miTT PWA Asset Generator, sind wichtige Werkzeuge, die Icons und Splash-Screens schnell und einheitlich für verschiedene Plattformen erstellen.

Das Wichtigste

miTT PWA Asset Generator vereinfacht die Erstellung von Icons und Splash Screens für Progressive Web Apps, indem er Entwicklern ermöglicht, Assets zu generieren, die den Web App Manifest-Spezifikationen entsprechen und auf allen Geräten nativ aussehen.
PWA-Assets wie Icons, Splash Screens und maskable Icons sind von grundlegender Bedeutung für die Verbesserung des Benutzererlebnisses, wobei die Generatoren plattformspezifische Anforderungen berücksichtigen und die Möglichkeit bieten, benutzerdefinierte Assets für verschiedene Ausrichtungen und Anzeigemodi zu erstellen.
Die Bilder werden in miTT PWA für WordPress und miTT PWA für Joomla hochgeladen.

Die Bilder werden in miTT PWA für WordPress und miTT PWA für Joomla hochgeladen.

Der Schlüssel zu einer visuell ansprechenden PWA liegt in den Details. Der Kern ermöglicht die Aufmerksamkeit auf die PWA-Icons und Splash-Screens, die mehr als nur hübsche Bilder sind. Diese generierten Bildobjekte entsprechen den Spezifikationen für Web-App-Manifeste und sorgen dafür, dass Ihre PWA auf jedem Gerät tadellos aussieht. Einige wichtige Assets sind zu beachten:

PWA Icons repräsentieren Ihre PWA auf dem Startbildschirm und in der App-Schublade des Benutzers. Sie sollten visuell ansprechend und leicht zu erkennen sein.
Splash-Screens: Diese Bildschirme erscheinen, wenn der Benutzer Ihre PWA startet, und sorgen für einen reibungslosen Übergang vom Startbildschirm zur App-Oberfläche.
Maskable Icons: Diese Icons sind so gestaltet, dass sie perfekt in die verschiedenen Symbolformen passen, die von den verschiedenen Geräteplattformen vorgegeben werden, und bieten ein Maß an Individualisierung, das die Benutzererfahrung verbessert.

Wenn Sie auf diese Details achten und die richtigen Assets verwenden, können Sie eine optisch ansprechende PWA erstellen, die das Benutzererlebnis verbessert.

Startbildschirme sind der erste Eindruck, den Ihre App bei einem Benutzer hinterlässt. PWA Asset Tools berücksichtigen die statischen Spezifikationsdaten und generieren Splash-Screens, die auf die einzigartigen Anforderungen verschiedener Plattformen zugeschnitten sind, wie z. B. die spezifischen Meta-Tags und Manifestdateien von Android und iOS. iOS benötigt den Splash-Screen in Form von Bildern, während Android dies über das Manifest die Icons abruft.

Icons und Splash Screens PWA für WordPress und PWA für Joomla

Der miTT PWA-Asset-Generator wurde entwickelt, um Splash-Screens und Icons für miTT PWA-Plugins zu generieren. Dies hilft Website-Administratoren schnell die PWA von CMS wie WordPress und Joomla einzurichten. Nach der Erstellung von Splash Screens und Icons können diese in den Ordner hochgeladen werden.

miTT PWA geht über die Ästhetik hinaus und unterstützt den Service-Worker-Lebenszyklus, um das Caching statischer Dateien zu verwalten und sicherzustellen, dass Ihre PWA immer mit den neuesten Inhalten aktualisiert wird. Die Manifest-Einstellungen in miTT PWA sind besonders erwähnenswert, da sie es Ihrer PWA ermöglichen, auf der zuletzt besuchten Seite zu starten, was das Verhalten einer nativen App nachahmt und die Benutzererfahrung verbessert.

Frequently Asked Questions (FAQ) PWA Asset Generator

Ein PWA-Asset-Generator vereinfacht die Erstellung von Assets für Progressive Web Apps, wie z. B. PWA-Icons und Splash Screens für PWA für Android und iOS.

miTT PWA Asset Generator ist ein kostenloses Tool zur Erstellung von Icons und Splash Screens.

Die gestreckten Startbildschirme auf Ihrer PWA für iPads mit iOS 13 oder neuer werden durch einen Fehler in Safari verursacht, der fälschlicherweise Hochformat-Startbildschirme für die Querformatansicht verwendet.

Die Verwendung von maskable Icons für Ihre PWA stellt sicher, dass Ihre App-Symbole korrekt angezeigt und nicht abgeschnitten oder minimiert werden, unabhängig von den Anforderungen an die Symbolform des Geräts oder Betriebssystems. Dies trägt dazu bei, ein konsistentes und professionelles Benutzererlebnis zu schaffen.

Wenn man PWA-Assets mit Tools wie dem PWA Asset Generator erstellt haben und sie in CMS-Plattformen wie WordPress und Joomla integrieren müssen, kann man Plugins wie miTT PWA (WordPress PWA und Joomla PWA) verwenden. Stellen Sie einfach sicher, dass die Icons gemäß den Anweisungen in der miTT PWA-Dokumentation in den entsprechenden Ordner hochladen.

Die Einbindung von visuell beeindruckenden PWA-Assets in Ihre Webanwendung kann eine schwierige Aufgabe sein, aber mit dem miTT PWA Asset Generator ist es ganz einfach.

die App-Icons in das Manifest einbinden
die Meta Tags für iOS Icon and splash screen im head hinzufügen
Prüfung des Manifests, der Icons und Splash Screens für iOS

Manifest Icons

Das Manifest ist eine JSON-Datei, die im Head enthalten ist. Die Icon Implementation könnte wie folgt aussehen.

"icons": [
  {
    "src": "/images/icons/manifest-icon-512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "/images/icons/manifest-icon-512.maskable.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  },
  {
    "src": "/images/icons/manifest-icon.svg",
    "sizes": "any",
      "type": "image/svg"
  },
]

iOS Icons and Splash Screens

Um das iOS-Icon und das Splash-Screen-Image zu implementieren, sollte man den folgenden Code in den Kopf der Website einfügen. Hier wird nur ein Beispiel für den Splash Screen gezeigt.

<link href="https://my.app/images/icons/apple-icon-180.png" rel="apple-touch-icon" sizes="180x180">
<link href="https://my.app/images/icons/apple-splash-2048-2732.png" rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2732-2048.jpg" rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1668-2388.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2388-1668.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1536-2048.jpg" rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2048-1536.jpg" rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1668-2224.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2224-1668.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1620-2160.jpg" rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2160-1620.jpg" rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1284-2778.jpg" rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2778-1284.jpg" rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1170-2532.jpg" rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2532-1170.jpg" rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1125-2436.jpg" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2436-1125.jpg" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1242-2688.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2688-1242.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-828-1792.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-1792-828.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1242-2208.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2208-1242.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-750-1334.jpg" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-1334-750.jpg" rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-640-1136.jpg" rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-1136-640.jpg" rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">