Alles über Progressive Web Apps und Umsetzung in TYPO3

• PWAs haben 36 % höhere Konversionsraten als native Apps.
• Laut Smashing Ideas bemerken Unternehmen, die auf PWA umsteigen, eine Umsatzsteigerung von mindestens 20 % bis zu 250 % für Unternehmen.
• Unternehmen, die auf PWAs umsteigen, bemerken einen Rückgang der Seitenladegeschwindigkeit um das bis zu 10-fache
• PWAs können bis zu 90% kleiner sein als native mobile Apps.
• Sehen Sie, wie die großen Marken PWA angepasst haben und damit florieren,

Um das Potenzial von PWA für Ihre TYPO3-Website zu erschließen, hat Macopedia mit der TYPO3 Extension for PWA Solution namens "pwa_manifest" eine großartige Lösung entwickelt.

Es ermöglicht Ihnen, innerhalb von Minuten mit der Erforschung von PWA-Lösungen für TYPO3 zu beginnen. Es bietet eine lokale Docker-/Dev-Umgebung mit TYPO3- und JS-Demo-Anwendungen. Es basiert auf

• https://github.com/TYPO3-Initiatives/headless
• https://github.com/TYPO3-Initiatives/headless_news
• https://github.com/TYPO3-Initiatives/nuxt-typo3
• https://github.com/TYPO3-Initiatives/create-nuxt-typo3

Lassen Sie uns lernen, wie Sie das PWA Manifest Modul für Ihre TYPO3 Website in einfachen Schritten installieren und konfigurieren,

Wichtige Anforderungen

Die Extension benötigt TYPO3 in der Version mindestens 9.5.

PWA-Manifest-Erweiterung herunterladen

Die Extension ist im TYPO3 Extension Repository für TYPO3 Version 9 & 10 in der Beta-Version verfügbar.

Klicken Sie hier zum Download.

Installation

Um die PWA-Manifest-Erweiterung mit Composer zu installieren, verwenden Sie,

composer require friendsoftypo3/pwa_manifest

Wenn Sie außerdem die TypoScript-Vorlage einbinden möchten und auf der Seite mit ?type=835.

Konfigurationen

Danach gehen Sie in Ihrem TYPO3-Backend direkt zur Site-Konfiguration und bearbeiten Ihre Seite und fügen die erforderlichen Informationen hinzu.

Das Web-App-Manifest

Die TYPO3 manifest.json-Datei ermöglicht es Benutzern, die PWA zu ihrem Startbildschirm hinzuzufügen. Sie enthält Konfigurationen, die Sie ändern können, um zu bestimmen, wie sich Ihre PWA verhält - wie Name, Anzeigename, Hintergrundfarbe, Ausrichtung und mehr.

Hier ist eine Referenz für Ihr Verständnis

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's the weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's the weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "540x720"
    }
  ]
}

Die Datei wird in den head-Tag Ihrer Index-Seite eingefügt.

<link rel="manifest" href = "/manifest.json">

Nach der Konfiguration und Einrichtung Ihrer Website wird, wie in der Abbildung unten gezeigt, die Option "Zum Startbildschirm hinzufügen" angezeigt. Wenn Sie diese Option auswählen, wird ein Symbol auf dem Startbildschirm erstellt.

Zur Auffrischung: PWAs sind mobile Websites, die mit einem JavaScript-Framework erstellt wurden und den Benutzern ein App-ähnliches Erlebnis bieten. PWAs sehen aus und verhalten sich wie normale Webseiten, haben aber einige der Funktionen einer mobilen App.

Sie müssen nicht Ihre gesamte Website neu codieren, um PWA-Funktionen hinzuzufügen. Je nach Ihrer Website gibt es verschiedene Möglichkeiten, eine PWA zu gestalten.

Um als PWA zu gelten, muss eine User Experience sein:

• Schnell - Sollte weniger als drei Sekunden zum Laden benötigen
• Zuverlässig - Es sollte auch unter schlechten Netzwerkbedingungen schnell laden
• Fesselnd - Es sollte den Benutzer in das Erlebnis eintauchen lassen
• Responsive - Muss auf Geräten unterschiedlicher Form und Größe funktionieren

Wenn Sie eine TYPO3-Site haben, ist es ziemlich einfach, Ihre TYPO3-Site mit einer TYPO3-Extension in eine PWA zu verwandeln.

Arbeitsmechanismus von PWA