So erstellen Sie eine progressive Web-App

Mobile macht nun über den Hälften des WEB-Verkehrs aus, und Webanwendungen ermöglichen es Benutzern die Möglichkeit, Dinge im Browser zu tun, in dem rivalisierende native Apps Rivalen, aber es gibt ein Problem: Die Qualität von Verbindungen und Geräten variiert massiv auf der ganzen Welt.

Catering sowohl für Benutzer auf blitzschnelle Verbindungen in Seoul, und Benutzer in ländlichem Indien an einem veralteten Telefon ist die neueste Benutzerfreundlichkeitsherausforderung, und progressive Web-Apps sind die Lösung.

PWAS verwenden eine progressive Verbesserung, um den wichtigsten Inhalt zuerst zu laden, und fügen Sie dann wie erforderlich Präsentations- und Funktions-Extras hinzu, dh, dass alle Ihre Benutzer dieselbe Kernerfahrung so schnell wie möglich erhalten. Wenn Sie das größtmögliche Publikum erreichen möchten, sind PWAs der Weg, um zu gehen.

• 10 Schritte zu einer eingreifenden Benutzererfahrung

Obwohl progressive Web-Apps viel Vorteile und Funktionalität in das Web bringen, müssen sie nicht, dass sie Ihre gesamte Anwendung erneut schreiben müssen. Jede App kann durch Hinzufügen einiger zusätzlicher Ebenen in eine PWA umgewandelt werden.

Für beste Ergebnisse möchten Sie von Anfang an einen starken Wert auf die Leistung legen - aber das stimmt von jeder Web-App. Hier gehen wir durch die Schritte, um Ihre App progressiv zu machen.

Wenn Sie eine glatt laufende Site erstellen möchten, stellen Sie sicher, dass Sie sicher sind Web-Hosting ist fleckig und benutze ein anständiges Webseitenersteller .

01. HTTPS dienen

Lass uns ehrlich sein: Du solltest das trotzdem tun. SSL fügt dem Web eine zusätzliche Sicherheitsschicht hinzu und hilft dabei, Ihre Nutzer bei der Verwendung Ihrer Website sicher fühlen. Mit PWAS ist HTTPS für die Nutzung von Service-Arbeitnehmern unerlässlich und ermöglicht die Installation der Home-Bildschirm. Sie können ein SSL-Zertifikat von Ihrem Domain-Registrar mit wenig Aufwand erwerben und dann über Ihren Hosting-Service konfigurieren.

02. Erstellen Sie eine Anwendungsschale

Ihre App-Shell ist das erste, was lädt - das erste, was der Benutzer sieht. Es sollte vollständig in Ihrem Index-HTML-Dokument mit Inline-CSS existieren, um sicherzustellen, dass es so schnell wie möglich erscheint, und Ihr Benutzer starrt keinen weißen Bildschirm länger als nötig an. Die Anwendungshülle bildet einen Teil des Musters der progressiven Verbesserung. Ihre App sollte den Benutzer inhalt so bald wie möglich angeben, und verbessert es dann progressiv als mehr Daten (wahrscheinlich JavaScript) -Lasten.

Das untenstehende Beispiel wird von einer React.js-Anwendung entnommen. Der Benutzer wird mit einem Umriss der App und einem Ladeanzeige im Index.html angezeigt. Sobald das JavaScript lädt und Stiefel aufregert, wird die vollständige Anwendung innerhalb der Schale gerendert.

 & lt;! - Index.html - & gt;
& lt; body & gt;
& lt; div id = "root" & gt;
  & lt; div id = "Container" & gt;
  & lt; Div Class = "Innenbehälter" & GT;
  & lt; div id = "header" & gt;
  & lt; img src = "/ Assets / icon.png" alt = "logo" / & gt;
  & lt; H1 & GT; chat & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "laden-container" & gt;
  & lt; img src = "/ Assets / icon.png" alt = "logo" id = "loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / body & gt;
// index.js.
Reagdom.render (
& lt; App / & gt;,
document.getelementById ('root')
);

03. Registrieren Sie einen Service-Arbeiter

Um das gesamte Spektrum von PWA-Leckereien zu tippen (Push-Benachrichtigungen, Caching, Installationsaufforderungen) benötigen Sie einen Service-Arbeiter.

Glücklicherweise sind sie ziemlich einfach zu eingerichtet. Darunter prüfen wir zunächst, ob der Browser des Benutzers Service-Arbeiter unterstützt. Wenn ja, können wir uns dann mit der Registrierung der Service-Worker-Datei fortsetzen, die hier aufgerufen wird Service-Arbeiter.js. . Beachten Sie, dass Sie an diesem Punkt nichts Besonderes in dieser Datei benötigen - es kann leer sein.

In dem nachstehenden Beispiel zeigen wir jedoch, wie Sie in die drei Key Service Worker-Lebenszyklus-Ereignisse tippen können. Dies sind 'install', wenn der Benutzer zuerst Ihre Seite besucht. 'aktivieren', kurz vor der Registrierung abgeschlossen; und 'FETCH', wenn die Anwendung eine Netzwerkanforderung erstellt. Der letzte ist relevant für die Caching- und Offline-Fähigkeit.

& lt; script & gt;
  if ('ServiceWäger' im Navigator) {
  fenster.addeventListener ('laden', function () {
  Navigator.servicworcer.Register ('Service-Worker.js'). Dann (Funktion (Registrierung) {
  // Die Registrierung war erfolgreich
  console.log ('registriert!');
  }, Funktion (ERR) {
  // Registrierung fehlgeschlagen :(
  console.log ('Servicworker-Registrierung fehlgeschlagen:', ERR);
  }). Fang (Funktion (ERR) {
  console.log (ERR);
  });
  });
  } else {
  console.log ('Service Worker wird nicht unterstützt');
  }
  & lt; / script & gt;
// service-arbeiter.js
self.addeventListener ('installieren', function () {
  console.log ('install!');
});
self.addeventListener ("aktivieren", Event = & gt; {
  console.log ('aktivieren!');
});
self.addeventListener ('FETCH', Funktion (Ereignis) {
  console.log ('Fetch!', Event.Request);
}); 

04. Push-Benachrichtigungen hinzufügen

Dienste Arbeiter ermöglichen es Ihren Benutzern, Push-Benachrichtigungen über die Web-Push-API zu erhalten. Um darauf zuzugreifen, können Sie eintippen self.registration.pushmanager. von Ihrer Service-Worker-Datei. Da das Senden von Push-Benachrichtigungen stark auf Ihrem Backend-Setup stößt, tauchen wir hier nicht ein.

Wenn Sie eine App von Scratch starten, wird der FireBase-Service von Google mit Firebase Cloud Messaging für relativ schmerzlose Push-Benachrichtigungen geliefert (Denken Sie daran: Stellen Sie sicher, dass Sie Ihre Design-Dateien sicher halten Cloud-Speicher) . Der folgende Code zeigt, wie sich für Push-Benachrichtigungen über die Push-API registriert.

 Navigator.ServiceWäger.Ready.DAS (Funktion (Registrierung) {
  if (! registration.pushmanager) {
    Alarm ('keine Push-Benachrichtigungsunterstützung.');
    falsch zurückgeben;
  }
  //, um "Push-Benachrichtigung" von Push Manager abonnieren
  Registration.pushManager.subscribe ({{
  uservisibIricly: true // Zeigt immer Benachrichtigung an, wenn er empfangen wird
  })
  .das (Funktion (Abonnement) {
  console.log ('abonniert.');
  })
  .Catch (Funktion (Fehler) {
  console.log ('Abonnementfehler:', Fehler);
  });
}) 

05. Fügen Sie eine Web-App-Manifest hinzu

Um Ihre Anwendung installieren zu lassen, müssen Sie a aufnehmen Manifest.json. im Stammverzeichnis der Anwendung. Sie können dies als eine Beschreibung Ihrer Bewerbung vorstellen, ähnlich wie in dem App Store. Es enthält Symbole, einen Begrüßungsbildschirm, einen Namen und eine Beschreibung.

Es gibt auch einige Konfiguration, wie Ihre Anwendung angezeigt wird, wenn sie vom Home-Bildschirm des Benutzers gestartet wird: Möchten Sie die Adressleiste im Browser anzeigen oder nicht? Welche Farbe soll die Statusleiste sein? Und so weiter. Beachten Sie, dass ein richtiger Manifest.json. sollte ein vollständiges Spektrum an Symbolgrößen für verschiedene Geräte enthalten. Der untenstehende Code ist eine Vorschau von einigen der Eigenschaften, die Ihr Manifest enthalten kann.

 {{
  "short_name": "chat",
  "Name": "Chat",
  "Icons": [
  {
  "SRC": "/ Assets / icon.png",
  "Größen": "192x192",
  "Typ": "bild / png"
  }
  ],
  "start_url": "/? utm_source = homescreen",
  "background_color": "# E05A47",
  "Theme_color": "# E05A47",
  "Anzeige": "Standalone"
} 

06. Konfigurieren Sie die Installationsaufforderung

Wenn ein Benutzer einen PWA mit einem Service-Arbeiter und Manifest besucht, fordert Chrome sie automatisch auf, sie installieren, um ihn an ihrem Homescreen zu installieren, da Folgendes: Der Benutzer muss den Standort zweimal besuchen, mit fünf Minuten zwischen den Besuche.

Die Idee hier ist zu warten, bis der Benutzer Interesse an Ihrer Anwendung demonstriert, und bitten Sie sie, es zu einem Vorrichtungen ihres Geräts zu erstellen (dies ist in einem scharfen Kontrast zum nativen App-Ansatz, der nach dieser Investitionsvorderseite bittet).

Möglicherweise gibt es Fälle, in denen Sie die Installationsaufforderung in verschiedenen Situationen anzeigen möchten, wie z. B. nachdem der Benutzer eine bestimmte nützliche Aktion ergreift. Dazu fangen wir das ab vorinstallprompt. Event und speichern Sie es für später und stellen Sie dann die Eingabeaufforderung bereit, wenn wir fit sehen.

 Window.AdDeventListener ('vorinstallprompt', e = & gt; {
  console.log ('vorinsteinprompt Ereignis gefeuert');
  e.PreventDefault ();
  // Die Veranstaltung stecken, damit es später ausgelöst werden kann.
  the.defElausprompt = e;
  falsch zurückgeben;
  });
// Wenn Sie die Aufforderung auslösen möchten:
This.DefeDeReRompt.prompt ();
  this.DefFeTROMMPT.UERCHOICE.DAS (Wahl = & GT; {
  console.log (Wahl);
  });
This.DeFeRedROMPT = NULL; 

07. Analysieren Sie die Leistung Ihres App

Leistung ist das Herz und die Seele von Pwas. Ihre App sollte für Benutzer an allen Netzwerkbedingungen schnell sein. Caching- und Offline-Fähigkeit hilft viel, aber am Ende des Tages sollte Ihre Bewerbung speed sein, auch wenn der Benutzer den Browser nicht zur Unterstützung der Service Worker-Technologie unterstützt. Dies ist die Definition der progressiven Verbesserung - liefert eine große Erfahrung für alle, unabhängig von der Modernität von Geräten oder Netzwerkbedingungen.

Dazu ist ein nützlicher Satz von Metriken das Schienensystem. Rail ruft Google ein "user-centric-Leistungsmodell" an - ein Satz von Richtlinien zum Messen der Leistung unserer App.

Die Akronym steht für die Antwort (wie lange es dauert, dass Ihre App auf Benutzeraktionen antwortet), Animation (Animationsgeschwindigkeit bei 60fps), Leerlauf (Verwendung von Zeit, wenn Ihre App nicht anders tut, um weitere Vermögenswerte zu laden und zu cache Laden (Laden Ihrer App in einer Sekunde oder weniger).

Hier ist ein Tisch sinnvoller Benchmarks für die Anwendungsbelastung, wie von Meggin Kearney, Tech-Schriftsteller, geliefert Google Web-Grundlagen. .

08. Audit Ihre App mit Leuchtturm

Google ist der größte Champion, der progressive Web-Apps als Zukunft des Webs drückt. Daher hat es ein nützliches Instrument zum Leiten Ihrer PWA-Entwicklung geliefert.

Früher genannt Leuchtturm und als Chrom-Erweiterung, ab Chrome 60 ist ein Teil der Chrome Devtools unter der Registerkarte "Audits". In welchem ​​Leuchtturm wird Ihre Bewerbung unter verschiedenen Bedingungen durchgeführt und seine Antwort und den Erfolg entsprechend den PWA-Richtlinien messen. Es gibt dann eine Punktzahl von 100. Es kann auch Ihre App auf Web Best Practices gleichzeitig punkten.

Der folgende Text ist eine Liste der Werte des Leuchtturms. Im Gebrauch zeigt auch Beschreibungen.

• Registriert einen Service-Arbeiter
• Antwortet mit einem 200, wenn offline
• Enthält einige Inhalte, wenn JavaScript nicht verfügbar ist
• Verwendet HTTPS.
• Rediiert den HTTP-Datenverkehr auf https
• Die Seitenlast ist schnell genug auf 3G
• Benutzer kann aufgefordert werden, die Web-App installieren zu können
• Konfiguriert für einen benutzerdefinierten Begrüßungsbildschirm
• Adressleiste stimmt mit Markenfarben überein
• Hat ein & lt; Meta Name = "Ansichtsfenster" & GT; Tag mit Breite oder Initial-Skala
• Inhalt ist ordnungsgemäß für den Ansichtsfenster

Dieser Artikel erschien ursprünglich im Webdesigner; Abonnieren Sie hier .

Zum Thema passende Artikel:

• Pwas: Willkommen in der mobilen Revolution
• So verwenden Sie die Animation in mobilen Apps
• 9 Erstaunliche Pwa-Geheimnisse