Alles über TYPO3 PWA (Progressive Web Application)

Alles über TYPO3 PWA (Progressive Web Application)

This article machine-based automatically translated from English to the German language. As this article is not human translated, there may be chances of context, spelling and grammar mistakes. We recommend to read original article in English version.

Denken Sie darüber nach, Modern TYPO3 PWA in Ihre TYPO3 Website zu integrieren? Wenn ja, dann herzlichen Glückwunsch! In diesem Artikel werden Sie die Grundlagen von TYPO3 PWA und TYPO3 Headless CMS kennenlernen. Lesen Sie weiter!

PWA ist eine der modernsten Webtechnologien! Außerdem bekommt sie immer mehr Aufmerksamkeit von den Menschen, die daran glauben, dass ihre Unternehmenswebsites auf dem neuesten Stand bleiben. Glücklicherweise bleibt auch unsere geliebte TYPO3 Community mit modernen Technologien wie TYPO3 Headless CMS, TYPO3 PWA, etc. auf dem Laufenden. Möchten Sie mehr über TYPO3 PWA, TYPO3 Headless, TYPO3 APIs usw. erfahren? Dann nichts wie los!

Auf T3Terminal und NITSAN; Wir haben einige der Artikel über TYPO3 PWA und TYPO3 Headless CMS geschrieben. Ich empfehle, auch die spannenden Artikel zu lesen.

Liebe TYPO3-Leser, wie Sie wissen, ist es mein Ritual, die Arbeit der TYPO3-Leute zu würdigen. Ich möchte diesen Blog der Headless/PWA TYPO3 Initiative in der TYPO3 Community widmen. Einen großen Applaus für ihren engagierten Beitrag, TYPO3 auf das nächste Level zu bringen. #T3Kudos an alle!

Was ist eine Progressive Web App?

“Progressive Web App (PWA) ist ein Begriff, der eine neue Softwareentwicklungsmethode bezeichnet. Im Gegensatz zu herkömmlichen Anwendungen sind progressive Web Apps eine Mischung aus normalen Webseiten (oder Websites) und mobilen Anwendungen. Dieses neue Anwendungsmodell versucht, die von den meisten modernen Browsern angebotenen Funktionen mit den Vorteilen der mobilen Erfahrung zu kombinieren.”
- Wikipedia

Machen Sie keinen Fehler: Progressive Webanwendungen sind immer noch Websites. Sie sehen einfach aus wie eine App und fühlen sich auch so an, dank der modernen Webtechnologie. Das bedeutet, dass Kunden Progressive Web Apps in ihrem Browser mit einer URL wie jede andere Website durchsuchen, aber genau dann, wenn sie bei der PWA landen, kommen sie in den Genuss der Nutzung einer "App", direkt in ihrem Browser, ohne dass sie sie herunterladen und installieren müssen. Wie cool ist das denn!

Alles in allem ist PWA eine neue, zukunftssichere Technologie. Sie werden von Google bevorzugt und gefördert und haben sich bei einer Reihe der wichtigsten Namen der Branche als bahnbrechend erwiesen:

Was sind die Funktionen und Vorteile von TYPO3 PWA?

  • Sofortige Ladezeit
  • Offline-Browsing
  • Push-Benachrichtigung
  • Bereit für App & Play Stores
  • Startbildschirm Speichern
  • Keine Updates erforderlich
  • Verlinkbarkeit & Indizierung
  • Leichtgewicht

Wann ist ein guter Zeitpunkt, um mit TYPO3 PWA zu beginnen? JETZT!

Ja, die Antwort ist JETZT; Sie sollten die Implementierung der wichtigen Grundlagen von TYPO3 PWA in Betracht ziehen.

  • Die größten und besten Marken nutzen bereits PWA.
  • Die Mobile-first-Ära ist da.
  • Google kündigte die Mobile-First-Indexierung als Standard an.

3 Hauptbausteine der TYPO3 PWA

Es braucht nicht viel, um eine PWA zu installieren. Es gibt drei Dinge, die Sie bereitstellen müssen, bevor Ihre Website zu einer gültigen PWA wird.

#1 Sichere Verbindung (HTTPS)

PWAs funktionieren nur über vertrauenswürdige Verbindungen; Sie müssen sie über eine sichere Verbindung bereitstellen. Dies ist nicht immer nur aus Sicherheitsgründen sinnvoll. Es ist aber auch ein wichtiger Vertrauensfaktor für die Nutzer.

#2 Servicemitarbeiter

Ein Service Worker ist ein Teil eines Skripts, das im Hintergrund läuft. Damit können Sie entscheiden, wie Sie die Netzwerkanfragen in Ihrer PWA bearbeiten möchten, und so komplexere Arbeiten durchführen.

#3 Manifest.json

Diese JSON-Datei enthält Informationen darüber, wie Ihre PWA aussehen und funktionieren soll. Hier legen Sie den Namen, die Beschreibung, die Symbole, die Farben und so weiter fest.

Hier ist ein Muster, das von Google angezeigt wird:

 

// erstellen manifest.json
{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "description": "Weather forecast information",
  "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"
}

// Bei TYPO3-Code einbinden
<link rel="manifest" href = "/manifest.json">

Best Practice zum Hinzufügen von Favicons & Manifest.json in TYPO3

Hier ist der Beispielcode zum idealen Einfügen von Favicons und manifest.json für TYPO3 PWA.

 

<!-- erstellen. Favicons.html -->
<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
<link rel="apple-touch-icon" sizes="57x57" href="{f:uri.resource(path:'Favicons/apple-touch-icon-57x57.png')}">
<link rel="apple-touch-icon" sizes="60x60" href="{f:uri.resource(path:'Favicons/apple-touch-icon-60x60.png')}">
<link rel="apple-touch-icon" sizes="72x72" href="{f:uri.resource(path:'Favicons/apple-touch-icon-72x72.png')}">
<link rel="apple-touch-icon" sizes="76x76" href="{f:uri.resource(path:'Favicons/apple-touch-icon-76x76.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="{f:uri.resource(path:'Favicons/apple-touch-icon-114x114.png')}">
<link rel="apple-touch-icon" sizes="120x120" href="{f:uri.resource(path:'Favicons/apple-touch-icon-120x120.png')}">
<link rel="apple-touch-icon" sizes="144x144" href="{f:uri.resource(path:'Favicons/apple-touch-icon-144x144.png')}">
<link rel="apple-touch-icon" sizes="152x152" href="{f:uri.resource(path:'Favicons/apple-touch-icon-152x152.png')}">
<link rel="apple-touch-icon" sizes="180x180" href="{f:uri.resource(path:'Favicons/apple-touch-icon-180x180.png')}">
<link rel="icon" type="image/png" href="{f:uri.resource(path:'Favicons/favicon-32x32.png')}" sizes="32x32">
<link rel="icon" type="image/png" href="{f:uri.resource(path:'Favicons/android-chrome-192x192.png')}" sizes="192x192">
<link rel="icon" type="image/png" href="{f:uri.resource(path:'Favicons/favicon-96x96.png')}" sizes="96x96">
<link rel="icon" type="image/png" href="{f:uri.resource(path:'Favicons/favicon-16x16.png')}" sizes="16x16">
<link rel="manifest" href="{f:uri.resource(path:'Favicons/manifest.json')}">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="{f:uri.resource(path:'Favicons/mstile-144x144.png')}">
</html>

// Aufruf der Datei Favicons.html bei TypoScript
page.headerData.2039 = FLUIDTEMPLATE
page.headerData.2039 {
file = EXT:my_ext/Resources/Private/Templates/Favicons.html
  extbase.controllerExtensionName = MyExt
}

Einführung der TYPO3 PWA Initiative

"Progressive Web Apps sind derzeit ein heißes Thema. Sie ermöglichen es, dass mobile Websites wie native Apps aussehen und sich anfühlen, offline funktionieren oder installierbar sind und vieles mehr. TYPO3 sollte es einfach machen, progressive Webanwendungen zu erstellen.  Was auch erwähnenswert ist, ist, dass Google die PWA-Technologie als eine Best Practice für die Webanwendungen fördert."
- Team TYPO3 PWA

TYPO3 PWA ist 100% kostenlos und quelloffen!

Ihre fantastische Website = TYPO3 CMS + TYPO3PWA (Headless & Reactjs/Vuejs).

Zwei verschiedene Wege zur Einrichtung einer TYPO3 PWA

Um TYPO3 PWA zu implementieren, können Sie den einfachen Weg (mit EXT.pwa_manifest) und den besseren Weg (mit EXT.headless) wählen. Lassen Sie uns beide Ansätze für die Entwicklung der TYPO3 PWA-Anwendung im Detail betrachten.

#1 Verwendung von EXT.pwa_manifest (+ TYPO3 Fluid)

Diese Erweiterung bietet eine Funktion, um PWA-Funktionen zu Ihrer bestehenden TYPO3-Website hinzuzufügen, die mit TypoScript und Fluid entwickelt wurde. Ihre Website wird ein PWA-Manifest und einen ServiceWorker haben. Sie benötigen keine technischen oder programmiertechnischen Kenntnisse - installieren und konfigurieren Sie einfach die Erweiterung:

// Anforderungen prüfen
Die Extension benötigt TYPO3 in der Version 9.5 oder höher.

// Installation von EXT.pwa_manifest
Installieren Sie: composer require friendsoftypo3/pwa_manifest
TypoScript-Vorlage einbinden
Zugang zum Frontend mit ?type=835

// Konfiguration an Ihrem Standort
Gehen Sie zu Modul Sites > Site Management > Edit your site.

Offline Feature of PWA

The Offline feature of PWA is excellent! Unfortunately, EXT.pwa_manifest does not provide it. To get full features, you can consider EXT.headless + Any of your favour JS frameworks like Vujes/Reactjs; You can easily create an offline feature using such cool JS-stuff. For the quick and simple solution, you may consider online tools like www.pwabuilder.com You can grab ready-to-use Javascript code and configure it to your TYPO3 site

#2 EXT.headless verwenden (+ Reactjs/Vuejs)

Dies ist ein moderner Ansatz zur Erstellung Ihrer Website unter Verwendung von APIs, genannt "TYPO3 Headless CMS". Nehmen wir an, Sie planen die Entwicklung einer neuen Website. In diesem Fall können Sie dieses Modell mit TYPO3 Headless APIs für das Backend und jedem fantastischen Javascript-Framework (wie Reactjs/Vuejs) für das Frontend-Rendering in Betracht ziehen.

Das Team der TYPO3 Headless Initiative hat zwei Repositories erstellt: 1. die TYPO3 Headless Extension und 2. die Vuejs/Nextjs basierte Frontend-Anwendung.

// Systemanforderungen für TYPO3 PWA prüfen
Alles, was Sie brauchen, ist ddev in einer Version von mindestens v1.11.2.

// Installation von TYPO3 PWA
git clone github.com/TYPO3-Initiatives/pwa-demo.git
cd pwa-demo
ddev start
ddev pwa-front start
Frontend: pwa-demo.ddev.site
Backend: api.pwa-demo.ddev.site/typo3/ (admin:password)

// Frontend TYPO3 PWA (with Vuejs/Nuxtjs)
git clone github.com/TYPO3-Initiatives/nuxt-typo3.git
cd nuxt-typo3 && yarn install
yarn link
cd front && yarn link "nuxt-typo3"
yarn dev

 

Ausführlicheren Artikel lesen Im Trend: Was ist TYPO3 Headless CMS? Außerdem hat das Team von T3Terminal das allerersteTYPO3 React-Template entwickelt und auf den Markt gebracht Wie man TYPO3 + ReactJS verwendet [2021]

Schließung!

Vielen Dank für die Lektüre meines TYPO3-Blogs. Ich hoffe, Sie fanden ihn hilfreich.

Wir können nicht sagen, dass PWA die Native Apps in Zukunft verdrängen wird. Dennoch gibt es in der Community ein wachsendes Interesse an dieser Methode. PWAs stecken noch in den Kinderschuhen, und es gilt, eine Vielzahl von Herausforderungen zu bewältigen. Dennoch haben sie das Potenzial, die Art und Weise, wie das Web funktioniert, zu verändern.

Nahrung zum Nachdenken

Laut Henrik Joreteg ist "PWA das Größte, was im mobilen Web passiert ist, seit Steve das iPhone eingeführt hat!"

Umstritten? Umstritten? Einvernehmlich?

Denken Sie nach, bevor die Zeit vergeht!

Post Comment

Your email address will not be published. Required fields are marked *

×

Name ist erforderlich!

Geben Sie einen gültigen Namen ein

Gültige E-Mail ist erforderlich!

Gib eine gültige E-Mail Adresse ein

Kommentar ist erforderlich!

Google Captcha ist erforderlich!

Bemerkungen :

  • Klaus König October 7, 2021 Beim 12:18 pm
    I was very confused if I should go with TYPO3 PWA or other back-end technologies like Laravel, Node or even Express? TYPO3 has come out to be a very scalable and robust CMS and handling my content with such CMS would be very beneficial but I think about the complexity I would face while dealing with TYPO3 installation and configuration. Is it true that TYPO3 is a really complex CMS?
  • Laura Krause October 6, 2021 Beim 12:55 pm
    Nice content right there. I use both depending on the scenario and need. But I prefer composer while working with a complex TYPO3 project but installing it from TER is also effective for small sized projects.
  • Jürgen Schmitz October 5, 2021 Beim 11:28 am
    Nice blog on the Progressive Web Applications but my question is, if I make a website incredibly responsive and lightweight, can it be more superior than the progressive web app?
  • Felix Werner October 1, 2021 Beim 11:22 am
    I have been using progressive Web Application for my business for quite a while now, maybe it has been 2+ years since I started but the main thing that is so good is that certain features PWAs can provide that now other coding practice can do. I have also heard about TYPO3 CMS and my next target is to use TYPO3 as a back-end with React or Vue as the front-end.

12 Möglichkeiten, responsive TYPO3-Bilder zu erstellen!

Are you looking for tips & tricks to implement TYPO3 responsive images? To make your TYPO3 site modern responsive way - In this…

8 Premium TYPO3 Hosting-Anbieter

8 Premium TYPO3 Hosting-Anbieter

Viele von Ihnen denken darüber nach, eine Online-Präsenz mit einer TYPO3-Website zu starten und zu betreiben, und die Wahl des…

Die beste Anleitung zum TYPO3 Composer

Der beste Leitfaden zum TYPO3 Composer

Die TYPO3 Community liebt TYPO3 composer. Lernen Sie TYPO3 Composer vom Anfänger bis zum Fortgeschrittenen für produktive TYPO3…

Stay up to date with our recent TYPO3 Blogs, news, & updates