SEO-Wiki — SEO-Fach­be­grif­fe ver­ständ­lich erklärt!

Pro­gres­si­ve Web Apps (PWAs) sind Web­an­wen­dun­gen, die das Bes­te aus der Welt der klas­si­schen Web­sites und nati­ven Apps kom­bi­nie­ren. Sie nut­zen moder­ne Web­tech­no­lo­gien, um eine leis­tungs­fä­hi­ge Benut­zer­er­fah­rung zu bie­ten, die der einer nati­ven App ähnelt. Dabei funk­tio­nie­ren sie jedoch direkt im Web­brow­ser, ohne dass eine sepa­ra­te Instal­la­ti­on über einen App Store erfor­der­lich ist.

PWAs zeich­nen sich durch fol­gen­de Eigen­schaf­ten aus:

  • Platt­form­un­ab­hän­gig: Sie funk­tio­nie­ren auf nahe­zu allen Gerä­ten und Betriebssystemen.
  • Off­line-fähig: Dank Caching und Ser­vice Workers kön­nen Nut­zer PWAs auch ohne Inter­net­ver­bin­dung nutzen.
  • App-ähn­li­ches Ver­hal­ten: PWAs kön­nen als Icon auf dem Start­bild­schirm abge­legt wer­den und im Voll­bild­mo­dus laufen.
  • Schnell und respon­siv: Sie reagie­ren schnell auf Nut­zer­ein­ga­ben und pas­sen sich auto­ma­tisch an unter­schied­li­che Bild­schirm­grö­ßen an.

Der Begriff “Pro­gres­si­ve Web Apps” wur­de erst­mals 2015 von Goog­le ein­ge­führt, als die Not­wen­dig­keit ent­stand, die Vor­tei­le nati­ver Apps in das Web zu über­tra­gen. Vor der Ent­wick­lung von PWAs muss­ten Unter­neh­men ent­we­der nati­ve Apps für ver­schie­de­ne Platt­for­men (iOS, Android) oder eine ein­fa­che mobi­le Web­site erstel­len, um ihre Ziel­grup­pe zu errei­chen. PWAs lösen die­ses Dilem­ma, indem sie die Vor­tei­le bei­der Wel­ten in einer Lösung vereinen.

Die Ent­wick­lung von PWAs wur­de durch die Ein­füh­rung moder­ner Brow­ser-APIs, wie Ser­vice Workers, Web App Mani­fest und Push Noti­fi­ca­ti­ons, ermög­licht. Die­se Tech­no­lo­gien haben die Art und Wei­se revo­lu­tio­niert, wie Web­an­wen­dun­gen gebaut und ver­wen­det werden.

Vor­teil Beschrei­bung
Kein App Store nötig PWAs kön­nen direkt über den Brow­ser genutzt und auf dem Start­bild­schirm instal­liert wer­den. Das spart Zeit und ver­mei­det die Abhän­gig­keit von App Stores.
Off­line-Nut­zung Dank Ser­vice Workers und Caching-Funk­tio­nen kön­nen PWAs auch ohne Inter­net­ver­bin­dung funktionieren.
Gerin­ge­re Ent­wick­lungs- und Wartungskosten Eine PWA muss nur ein­mal ent­wi­ckelt wer­den und läuft auf ver­schie­de­nen Platt­for­men, was die Kos­ten im Ver­gleich zur Ent­wick­lung sepa­ra­ter Apps für iOS und Android reduziert.
Schnel­le Ladezeiten Durch Caching und opti­mier­te Lade­pro­zes­se reagie­ren PWAs deut­lich schnel­ler als klas­si­sche Websites.
Ver­bes­ser­te SEO Im Gegen­satz zu nati­ven Apps sind PWAs voll­stän­dig inde­xier­bar, was die Sicht­bar­keit in Such­ma­schi­nen erhöht.
Push-Benach­rich­ti­gun­gen PWAs bie­ten die Mög­lich­keit, Nut­zer über Push-Benach­rich­ti­gun­gen zu errei­chen, ähn­lich wie nati­ve Apps.

Für Unter­neh­men bie­ten PWAs eine kos­ten­ef­fi­zi­en­te Mög­lich­keit, sowohl ihre Sicht­bar­keit im Web zu erhö­hen als auch die Nut­zer­er­fah­rung zu opti­mie­ren. Ins­be­son­de­re für Unter­neh­men im E‑Com­mer­ce-Bereich oder im Bereich digi­ta­ler Dienst­leis­tun­gen bie­ten PWAs zahl­rei­che Vorteile:

  • Höhe­re Con­ver­si­on Rates: PWAs ver­bes­sern die Lade­zei­ten und bie­ten ein naht­lo­ses Nut­zer­er­leb­nis, was nach­weis­lich zu höhe­ren Con­ver­si­on Rates führt.
  • Redu­zier­te Absprungra­ten: Schnel­le Lade­zei­ten und Off­line-Funk­tio­na­li­tä­ten sor­gen dafür, dass Nut­zer län­ger auf der Sei­te bleiben.
  • Bes­se­re Reich­wei­te: Da PWAs platt­form­un­ab­hän­gig sind, kön­nen Unter­neh­men mit einer ein­zi­gen Web­an­wen­dung eine brei­te Nut­zer­ba­sis erreichen.

Ein gutes Bei­spiel für den erfolg­rei­chen Ein­satz von PWAs ist Pin­te­rest, das nach der Imple­men­tie­rung einer PWA einen Anstieg der Inter­ak­tio­nen um 60% und eine Stei­ge­rung der Con­ver­si­on Rate um 44% ver­zeich­nen konnte.

Pro­gres­si­ve Web Apps (PWAs) kom­bi­nie­ren die bes­ten Eigen­schaf­ten klas­si­scher Web­sei­ten mit der Per­for­mance und dem Look-and-Feel nati­ver Apps. Durch die Nut­zung moder­ner Web­tech­no­lo­gien bie­ten sie Nut­zern eine schnel­le, zuver­läs­si­ge und attrak­ti­ve Anwen­dung, die sowohl auf mobi­len Gerä­ten als auch auf Desk­tops her­vor­ra­gend funktioniert.

Die Kern­prin­zi­pi­en von PWAs sind:

Pro­gres­si­ve Ver­bes­se­rung (Pro­gres­si­ve Enhancement)

  • PWAs sind so kon­zi­piert, dass sie auch auf älte­ren Brow­sern funk­tio­nie­ren, jedoch die neu­es­ten Tech­no­lo­gien auf moder­nen Brow­sern voll ausnutzen.

Off­line-Funk­tio­na­li­tät und Zuverlässigkeit

  • Dank Ser­vice Workers kön­nen PWAs auch ohne Inter­net­ver­bin­dung genutzt wer­den. Ser­vice Workers sind Skrip­te, die im Hin­ter­grund aus­ge­führt wer­den, um Caching und Off­line-Funk­tio­na­li­tä­ten zu ermöglichen.

App-ähn­li­ches Nutzererlebnis

  • Durch die Nut­zung von Web App Mani­fests und Ser­vice Workers kön­nen PWAs wie nati­ve Apps auf dem Start­bild­schirm instal­liert und im Voll­bild­mo­dus aus­ge­führt werden.

Schnel­le Lade­zei­ten und Caching

  • PWAs sind für schnel­le Lade­zei­ten opti­miert, indem sie Caching-Stra­te­gien ein­set­zen. Dies ver­bes­sert die User Expe­ri­ence und redu­ziert die Absprungrate.

Eine der wich­tigs­ten Eigen­schaf­ten von PWAs ist ihre Fähig­keit, sich an ver­schie­de­ne Bild­schirm­grö­ßen und ‑auf­lö­sun­gen anzu­pas­sen. Unab­hän­gig davon, ob die PWA auf einem Smart­phone, Tablet oder Desk­top genutzt wird, bleibt die Benut­zer­ober­flä­che intui­tiv und leicht zugänglich.

  • Fle­xi­bles Lay­out: PWAs nut­zen CSS Media Queries, um sich dyna­misch an unter­schied­li­che Bild­schirm­grö­ßen anzupassen.
  • Mobi­le-First-Design: PWAs wer­den oft mit dem Mobi­le-First-Ansatz ent­wi­ckelt, was bedeu­tet, dass sie zuerst für mobi­le Gerä­te opti­miert wer­den und sich dann nach oben skalieren.

Bei­spiel für ein ein­fa­ches CSS Media Query:

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
@media (min-width: 769px) {
  body {
    font-size: 16px;
  }
}

Ser­vice Workers sind das Herz­stück von PWAs, wenn es um die Off­line-Funk­tio­na­li­tät geht. Sie fun­gie­ren als Pro­xy zwi­schen dem Brow­ser und dem Netz­werk und ermög­li­chen das Caching von Res­sour­cen. Dadurch kön­nen Nut­zer die Anwen­dung auch dann ver­wen­den, wenn sie kei­ne Inter­net­ver­bin­dung haben.

Vor­tei­le von Ser­vice Workers:

  • Off­line-Zugriff: Inhal­te wer­den zwi­schen­ge­spei­chert, sodass Nut­zer auch bei schlech­ter oder feh­len­der Inter­net­ver­bin­dung wei­ter­ar­bei­ten können.
  • Push-Benach­rich­ti­gun­gen: Ser­vice Workers ermög­li­chen auch das Sen­den von Push-Benach­rich­ti­gun­gen, um Nut­zer auf dem Lau­fen­den zu halten.

Bei­spiel für die Regis­trie­rung eines Ser­vice Workers:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registriert:', registration);
    })
    .catch(error => {
      console.error('Service Worker Registrierung fehlgeschlagen:', error);
    });
}

Eine schnel­le Lade­zeit ist ent­schei­dend für das Nut­zer­er­leb­nis und die SEO-Per­for­mance einer PWA. Durch Caching und opti­mier­te Daten­über­tra­gungs­tech­ni­ken kön­nen PWAs eine her­vor­ra­gen­de Per­for­mance bieten.

Caching-Stra­te­gien für PWAs:

  • Cache First: Beim ers­ten Laden wird die Res­sour­ce zwi­schen­ge­spei­chert. Bei zukünf­ti­gen Anfra­gen wird die zwi­schen­ge­spei­cher­te Ver­si­on ver­wen­det, es sei denn, die Res­sour­ce ist abgelaufen.
  • Net­work First: Die Res­sour­ce wird zuerst aus dem Netz­werk abge­ru­fen und nur im Fal­le eines Feh­lers aus dem Cache geladen.
  • Sta­le-While-Reva­li­da­te: Eine zwi­schen­ge­spei­cher­te Res­sour­ce wird sofort zurück­ge­ge­ben, wäh­rend im Hin­ter­grund eine Aktua­li­sie­rung aus dem Netz­werk abge­ru­fen wird.

Bei­spiel für eine Cache-Stra­te­gie mit Ser­vice Workers:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      return cachedResponse || fetch(event.request).then(response => {
        return caches.open('my-cache').then(cache => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

PWAs bie­ten ein app-ähn­li­ches Erleb­nis, indem sie Web App Mani­fests ver­wen­den, die eine ein­fa­che Mög­lich­keit bie­ten, eine Web­an­wen­dung wie eine nati­ve App zu gestalten.

Was ist ein Web App Manifest?

  • Ein JSON-Datei­for­mat, das Infor­ma­tio­nen wie den Namen, das Icon und die Start-URL der PWA enthält.
  • Es ermög­licht die Instal­la­ti­on der PWA auf dem Start­bild­schirm und sorgt dafür, dass die Anwen­dung im Voll­bild­mo­dus aus­ge­führt wird.

Bei­spiel für ein Web App Mani­fest:

{
  "name": "Meine PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Damit eine Web­an­wen­dung als PWA aner­kannt wird, muss sie bestimm­te Anfor­de­run­gen erfüllen:

  • HTTPS: PWAs müs­sen über eine siche­re Ver­bin­dung (HTTPS) bereit­ge­stellt wer­den, um die Inte­gri­tät und Sicher­heit der Daten zu gewährleisten.
  • Ser­vice Worker: Min­des­tens ein Ser­vice Worker muss instal­liert sein, um Caching und Off­line-Funk­tio­na­li­tä­ten zu ermöglichen.
  • Web App Mani­fest: Ein gül­ti­ges Mani­fest muss vor­han­den sein, um die App-ähn­li­chen Eigen­schaf­ten zu definieren.
Tech­no­lo­gi­sche Anforderung Beschrei­bung
HTTPS Not­wen­dig für Sicher­heit und Inte­gri­tät der Datenübertragung.
Ser­vice Worker Ermög­licht Caching, Off­line-Funk­tio­na­li­tät und Push-Benachrichtigungen.
Web App Manifest Defi­niert die App-Ein­stel­lun­gen wie Icons, Namen und Start-URL.

Pro­gres­si­ve Web Apps (PWAs) sind nicht nur moder­ne, leis­tungs­fä­hi­ge Web­an­wen­dun­gen, son­dern set­zen auf eine Kom­bi­na­ti­on von Tech­no­lo­gien, die das Nut­zer­er­leb­nis ver­bes­sern und die Leis­tungs­fä­hig­keit erhö­hen. In die­sem Abschnitt wer­den wir die wich­tigs­ten Tech­no­lo­gien hin­ter PWAs erklä­ren, dar­un­ter Ser­vice Workers, Web App Mani­fest, HTTPS, und ver­schie­de­ne Caching-Stra­te­gien.

Ein Ser­vice Worker ist ein Java­Script-Skript, das im Hin­ter­grund aus­ge­führt wird, unab­hän­gig von der eigent­li­chen Web­an­wen­dung. Er fun­giert als Pro­xy zwi­schen dem Brow­ser und dem Netz­werk und ermög­licht Funk­tio­nen wie Caching, Off­line-Nut­zung und Push-Benach­rich­ti­gun­gen.

Funk­ti­ons­wei­se:

  • Instal­la­ti­on: Beim ers­ten Auf­ruf der PWA wird der Ser­vice Worker installiert.
  • Akti­vie­rung: Nach der Instal­la­ti­on wird der Ser­vice Worker akti­viert und beginnt, Anfra­gen abzufangen.
  • Caching: Der Ser­vice Worker kann Res­sour­cen wie HTML-Datei­en, Bil­der und Skrip­te zwi­schen­spei­chern, um sie spä­ter off­line bereitzustellen.
  • Hin­ter­grund-Syn­chro­ni­sa­ti­on: Der Ser­vice Worker kann im Hin­ter­grund Daten syn­chro­ni­sie­ren, auch wenn die PWA geschlos­sen ist.

Bei­spiel für die Regis­trie­rung eines Ser­vice Workers:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(reg => console.log('Service Worker registriert:', reg))
    .catch(err => console.error('Service Worker Registrierung fehlgeschlagen:', err));
}
  • Off­line-Zugriff: Durch Caching kön­nen Nut­zer auch ohne Inter­net­ver­bin­dung auf Inhal­te zugreifen.
  • Push-Benach­rich­ti­gun­gen: Hal­te Nut­zer über wich­ti­ge Updates auf dem Lau­fen­den, auch wenn die Anwen­dung nicht aktiv ist.
  • Ver­bes­ser­te Lade­zei­ten: Inhal­te wer­den lokal zwi­schen­ge­spei­chert, um die Lade­zei­ten bei zukünf­ti­gen Besu­chen zu verkürzen.

Das Web App Mani­fest ist eine JSON-Datei, die defi­niert, wie eine PWA auf einem Gerät dar­ge­stellt wird, sobald sie instal­liert ist. Es ermög­licht, dass die PWA wie eine nati­ve App wirkt, mit eige­nem Icon, Start­bild­schirm und Vollbildmodus.

Wich­ti­ge Bestand­tei­le eines Web App Mani­fests:

  • name: Der voll­stän­di­ge Name der Anwendung.
  • short_name: Eine kur­ze Ver­si­on des Namens, die auf klei­ne­ren Bild­schir­men ange­zeigt wird.
  • start_url: Die URL, die beim Start der App gela­den wird.
  • dis­play: Wie die App dar­ge­stellt wird (z.B. standalone, fullscreen, minimal-ui).
  • icons: Eine Lis­te von Icons in ver­schie­de­nen Grö­ßen für die Dar­stel­lung auf dem Startbildschirm.
  • background_color: Hin­ter­grund­far­be wäh­rend des Ladevorgangs.
  • theme_color: Far­be der Benutzeroberfläche.

Bei­spiel für ein Web App Mani­fest:

{
  "name": "Meine PWA App",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Pro­gres­si­ve Web Apps müs­sen über eine siche­re HTTPS-Ver­bin­dung bereit­ge­stellt wer­den. Dies ist not­wen­dig, um die Sicher­heit der Daten­über­tra­gung zu gewähr­leis­ten und den Ein­satz von Ser­vice Workers zu ermög­li­chen. Ser­vice Workers haben weit­rei­chen­den Zugriff auf Netz­werk­an­fra­gen und Caching-Funk­tio­nen, was sie poten­zi­ell anfäl­lig für Man-in-the-Midd­le-Angrif­fe machen könn­te, wenn die Ver­bin­dung unsi­cher wäre.

War­um HTTPS wich­tig ist:

  • Daten­schutz: Schützt sen­si­ble Nut­zer­da­ten vor unbe­fug­tem Zugriff.
  • Ver­trau­en: Nut­zer füh­len sich siche­rer, wenn sie eine ver­schlüs­sel­te Ver­bin­dung sehen.
  • SEO-Vor­teil: Goog­le bevor­zugt Web­sites, die über HTTPS bereit­ge­stellt wer­den, was sich posi­tiv auf das Ran­king auswirkt.

Wie man HTTPS für eine Web­site ein­rich­tet:

  • Ver­wen­de ein SSL-Zer­ti­fi­kat von einer ver­trau­ens­wür­di­gen Zer­ti­fi­zie­rungs­stel­le (z.B. Let’s Encrypt).
  • Stel­le sicher, dass alle Res­sour­cen (Bil­der, Skrip­te, Style­sheets) eben­falls über HTTPS gela­den werden.

Caching ist ein wesent­li­cher Bestand­teil von PWAs, um schnel­le Lade­zei­ten und Off­line-Funk­tio­na­li­tä­ten zu gewähr­leis­ten. Ser­vice Workers spie­len hier eine ent­schei­den­de Rol­le, da sie Netz­werk­an­fra­gen abfan­gen und zwi­schen­ge­spei­cher­te Inhal­te bereit­stel­len können.

Häu­fig genutz­te Caching-Strategien:

Caching-Stra­te­gieBeschrei­bung
Cache FirstDie zwi­schen­ge­spei­cher­te Ver­si­on wird zuerst ver­wen­det. Nur wenn kei­ne zwi­schen­ge­spei­cher­te Ver­si­on vor­han­den ist, wird eine Netz­werk­ab­fra­ge durchgeführt.
Net­work FirstDie Netz­werk­ver­si­on wird zuerst ver­sucht. Wenn die­se fehl­schlägt, wird die zwi­schen­ge­spei­cher­te Ver­si­on verwendet.
Sta­le-While-Reva­li­da­teEine zwi­schen­ge­spei­cher­te Ver­si­on wird sofort zurück­ge­ge­ben, wäh­rend im Hin­ter­grund eine Netz­werk­ab­fra­ge zur Aktua­li­sie­rung gestar­tet wird.
Cache OnlyNur der Cache wird durch­sucht. Es wird kei­ne Netz­werk­ab­fra­ge durchgeführt.
Net­work OnlyNur das Netz­werk wird durch­sucht, ohne den Cache zu berücksichtigen.

 

Bei­spiel für die Imple­men­tie­rung der “Cache First”-Strategie:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      return cachedResponse || fetch(event.request).then(response => {
        return caches.open('my-cache').then(cache => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

Pro­gres­si­ve Web Apps (PWAs) bie­ten nicht nur Nut­zern eine ver­bes­ser­te Erfah­rung, son­dern auch Unter­neh­men zahl­rei­che Vor­tei­le, ins­be­son­de­re im Bereich der Such­ma­schi­nen­op­ti­mie­rung (SEO). Die­ser Abschnitt beleuch­tet, wie PWAs zur Stei­ge­rung der Sicht­bar­keit in Such­ma­schi­nen und zur Opti­mie­rung der Nutz­er­bin­dung beitragen.

Eine der wich­tigs­ten Eigen­schaf­ten von PWAs ist die stark ver­bes­ser­te User Expe­ri­ence (UX). Goog­le legt gro­ßen Wert auf die Nut­zer­freund­lich­keit von Web­sites und bevor­zugt Sei­ten, die schnel­le Lade­zei­ten, Mobi­le-Opti­mie­rung und gerin­ge Absprungra­ten auf­wei­sen. Da PWAs die­se Anfor­de­run­gen erfül­len, haben sie oft einen Vor­teil gegen­über klas­si­schen Websites.

Grün­de, war­um Goog­le PWAs bevorzugt:

  • Schnel­le Lade­zei­ten: Durch Caching und opti­mier­te Daten­über­tra­gung sind PWAs extrem schnell, was die Absprungra­te senkt und die Ver­weil­dau­er erhöht.
  • Mobi­le-First-Inde­xie­rung: PWAs sind mobil­freund­lich und pas­sen sich an ver­schie­de­ne Bild­schirm­grö­ßen an, was sie ide­al für die Mobi­le-First-Inde­xie­rung von Goog­le macht.
  • Opti­ma­le Per­for­mance: Da PWAs auf moder­nen Web­tech­no­lo­gien basie­ren, bie­ten sie eine rei­bungs­lo­se und schnel­le Inter­ak­ti­on, was sich posi­tiv auf die Nut­zer­er­fah­rung auswirkt.

Im Ver­gleich zu her­kömm­li­chen Web­sei­ten und nati­ven Apps haben PWAs einen erheb­li­chen Vor­teil, wenn es um SEO geht. Da PWAs HTML-Sei­ten sind, die über einen Brow­ser auf­ge­ru­fen wer­den, kön­nen sie von Such­ma­schi­nen voll­stän­dig inde­xiert werden.

SEO-Vor­tei­le im Über­blick:

Vor­teil Beschrei­bung
Schnel­le­re Ladezeiten Goog­le bevor­zugt schnel­le Web­sites. Dank Caching-Tech­ni­ken laden PWAs nahe­zu sofort.
Mobil­freund­lich­keit PWAs sind von Haus aus für mobi­le End­ge­rä­te opti­miert, was sich posi­tiv auf das Goog­le-Ran­king auswirkt.
Nied­ri­ge Absprungraten Die schnel­le Lade­ge­schwin­dig­keit und das app-ähn­li­che Erleb­nis hal­ten Nut­zer län­ger auf der Seite.
Bes­se­re Indexierbarkeit Im Gegen­satz zu nati­ven Apps sind PWAs voll­stän­dig durch­such­bar und kön­nen direkt in Such­ma­schi­nen erscheinen.
HTTPS und Sicherheit Da PWAs über HTTPS bereit­ge­stellt wer­den, gewin­nen sie zusätz­lich an Ver­trau­en bei Google.

Ein wesent­li­cher Vor­teil von PWAs für Unter­neh­men ist die Kos­ten­er­spar­nis bei der Ent­wick­lung und War­tung. Im Gegen­satz zu nati­ven Apps, die für ver­schie­de­ne Platt­for­men (iOS, Android) sepa­rat ent­wi­ckelt wer­den müs­sen, ist eine PWA eine ein­ma­li­ge Ent­wick­lung, die auf allen Gerä­ten und Betriebs­sys­te­men funktioniert.

Ver­gleich: PWA vs. nati­ve Apps:

Kri­te­ri­umPWAsNati­ve Apps
Ent­wick­lungs­zeitGering, da nur ein­ma­li­ge EntwicklungHoch, sepa­ra­te Apps für iOS und Android
War­tungEin­fach, eine CodebasisAuf­wän­dig, meh­re­re Codebasen
Ver­füg­bar­keitDirekt über BrowserDown­load aus App Stores erforderlich
Kos­tenNied­rigHoch

Eine wei­te­re Stär­ke von PWAs ist die Mög­lich­keit, Push-Benach­rich­ti­gun­gen zu nut­zen, ähn­lich wie bei nati­ven Apps. Die­se Push-Nach­rich­ten kön­nen gezielt genutzt wer­den, um Nut­zer zu reak­ti­vie­ren und die Nutz­er­bin­dung zu erhö­hen. Dar­über hin­aus kön­nen PWAs dank ihrer Off­line-Fähig­keit auch in Gebie­ten mit schlech­ter Inter­net­ver­bin­dung oder sogar kom­plett ohne Inter­net­zu­gang ver­wen­det werden.

Wie PWAs die Nutz­er­bin­dung erhöhen:

  • Push-Benach­rich­ti­gun­gen: Hal­ten Nut­zer auf dem Lau­fen­den und för­dern die Interaktion.
  • Off­line-Zugriff: Nut­zer kön­nen Inhal­te wei­ter­hin nut­zen, selbst wenn sie kei­ne Inter­net­ver­bin­dung haben.
  • Naht­lo­ses App-Erleb­nis: Durch die Mög­lich­keit, die PWA auf dem Start­bild­schirm zu spei­chern, fühlt sie sich an wie eine nati­ve App.

Bei­spiel für Push-Benach­rich­ti­gun­gen mit Ser­vice Workers:

self.addEventListener('push', event => {
  const options = {
    body: event.data.text(),
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge.png'
  };
  event.waitUntil(
    self.registration.showNotification('Benachrichtigung', options)
  );
});
  • Erhöh­te Nut­zer­zu­frie­den­heit: Nut­zer haben jeder­zeit Zugriff auf wich­ti­ge Inhalte.
  • Ver­bes­ser­te Kun­den­bin­dung: Durch kon­ti­nu­ier­li­che Ver­füg­bar­keit bleibt die Ver­bin­dung zu Kun­den stark, auch bei insta­bi­ler Internetverbindung.

Pro­gres­si­ve Web Apps (PWAs) und nati­ve Apps sind bei­de leis­tungs­star­ke Optio­nen zur Bereit­stel­lung mobi­ler Anwen­dun­gen, unter­schei­den sich jedoch grund­le­gend in ihrer Ent­wick­lung, Ver­füg­bar­keit und Funk­tio­na­li­tät. In die­sem Abschnitt beleuch­ten wir die wesent­li­chen Unter­schie­de zwi­schen den bei­den Ansät­zen und erklä­ren, wann der Ein­satz einer PWA oder einer nati­ven App vor­teil­haft ist.

Kri­te­ri­um PWAs Nati­ve Apps
Ent­wick­lungs­zeit Ein­ma­li­ge Ent­wick­lung für alle Plattformen Sepa­ra­te Ent­wick­lung für iOS und Android
Ent­wick­lungs­kos­ten Gerin­ger, da eine ein­zi­ge Codebasis Höher, da unter­schied­li­che Platt­for­men bedient wer­den müssen
Ver­füg­bar­keit Direkt über Brow­ser zugänglich Über App Stores erhältlich
Instal­la­ti­on Ohne App Store, direkt über den Brow­ser installierbar Instal­la­ti­on über App Stores erforderlich
Per­for­mance Sehr gut, aber abhän­gig vom Browser Opti­ma­le Per­for­mance, spe­zi­ell für das jewei­li­ge Betriebs­sys­tem entwickelt
Zugriff auf Hardware-Funktionen Ein­ge­schränkt (z.B. GPS, Kame­ra, Push-Benachrichtigungen) Vol­ler Zugriff auf alle Funk­tio­nen des Geräts
Updates Auto­ma­ti­sche Updates ohne Nutzerinteraktion Manu­el­le Updates über den App Store
Off­line-Funk­tio­na­li­tät Dank Ser­vice Workers möglich Unter­stützt, aber oft datenintensiver
SEO-Fähig­keit Voll­stän­dig indexierbar Nicht inde­xier­bar, außer über den App Store
  • PWAs: Da PWAs ein­mal ent­wi­ckelt wer­den und auf allen Platt­for­men funk­tio­nie­ren, sind sowohl die Ent­wick­lungs­zeit als auch die Kos­ten deut­lich gerin­ger. Es wird nur eine ein­heit­li­che Code­ba­sis benö­tigt, was die War­tung erleichtert.
  • Nati­ve Apps: Die Ent­wick­lung nati­ver Apps erfor­dert sepa­ra­te Teams für iOS und Android, was die Kos­ten und den Zeit­auf­wand erheb­lich erhöht. Außer­dem müs­sen regel­mä­ßi­ge Updates für jede Platt­form bereit­ge­stellt werden.
  • PWAs: PWAs sind über den Brow­ser zugäng­lich und kön­nen ohne Umweg über einen App Store direkt auf dem Start­bild­schirm des Geräts instal­liert wer­den. Dies erleich­tert die Ver­brei­tung und redu­ziert die Hür­den für die Nutzer.
  • Nati­ve Apps: Die­se müs­sen über App Stores wie den Goog­le Play Store oder Apple App Store her­un­ter­ge­la­den wer­den. Der Pro­zess der Ver­öf­fent­li­chung in den Stores kann auf­wen­dig sein und unter­liegt stren­gen Richtlinien.
  • Kein Geneh­mi­gungs­pro­zess: PWAs umge­hen die kom­ple­xen Über­prü­fungs­pro­zes­se der App Stores.
  • Schnel­ler Zugang: Nut­zer kön­nen die Anwen­dung mit nur einem Klick hin­zu­fü­gen, ohne War­te­zei­ten beim Download.
  • PWAs: Wäh­rend PWAs vie­le Hard­ware-Funk­tio­nen wie GPS, Kame­ra und Push-Benach­rich­ti­gun­gen unter­stüt­zen, haben sie ein­ge­schränk­ten Zugriff auf kom­ple­xe­re Funk­tio­nen wie Blue­tooth, NFC oder sys­tem­wei­te Benach­rich­ti­gun­gen.
  • Nati­ve Apps: Nati­ve Apps bie­ten den voll­stän­digs­ten Zugriff auf die Hard­ware des Geräts und sind daher die bes­se­re Wahl für Anwen­dun­gen, die inten­si­ve Hard­ware-Inter­ak­tio­nen erfor­dern (z.B. Aug­men­ted Rea­li­ty, Gam­ing).

Bei­spiel für die Nut­zung von Geo­lo­ca­ti­on in einer PWA:

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`);
  });
}

Vor- und Nach­tei­le bei­der Ansätze

Aspekt Vor­tei­le von PWAs Vor­tei­le von nati­ven Apps
Ent­wick­lungs­kos­ten Kos­ten­güns­tig, eine Codebasis Bes­se­re Anpas­sung an spe­zi­fi­sche Plattformen
Ver­brei­tung Direkt über den Browser Gro­ße Reich­wei­te durch App Stores
Leis­tung Sehr gut, aber browserabhängig Maxi­ma­le Leis­tung und Zugriff auf alle Funktionen
Off­line-Nut­zung Durch Ser­vice Workers unterstützt Off­line-Modus und umfas­sen­der Gerätezugriff
Updates Auto­ma­ti­sche Hintergrund-Updates Manu­el­le Updates über App Stores erforderlich
SEO Inde­xier­bar durch Suchmaschinen Nicht durch­such­bar, ein­ge­schränk­te SEO

Pro­gres­si­ve Web Apps (PWAs) haben sich als leis­tungs­fä­hi­ge Alter­na­ti­ve zu nati­ven Apps eta­bliert. Um jedoch das vol­le Poten­zi­al von PWAs aus­zu­schöp­fen, müs­sen Ent­wick­ler eine Rei­he von Best Prac­ti­ces befol­gen, die sicher­stel­len, dass die Anwen­dung sowohl für Nut­zer als auch für Such­ma­schi­nen opti­miert ist. In die­sem Abschnitt erläu­tern wir die wich­tigs­ten Best Prac­ti­ces, die Unter­neh­men und Ent­wick­ler bei der Erstel­lung von PWAs beach­ten sollten.

Der Mobi­le-First-Ansatz bedeu­tet, dass eine PWA zuerst für mobi­le Gerä­te ent­wi­ckelt und anschlie­ßend für grö­ße­re Bild­schir­me opti­miert wird. Da immer mehr Nut­zer über Smart­phones auf das Inter­net zugrei­fen, ist eine opti­mier­te mobi­le Nut­zer­er­fah­rung ent­schei­dend für den Erfolg.

Schlüs­sel­stra­te­gien für den Mobile-First-Ansatz:

  • Respon­si­ve Design: Ver­wen­de CSS Media Queries, um sicher­zu­stel­len, dass sich die PWA an ver­schie­de­ne Bild­schirm­grö­ßen anpasst.
  • Opti­mier­te Touch-Inter­ak­tio­nen: Stel­le sicher, dass Schalt­flä­chen und Links groß genug sind, um pro­blem­los auf Touch­screens bedient zu werden.
  • Lazy Loa­ding: Ver­zö­ge­re das Laden von Bil­dern und ande­ren Res­sour­cen, die sich außer­halb des sicht­ba­ren Bereichs befin­den, um die Lade­ge­schwin­dig­keit zu erhöhen.

Bei­spiel für ein CSS Media Query zur Anpas­sung an mobi­le Gerä­te:

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Pro­gres­si­ve Enhance­ment stellt sicher, dass eine PWA auch auf älte­ren Brow­sern funk­tio­niert, wäh­rend sie gleich­zei­tig moder­ne Funk­tio­nen auf unter­stütz­ten Platt­for­men nutzt. Der Ansatz zielt dar­auf ab, die Grund­funk­tio­na­li­tät der Anwen­dung auch auf ver­al­te­ten Gerä­ten bereitzustellen.

Best Prac­ti­ces für Pro­gres­si­ve Enhancement:

  • Fea­ture Detec­tion: Ver­wen­de Fea­ture Detec­tion anstel­le von Brow­ser Detec­tion, um sicher­zu­stel­len, dass Funk­tio­nen nur dann akti­viert wer­den, wenn der Brow­ser sie unterstützt.
  • Fall­back-Mecha­nis­men: Imple­men­tie­re Fall­backs für Funk­tio­nen wie Ser­vice Workers oder Push-Benach­rich­ti­gun­gen, falls der Brow­ser die­se nicht unterstützt.

Bei­spiel für Fea­ture Detec­tion in Java­Script:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => console.log('Service Worker aktiviert'))
    .catch(err => console.error('Service Worker Fehler:', err));
} else {
  console.log('Service Worker wird von diesem Browser nicht unterstützt.');
}

Die Lade­zeit einer PWA ist ein ent­schei­den­der Fak­tor für die Nut­zer­zu­frie­den­heit und das SEO-Ran­king. Lang­sa­me Lade­zei­ten füh­ren zu höhe­ren Absprungra­ten, was sich nega­tiv auf die Sicht­bar­keit in Such­ma­schi­nen aus­wirkt. Hier sind eini­ge Tech­ni­ken, um die Lade­zeit zu optimieren:

Tech­ni­ken zur Ladezeitoptimierung:

Tech­nik Beschrei­bung
Caching mit Ser­vice Workers Ver­wen­de Ser­vice Workers, um sta­ti­sche Res­sour­cen zu cachen und Off­line-Zugriff zu ermöglichen.
Lazy Loa­ding Lade nur Bil­der und Inhal­te, die aktu­ell im sicht­ba­ren Bereich sind.
Code-Split­ting Tei­le Java­Script-Code in klei­ne­re, leicht lad­ba­re Modu­le auf.
Bil­der optimieren Ver­wen­de kom­pri­mier­te Bil­der­for­ma­te wie WebP und SVG, um die Lade­zeit zu reduzieren.
Mini­fi­zie­rung Mini­fi­zie­re CSS, Java­Script und HTML, um die Datei­grö­ße zu verringern.

Bei­spiel für Lazy Loa­ding von Bil­dern:

<img src="placeholder.jpg" data-src="image.jpg" class="lazyload" alt="Optimiertes Bild">
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img.lazyload');
    lazyImages.forEach(img => {
      img.src = img.dataset.src;
    });
  });
</script>

Auch wenn PWAs nicht direkt in den App Stores gelis­tet sind, kön­nen sie durch Such­ma­schi­nen­op­ti­mie­rung (SEO) gut auf­find­bar gemacht wer­den. Da PWAs voll­stän­dig inde­xier­bar sind, kann eine gut opti­mier­te PWA in den Goog­le-Such­ergeb­nis­sen genau­so gut oder sogar bes­ser ran­ken als her­kömm­li­che Websites.

Wich­ti­ge SEO-Maß­nah­men für PWAs

  • Ver­wen­dung von spre­chen­den URLs: Stel­le sicher, dass die URLs der PWA leicht ver­ständ­lich und SEO-freund­lich sind.
  • Struk­tu­rier­te Daten: Imple­men­tie­re Schema.org-Markup, um Goog­le zusätz­li­che Infor­ma­tio­nen zu dei­ner PWA zu liefern.
  • Opti­mie­rung der Meta-Tags: Ver­wen­de rele­van­te Key­words in Title-Tags, Meta-Descrip­ti­ons und Überschriften.
  • Schnel­le Lade­zei­ten: Eine schnel­le PWA ver­bes­sert das Ran­king, da Goog­le die Page Expe­ri­ence als wich­ti­gen Ran­king-Fak­tor einstuft.
  • Mobi­le-Opti­mie­rung: Da Goog­le eine Mobi­le-First-Inde­xie­rung ver­wen­det, ist es ent­schei­dend, dass die PWA auf mobi­len Gerä­ten gut funktioniert.

Bei­spiel für die Imple­men­tie­rung von struk­tu­rier­ten Daten:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebApplication",
  "name": "Meine PWA",
  "url": "https://www.example.com",
  "description": "Eine Progressive Web App für mobile Nutzer",
  "operatingSystem": "All",
  "applicationCategory": "WebApplication"
}
</script>

Pro­gres­si­ve Web Apps (PWAs) bie­ten nicht nur eine her­vor­ra­gen­de Nut­zer­er­fah­rung, son­dern sind auch für Such­ma­schi­nen opti­mier­bar. Damit eine PWA gut bei Goog­le und ande­ren Such­ma­schi­nen rankt, müs­sen bestimm­te SEO-Tech­ni­ken ange­wen­det wer­den. In die­sem Abschnitt erklä­ren wir, wie du dei­ne PWA für Inde­xie­rung, Craw­ling, URL-Struk­tur, struk­tu­rier­te Daten und Lade­zeit­op­ti­mie­rung opti­mie­ren kannst.

Goog­le behan­delt PWAs ähn­lich wie her­kömm­li­che Web­sites, was bedeu­tet, dass sie von Such­ma­schi­nen inde­xiert und gecrawlt wer­den kön­nen. Damit dei­ne PWA jedoch gut sicht­bar ist, musst du sicher­stel­len, dass sie craw­ler­freund­lich ist.

  • Sta­ti­sche URLs ver­wen­den: Dyna­mi­sche URLs kön­nen für Craw­ler pro­ble­ma­tisch sein.
  • robots.txt und Site­maps ein­rich­ten: Hilf Such­ma­schi­nen, die Struk­tur dei­ner PWA bes­ser zu verstehen.
  • Java­Script SEO: Da PWAs oft Java­Script-basiert sind, stel­le sicher, dass wich­ti­ge Inhal­te auch dann gela­den wer­den, wenn Java­Script deak­ti­viert ist.

Bei­spiel für eine ein­fa­che robots.txt-Datei:

User-agent: *
Allow: /
Disallow: /private/
Sitemap: https://www.example.com/sitemap.xml

Eine sau­be­re URL-Struk­tur ist ent­schei­dend für die SEO-Opti­mie­rung einer PWA. Ver­mei­de Dupli­ca­te Con­tent, der zu einer Abstra­fung durch Goog­le füh­ren kann, und nut­ze Cano­ni­cal Tags, um zu kenn­zeich­nen, wel­che URL die bevor­zug­te Ver­si­on ist.

Best Prac­ti­ces zur URL-Opti­mie­rung:

  • Ver­wen­de spre­chen­de URLs wie https://www.example.com/pwa-guide anstel­le von https://www.example.com/index.php?id=123.
  • Nut­ze Cano­ni­cal Tags, um Dupli­ca­te Con­tent zu vermeiden:
<link rel="canonical" href="https://www.example.com/pwa-guide">
  • Imple­men­tie­re 301-Wei­ter­lei­tun­gen anstel­le von 302-Wei­ter­lei­tun­gen, um Link­juice zu erhalten.

Bei­spiel für eine URL-Struk­tur:

Ori­gi­nal URL Opti­mier­te URL
https://www.example.com/?p=123 https://www.example.com/ratgeber
https://www.example.com/page?id=45 https://www.example.com/kontakt

Durch den Ein­satz von struk­tu­rier­ten Daten (Schema.org-Markup) kön­nen Such­ma­schi­nen bes­ser ver­ste­hen, wor­um es auf dei­ner Web­site geht. Dies kann die Sicht­bar­keit und Klick­ra­te in den Such­ergeb­nis­sen verbessern.

Wel­che struk­tu­rier­ten Daten soll­ten ver­wen­det wer­den?:

  • Bread­crumbs: Um die Navi­ga­ti­on und Hier­ar­chie dei­ner PWA anzuzeigen.
  • FAQ­Pa­ge und How­To: Für häu­fig gestell­te Fra­gen und Anlei­tun­gen, die als Rich Snip­pets ange­zeigt wer­den können.
  • Web­Ap­pli­ca­ti­on: Spe­zi­fi­sche Mark­up für PWAs, um deren Eigen­schaf­ten hervorzuheben

Bei­spiel für struk­tu­rier­te Daten für eine PWA:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebApplication",
  "name": "Meine PWA",
  "url": "https://www.example.com",
  "description": "Eine Progressive Web App für mobile Nutzer",
  "operatingSystem": "All",
  "applicationCategory": "WebApplication",
  "browserRequirements": "Requires JavaScript. Requires HTML5."
}
</script>

Die Lade­zeit ist ein ent­schei­den­der Fak­tor für die SEO-Per­for­mance und die User Expe­ri­ence einer PWA. Nut­zer ver­las­sen lang­sa­me Sei­ten schnell, was zu höhe­ren Absprungra­ten führt. Eine opti­mier­te Lade­zeit wirkt sich daher posi­tiv auf die Sicht­bar­keit in den Such­ergeb­nis­sen aus.

Tech­ni­ken zur Opti­mie­rung der Lade­zeit:

Tech­nik Beschrei­bung
Lazy Loa­ding Ver­zö­gert das Laden von Bil­dern und Res­sour­cen, die außer­halb des sicht­ba­ren Bereichs liegen.
Pre-Caching Nutzt Ser­vice Workers, um wich­ti­ge Res­sour­cen vor­ab zu laden, sodass sie sofort ver­füg­bar sind.
Con­tent Deli­very Net­work (CDN) Beschleu­nigt die Bereit­stel­lung von Inhal­ten durch Ser­ver, die geo­gra­fisch näher am Nut­zer liegen.
Mini­fi­zie­rung Redu­ziert die Datei­grö­ße von CSS, Java­Script und HTML durch Ent­fer­nen von Leer­zei­chen und Kommentaren.

 

Bei­spiel für Lazy Loa­ding von Bil­dern:

<img src="placeholder.jpg" data-src="image.jpg" class="lazyload" alt="Bildbeschreibung">
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const lazyImages = document.querySelectorAll('img.lazyload');
    lazyImages.forEach(img => {
      img.src = img.dataset.src;
    });
  });
</script>

Bei­spiel für Pre-Caching mit Ser­vice Workers:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('pwa-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        '/icon.png'
      ]);
    })
  );
});

Pro­gres­si­ve Web Apps (PWAs) haben sich in den letz­ten Jah­ren als eine leis­tungs­star­ke Tech­no­lo­gie eta­bliert, die Unter­neh­men dabei unter­stützt, ihre Nut­zer­er­fah­rung zu ver­bes­sern und ihre Online-Per­for­mance zu opti­mie­ren. In die­sem Abschnitt stel­len wir eini­ge erfolg­rei­che Bei­spie­le aus ver­schie­de­nen Bran­chen vor, um zu zei­gen, wie der Ein­satz von PWAs zu höhe­ren Nut­zer­zah­len, ver­bes­ser­ten Con­ver­si­on Rates und einer stär­ke­ren Nutz­er­bin­dung geführt hat.

Twit­ter Lite

  • Pro­blem: Twit­ter woll­te die Nut­zer­er­fah­rung für mobi­le Nut­zer ver­bes­sern, ins­be­son­de­re in Regio­nen mit lang­sa­men Internetverbindungen.
  • Lösung: Die Ein­füh­rung von Twit­ter Lite als PWA, die weni­ger Daten ver­braucht und schnel­ler lädt.
  • Ergeb­nis:
  • 20% weni­ger Absprungrate
  • 65% mehr Sei­ten­auf­ru­fe pro Session
  • 75% Anstieg der Tweets pro Nutzer

Pin­te­rest

  • Pro­blem: Pin­te­rest ver­zeich­ne­te eine nied­ri­ge Con­ver­si­on Rate auf mobi­len Geräten.
  • Lösung: Durch die Imple­men­tie­rung einer PWA konn­te Pin­te­rest die Per­for­mance auf mobi­len Gerä­ten erheb­lich verbessern.
  • Ergeb­nis:
  • 40% Stei­ge­rung der Nut­zer­zeit auf der Seite
  • 44% Anstieg der Anzeigen-Einnahmen
  • 60% Zunah­me der Core Enga­ge­ments (Pin-Inter­ak­tio­nen)

Ali­Ex­press

  • Pro­blem: Ali­Ex­press hat­te eine gerin­ge Con­ver­si­on Rate auf mobi­len Gerä­ten und woll­te die Nut­zer­er­fah­rung verbessern.
  • Lösung: Ein­füh­rung einer PWA, um ein app-ähn­li­ches Erleb­nis ohne App-Down­load zu bieten.
  • Ergeb­nis:
  • 104% höhe­re Con­ver­si­on Rate für neue Nutzer
  • 82% höhe­re Con­ver­si­on Rate für iOS-Nutzer
  • 74% län­ge­re Sit­zun­gen pro Nutzer

E‑Commerce: Triv­ago

  • Her­aus­for­de­rung: Triv­ago woll­te die Lade­ge­schwin­dig­keit und Nut­zer­er­fah­rung auf mobi­len Gerä­ten verbessern.
  • Lösung: Imple­men­tie­rung einer PWA, die schnel­le Lade­zei­ten und eine Off­line-Nut­zung ermöglicht.
  • Ergeb­nis:
  • 150% mehr Nut­zer, die die App zum Start­bild­schirm hinzufügten
  • 97% höhe­re Click-Through-Rate (CTR)

Nach­rich­ten­por­tal: The Washing­ton Post

  • Her­aus­for­de­rung: Die Lade­ge­schwin­dig­keit der mobi­len Web­site war zu lang­sam, was zu hohen Absprungra­ten führte.
  • Lösung: Ent­wick­lung einer PWA, um eine schnel­le­re Lade­zeit zu gewährleisten.
  • Ergeb­nis:
  • Redu­zie­rung der Lade­zeit auf unter 1 Sekunde
  • 23% Zunah­me der mobi­len Nutzerinteraktionen

Rei­se­bran­che: Uber

  • Her­aus­for­de­rung: Uber benö­tig­te eine schnel­le und leicht­ge­wich­ti­ge Lösung, um Fahr­ten in Gebie­ten mit schlech­ter Netz­ab­de­ckung zu ermöglichen.
  • Lösung: Eine PWA mit einer Datei­grö­ße von nur 50 KB, die inner­halb von 3 Sekun­den auch bei 2G-Netz­wer­ken gela­den wer­den kann.
  • Ergeb­nis:
  • Erheb­li­che Stei­ge­rung der Nut­zung in Regio­nen mit lang­sa­men Internetverbindungen
Unter­neh­men Vor PWA-Ein­füh­rung Nach PWA-Ein­füh­rung
Twit­ter Lite Hohe Absprungra­te 20% weni­ger Absprungrate
Pin­te­rest Nied­ri­ge Con­ver­si­on Rate auf Mobil 44% höhe­re Con­ver­si­on Rate
Ali­Ex­press Gerin­ge Nutzerbindung 82% mehr iOS-Conversions
Triv­ago Lang­sa­me Ladezeiten 150% mehr Nut­zer, die die App speichern
The Washing­ton Post Lan­ge Ladezeiten Redu­zier­te Lade­zeit auf unter 1 Sekunde

Eine Pro­gres­si­ve Web App (PWA) zu ent­wi­ckeln, erfor­dert sowohl eine sorg­fäl­ti­ge Pla­nung als auch die Nut­zung moder­ner Web­tech­no­lo­gien. In die­sem Abschnitt füh­ren wir dich Schritt für Schritt durch den Ent­wick­lungs­pro­zess einer PWA und erklä­ren, wel­che Tools und Tech­no­lo­gien du ver­wen­den soll­test, um eine leis­tungs­fä­hi­ge und benut­zer­freund­li­che Anwen­dung zu erstellen.

Bevor du mit der Ent­wick­lung einer PWA beginnst, ist es wich­tig, die Pro­jekt­an­for­de­run­gen klar zu defi­nie­ren. Die­ser ers­te Schritt sorgt dafür, dass die Anwen­dung nicht nur die Bedürf­nis­se der Nut­zer erfüllt, son­dern auch für Such­ma­schi­nen opti­miert ist.

Wich­ti­ge Über­le­gun­gen vor dem Start:

  • Ziel­grup­pe und Anfor­de­run­gen: Wer sind die Nut­zer dei­ner PWA und wel­che Funk­tio­nen sind für sie wichtig?
  • Platt­form­über­grei­fen­de Kom­pa­ti­bi­li­tät: Die PWA soll­te sowohl auf Desk­top- als auch auf mobi­len Gerä­ten naht­los funktionieren.
  • Sicher­heits­an­for­de­run­gen: PWAs müs­sen über eine HTTPS-Ver­bin­dung bereit­ge­stellt werden.
  • SEO-Stra­te­gie: Defi­nie­re, wie du sicher­stel­len kannst, dass die PWA gut von Such­ma­schi­nen inde­xiert wird.
  • Ziel­grup­pen­ana­ly­se durchführen
  • Anfor­de­run­gen an die Nut­zer­er­fah­rung (UX) festlegen
  • Funk­tio­na­le und nicht-funk­tio­na­le Anfor­de­run­gen dokumentieren
  • Sicher­heits­kon­zept für HTTPS einplanen
1. Erstel­len des Web App Manifest

Das Web App Mani­fest ist eine JSON-Datei, die grund­le­gen­de Infor­ma­tio­nen über dei­ne PWA ent­hält. Es ermög­licht Nut­zern, die PWA wie eine nati­ve App auf ihrem Start­bild­schirm zu installieren.

Bei­spiel für ein Web App Mani­fest:

{
  "name": "Meine PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "description": "Eine progressive Webanwendung für mobile Nutzer",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Was das Mani­fest bewirkt:

  • name und short_name: Anzei­ge­na­me der App.
  • start_url: URL, die beim Star­ten der PWA gela­den wird.
  • dis­play: standalone sorgt dafür, dass die PWA ohne Brow­ser-UI läuft.
  • icons: Icons für die Dar­stel­lung auf dem Startbildschirm.

2. Imple­men­tie­ren von Ser­vice Workers

Ein Ser­vice Worker ist ein Java­Script-Skript, das im Hin­ter­grund läuft und Anfra­gen abfängt, um Funk­tio­nen wie Caching, Off­line-Nut­zung und Push-Benach­rich­ti­gun­gen zu ermöglichen.

Bei­spiel: Regis­trie­rung eines Ser­vice Workers:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(reg => console.log('Service Worker registriert:', reg))
    .catch(err => console.error('Service Worker Registrierung fehlgeschlagen:', err));
}

Bei­spiel: Ein­fa­che Caching-Stra­te­gie im Ser­vice Worker:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('pwa-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        '/icons/icon-192x192.png'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      return cachedResponse || fetch(event.request);
    })
  );
});

Vor­tei­le von Ser­vice Workers:

  • Off­line-Funk­tio­na­li­tät: Ermög­licht das Caching von Sei­ten, sodass sie auch ohne Inter­net­ver­bin­dung ver­füg­bar sind.
  • Ver­bes­ser­te Lade­zei­ten: Inhal­te wer­den aus dem Cache gela­den, was die Lade­ge­schwin­dig­keit erheb­lich erhöht.

3. Tes­ten und Debug­gen der PWA

Bevor dei­ne PWA live geht, ist es wich­tig, sie gründ­lich zu tes­ten und zu debug­gen. Dies stellt sicher, dass die Anwen­dung auf allen Gerä­ten und Brow­sern rei­bungs­los funktioniert.

Tools für das Tes­ten und Debug­gen:

  • Goog­le Light­house: Über­prüft die Per­for­mance, Zugäng­lich­keit und SEO dei­ner PWA.
  • Brow­ser Dev­Tools: Tes­te die Off­line-Funk­tio­na­li­tät und den Cache-Status.
  • PWA­Buil­der: Ein Online-Tool, das dir hilft, die Ein­hal­tung der PWA-Best Prac­ti­ces zu überprüfen.

Bei­spiel: Light­house-Ana­ly­se star­ten: Öff­ne die Dev­Tools in Chro­me (F12) und gehe zum Tab Light­house, um einen Bericht zur Per­for­mance und PWA-Kon­for­mi­tät zu generieren.

Um die Ent­wick­lung von PWAs zu erleich­tern, gibt es eine Viel­zahl von Frame­works und Biblio­the­ken. Die­se hel­fen dabei, wie­der­keh­ren­de Auf­ga­ben zu auto­ma­ti­sie­ren und die Ent­wick­lungs­zeit zu verkürzen.

Framework/Bibliothek Beschrei­bung
React Ein belieb­tes Java­Script-Frame­work für die Ent­wick­lung von Sin­gle-Page-Appli­ca­ti­ons und PWAs.
Angu­lar Bie­tet eine Viel­zahl von Funk­tio­nen, um PWAs mit hoher Per­for­mance zu entwickeln.
Vue.js Ein leicht­ge­wich­ti­ges Frame­work, das sich ide­al für PWAs eig­net, die eine schnel­le Lade­zeit benötigen.
Work­box Eine Samm­lung von Biblio­the­ken und Tools zur Ver­wal­tung von Ser­vice Workers und Caching-Strategien.
Light­house Ein Open-Source-Tool von Goog­le zur Ana­ly­se und Opti­mie­rung von PWAs.

Die Ent­wick­lung von Pro­gres­si­ve Web Apps (PWAs) kann durch den Ein­satz spe­zi­el­ler Tools und Frame­works erheb­lich erleich­tert wer­den. In die­sem Abschnitt stel­len wir die bes­ten Audit Tools, Frame­works und Tech­ni­ken zur Brow­ser-Unter­stüt­zung vor, die dir hel­fen, eine leis­tungs­fä­hi­ge und opti­mier­te PWA zu entwickeln.

Bevor eine PWA ver­öf­fent­licht wird, ist es wich­tig, ihre Per­for­mance, Benut­zer­freund­lich­keit und SEO-Opti­mie­rung zu über­prü­fen. Hier­für gibt es spe­zi­el­le Tools, die eine umfas­sen­de Ana­ly­se der PWA ermöglichen.

Goog­le Lighthouse

  • Beschrei­bung: Ein Open-Source-Tool, das direkt in den Chro­me Dev­Tools inte­griert ist. Es bewer­tet dei­ne PWA in Bezug auf Per­for­mance, Acces­si­bi­li­ty (Zugäng­lich­keit), Best Prac­ti­ces und SEO.
  • Funk­tio­nen:
  • Über­prü­fung der Lade­zeit und Optimierungsvorschläge
  • Prü­fung der Off­line-Fähig­keit und Ser­vice Worker-Implementierung
  • Ana­ly­se der SEO-Freund­lich­keit und mobi­le Optimierung
  • So star­test du einen Light­house-Audit:
  • Öff­ne Chro­me und navi­gie­re zur Website.
  • Drü­cke F12, um die Dev­Tools zu öffnen.
  • Wechs­le zum Tab Light­house und wäh­le die zu prü­fen­den Kate­go­rien aus.
  • Kli­cke auf Gene­ra­te report.

PWA­Buil­der

  • Beschrei­bung: Ein Online-Tool von Micro­soft, das Ent­wick­lern hilft, PWAs zu erstel­len und zu optimieren.
  • Funk­tio­nen:
  • Auto­ma­ti­sier­te Erstel­lung des Web App Mani­fests und Ser­vice Workers
  • Ana­ly­se und Ver­bes­se­rungs­vor­schlä­ge zur Opti­mie­rung der PWA
  • Bereit­stel­lung von Down­loads für App Store-Veröffentlichungen

HTML-Code für eine Tabel­le mit Audit Tools:

Tool Beschrei­bung Funk­tio­nen
Goog­le Lighthouse Ein Tool zur Über­prü­fung der PWA-Qua­li­tät direkt in Chro­me DevTools. Per­for­mance, SEO, Zugäng­lich­keit, Offline-Fähigkeit
PWA­Buil­der Ein Online-Tool zur Erstel­lung und Opti­mie­rung von PWAs. Mani­fest-Gene­rie­rung, Ser­vice Worker, App Store-Kompatibilität

Die Wahl des rich­ti­gen Frame­works kann die Ent­wick­lung von PWAs beschleu­ni­gen und die War­tung ver­ein­fa­chen. Hier sind die drei belieb­tes­ten Java­Script-Frame­works, die sich her­vor­ra­gend für die Ent­wick­lung von PWAs eignen:

React

  • Beschrei­bung: Eine Java­Script-Biblio­thek, die von Face­book ent­wi­ckelt wur­de und sich ide­al für Sin­gle-Page-Anwen­dun­gen (SPAs) eignet.
  • War­um React für PWAs?:
  • Gro­ße Com­mu­ni­ty und umfang­rei­che Biblio­the­ken zur Erweiterung
  • Ein­fa­che Inte­gra­ti­on von Ser­vice Workers mit Crea­te React App
  • Bei­spiel: Ein­fa­che Regis­trie­rung eines Ser­vice Workers in einer React-App
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => console.log('Service Worker registriert'))
    .catch(err => console.error('Service Worker Fehler:', err));
}

Angu­lar

  • Beschrei­bung: Ein umfas­sen­des Frame­work von Goog­le, das sich für kom­ple­xe Web­an­wen­dun­gen eignet.
  • War­um Angu­lar für PWAs?:
  • Ein­ge­bau­te Unter­stüt­zung für PWAs mit dem Angu­lar CLI
  • Ein­fa­che Kon­fi­gu­ra­ti­on von Ser­vice Workers und Caching
  • Befehl zur Kon­ver­tie­rung einer Angu­lar-App in eine PWA:
ng add @angular/pwa

Vue.js

  • Beschrei­bung: Ein leicht­ge­wich­ti­ges Frame­work, das sich ide­al für die Ent­wick­lung schnel­ler PWAs eignet.
  • War­um Vue.js für PWAs?:
  • Modu­la­rer Auf­bau und ein­fa­che Integration
  • Unter­stützt die Erstel­lung von PWAs mit Plug­ins wie @vue/cli-plugin-pwa
  • Befehl zur Akti­vie­rung des PWA-Plug­ins in einer Vue-App:
vue add pwa

Eine gut ent­wi­ckel­te PWA soll­te auf mög­lichst vie­len Brow­sern und Gerä­ten funk­tio­nie­ren. Hier ist eine Über­sicht, wel­che Brow­ser PWAs unter­stüt­zen und wie du mög­li­che Kom­pa­ti­bi­li­täts­pro­ble­me umge­hen kannst.

Brow­ser Unter­stüt­zung für PWAs Hin­wei­se
Goog­le Chrome Voll­stän­dig Bes­te Unter­stüt­zung für Ser­vice Workers und Web App Manifest
Mozil­la Firefox Voll­stän­dig Gute Unter­stüt­zung, jedoch Ein­schrän­kun­gen bei Push-APIs
Micro­soft Edge Voll­stän­dig Unter­stützt PWAs nativ, beson­ders in der neu­en Chro­mi­um-basier­ten Version
Safa­ri (iOS) Teil­wei­se Kei­ne voll­stän­di­ge Unter­stüt­zung für Ser­vice Workers
Ope­ra Voll­stän­dig Unter­stützt PWAs auf Basis der Chromium-Engine
  • Ver­wen­de Fea­ture Detec­tion, um sicher­zu­stel­len, dass Funk­tio­nen wie Ser­vice Workers nur auf unter­stütz­ten Brow­sern akti­viert werden.
  • Imple­men­tie­re Fall­back-Mecha­nis­men für Brow­ser, die kei­ne voll­stän­di­ge PWA-Unter­stüt­zung bieten.

Bei­spiel für Fea­ture Detec­tion in Java­Script:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => console.log('Service Worker aktiviert'))
    .catch(err => console.error('Fehler:', err));
} else {
  console.log('Service Worker nicht unterstützt');
}

Pro­gres­si­ve Web Apps (PWAs) haben in den letz­ten Jah­ren stark an Bedeu­tung gewon­nen, und ihre Ent­wick­lung ist noch lan­ge nicht abge­schlos­sen. Die Tech­no­lo­gie wird kon­ti­nu­ier­lich ver­bes­sert, um die Benut­zer­er­fah­rung zu opti­mie­ren und die Lücke zwi­schen nati­ven Apps und Web­an­wen­dun­gen wei­ter zu schlie­ßen. In die­sem Abschnitt wer­fen wir einen Blick auf die zukünf­ti­gen Ent­wick­lun­gen, Trends und Her­aus­for­de­run­gen, die PWAs erwarten.

Erwei­ter­ter Zugriff auf Gerätefunktionen

  • In der Ver­gan­gen­heit waren PWAs im Ver­gleich zu nati­ven Apps in Bezug auf den Zugriff auf Hard­ware-Funk­tio­nen wie Blue­tooth, NFC oder bio­me­tri­sche Sen­so­ren ein­ge­schränkt. In Zukunft wer­den jedoch immer mehr Brow­ser-APIs ent­wi­ckelt, die PWAs den Zugriff auf sys­tem­na­he Funk­tio­nen ermöglichen.
  • Bei­spie­le für neue APIs, die in der Ent­wick­lung sind:
  • File Sys­tem Access API: Ermög­licht den direk­ten Zugriff auf das Datei­sys­tem des Nutzers.
  • Web Blue­tooth API: Zugriff auf Bluetooth-Geräte.
  • NFC API: Nut­zung von Nah­feld­kom­mu­ni­ka­ti­on (z.B. für kon­takt­lo­se Zahlungen).

Ver­bes­ser­te Offline-Fähigkeiten

  • Ser­vice Workers wer­den wei­ter opti­miert, um noch robus­te­re Off­line-Erfah­run­gen zu bie­ten. Künf­tig könn­ten PWAs sogar kom­ple­xe Daten­ban­ken off­line syn­chro­ni­sie­ren, was beson­ders für Busi­ness-Anwen­dun­gen nütz­lich wäre.

App Store-Inte­gra­ti­on

  • PWAs sind mitt­ler­wei­le nicht nur über den Brow­ser zugäng­lich, son­dern kön­nen auch in den App Stores von Goog­le und Micro­soft ver­öf­fent­licht wer­den. In Zukunft könn­ten PWAs auch im Apple App Store voll­stän­dig inte­griert wer­den, was die Ver­brei­tung die­ser Tech­no­lo­gie wei­ter för­dern würde.

Ver­bes­ser­te SEO-Fähigkeiten

  • Da Goog­le wei­ter­hin die Page Expe­ri­ence und die Lade­zei­ten als Ran­king-Fak­to­ren prio­ri­siert, wer­den PWAs, die auf Per­for­mance und Nut­zer­er­fah­rung opti­miert sind, im Such­ma­schi­nen­ran­king wei­ter an Bedeu­tung gewinnen.

Bei­spiel für zukünf­ti­ge APIs und ihre Nut­zung:

if ('bluetooth' in navigator) {
  navigator.bluetooth.requestDevice({ acceptAllDevices: true })
    .then(device => console.log('Verbunden mit:', device.name))
    .catch(err => console.error('Bluetooth Fehler:', err));
}

Die Inte­gra­ti­on von PWAs in bestehen­de Sys­te­me und Infra­struk­tu­ren wird immer ein­fa­cher, da moder­ne Ent­wick­lungs­werk­zeu­ge und Tech­no­lo­gien die Inter­ope­ra­bi­li­tät för­dern. Unter­neh­men, die bereits eine Web­prä­senz oder eine nati­ve App haben, kön­nen durch die Imple­men­tie­rung einer PWA zusätz­li­che Vor­tei­le erzielen.

Best Prac­ti­ces zur Inte­gra­ti­on von PWAs in bestehen­de Sys­te­me:

Schritt­wei­se Ein­füh­rung:

  • Unter­neh­men kön­nen PWAs schritt­wei­se ein­füh­ren, indem sie zunächst nur Tei­le ihrer Web­site als PWA bereit­stel­len (z.B. bestimm­te Sei­ten oder Funktionen).

Nut­zung bestehen­der APIs:

  • Durch die Ver­wen­dung von APIs wie REST oder Gra­ph­QL kön­nen PWAs pro­blem­los mit bestehen­den Backend-Sys­te­men interagieren.

Kom­bi­na­ti­on von nati­ven Apps und PWAs:

  • Hybri­de Ansät­ze sind eben­falls mög­lich, bei denen Unter­neh­men sowohl eine nati­ve App als auch eine PWA anbie­ten, um unter­schied­li­che Ziel­grup­pen zu erreichen.
Vor­tei­le der PWA-Integration Beschrei­bung
Kos­ten­ef­fi­zi­enz Gerin­ge­re Ent­wick­lungs- und War­tungs­kos­ten im Ver­gleich zu nati­ven Apps.
Platt­form­un­ab­hän­gig­keit Eine PWA läuft auf allen Gerä­ten und Betriebs­sys­te­men ohne Anpassungen.
Ver­bes­ser­te SEO Da PWAs voll­stän­dig inde­xier­bar sind, kön­nen sie direkt in Such­ma­schi­nen gefun­den werden.

Trotz ihrer zahl­rei­chen Vor­tei­le ste­hen PWAs noch immer vor eini­gen Her­aus­for­de­run­gen, die in den nächs­ten Jah­ren ange­gan­gen wer­den müssen:

Ein­ge­schränk­ter Zugriff auf bestimm­te Hardware-Funktionen

  • Wäh­rend sich die Brow­ser-APIs kon­ti­nu­ier­lich ver­bes­sern, bleibt der Zugriff auf spe­zi­el­le Hard­ware wie bio­me­tri­sche Sen­so­ren, Kame­ra-APIs und NFC noch ein­ge­schränkt. Ins­be­son­de­re auf iOS-Gerä­ten ist der Funk­ti­ons­um­fang begrenzt.

Apple und die Zurück­hal­tung bei PWAs

  • Apple hat bis­her Ser­vice Workers und Push-Benach­rich­ti­gun­gen in Safa­ri auf iOS nur ein­ge­schränkt unter­stützt. Die­se Zurück­hal­tung könn­te das Wachs­tum von PWAs auf iOS-Gerä­ten behindern.

Sicher­heits­an­for­de­run­gen und Datenschutz

  • Da PWAs den Zugriff auf sen­si­ble Daten und Gerä­te­funk­tio­nen ermög­li­chen, wird der Daten­schutz immer wich­ti­ger. Ent­wick­ler müs­sen sicher­stel­len, dass PWAs stren­ge Sicher­heits­richt­li­ni­en einhalten.

Benut­zer­ak­zep­tanz

  • Obwohl PWAs eine groß­ar­ti­ge Alter­na­ti­ve zu nati­ven Apps sind, sind vie­le Nut­zer noch nicht mit dem Kon­zept ver­traut. Unter­neh­men müs­sen Auf­klä­rung betrei­ben und den Nut­zen einer PWA klar kommunizieren.

Bei­spiel: Fall­back-Lösun­gen für ein­ge­schränk­te Funk­tio­nen auf iOS:

if ('serviceWorker' in navigator && Notification.permission === 'granted') {
  console.log('Push-Benachrichtigungen aktiviert');
} else {
  console.log('Push-Benachrichtigungen auf iOS nicht verfügbar');
}

Ein­satz von künst­li­cher Intelligenz

Die­ser Bei­trag wur­de mit­hil­fe künst­li­cher Intel­li­genz erstellt und von unse­rern Fach­ex­per­ten sorg­fäl­tig über­prüft, um sicher­zu­stel­len, dass die Infor­ma­tio­nen kor­rekt, ver­ständ­lich und nütz­lich sind.

jetzt her­un­ter­la­den

Ulti­ma­ti­ver Gui­de: ChatGPT-SEO Guide

So inte­grierst du ChatGPT in dei­ne Pro­zes­se im SEO und Con­tent Mar­ke­ting. Ler­ne wie du ChatGPT im SEO nutzt: Von der ers­ten The­men­re­cher­che bis zum fer­ti­gen Content!

jetzt her­un­ter­la­den