Erfahren Sie, wie Sie in 5 Minuten eine PWA erstellen

Eines der wichtigsten Merkmale von Progressive Web Apps (PWAs) ist das „Progressive“. Sie müssen nicht alle Funktionen einer PWA implementieren, um Ihre Site als PWA zu betrachten. Stattdessen besteht die Idee darin, dass Sie eine Reihe von Schritten implementieren, die Ihre App für Ihre Endbenutzer verbessern.

Dieser Blog-Beitrag geht von einer Schlüsselannahme aus. Es gibt viele Entwickler, die ihre Apps schrittweise verbessern möchten, aber sie möchten dies in maximal 5 Minuten tun. Und genau das möchte Ihnen dieser Blog zeigen.

Es ist eine sehr einfache PWA-Hallo-Welt, die Ihnen eine Reihe von einfachen Schritten zeigt, um Ihre eigene App zu überarbeiten. Die Wörter sind auf ein Minimum beschränkt und enthalten Links zu Dokumenten für diejenigen, die mehr lesen möchten oder müssen. Sie können den Blog auch ganz überspringen und einfach die App klonen: https://github.com/Meggin/hello-world-pwa.

Erstellen Sie eine reaktionsschnelle Hallo-Welt-App

Fügen Sie den Link zu Ansichtsfenster und Stylesheet in index.html ein (siehe auch https://codepen.io/Meggin/pen/wrJgOX):



  
    
    
    
     Meine Hallo-Welt-Seite </ title>
    <link rel = "stylesheet" type = "text / css" href = "hallo-world.css" media = "all">
  </ head>
  <body>
    <h1 class = "vertical-container"> Hallo Welt </ h1>
  </ body>
</ html></pre><p>Verwenden Sie flexbox in hello-world.css, um den Text entsprechend zu zentrieren:</p><pre>Karosserie {
  Hintergrundfarbe: # FF9800;
  Farbe schwarz;
}</pre><pre>.vertical-container {
  Höhe: 300px;
  Anzeige: -webkit-flex;
  Anzeige: Flex;
  -webkit-align-items: center;
          Align-Items: Center;
  -webkit-justify-content: center;
          Rechtfertigungsinhalt: Mitte;
}</pre><pre>h1.vertical-container {
  Schriftgröße: 275%;
}</pre><h3>Host mit Firebase</h3><h4>Erstellen Sie ein Firebase-Projekt</h4><p>Erstellen Sie ein Firebase-Projekt in der Firebase-Konsole und fügen Sie das Projekt zu index.html hinzu:</p><p>WICHTIG: Sie müssen alle Firebase-Projektdetails in Beispielcode in diesem Blog durch Ihre eigenen Firebase-Projektdetails ersetzen.</p><pre><! DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-kompatibel" content = "IE = edge">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">
    <meta name = "theme-color" content = "# 008000" />
    <title> Meine Hallo-Welt-Seite </ title>
    <link rel = "stylesheet" type = "text / css" href = "hallo-world.css" media = "all">
  </ head>
  <body>
    <h1 class = "vertical-container"> Hallo Welt </ h1>
    <div class="neighbor-articles"><h4 class="ui header">Siehe auch</h4><a href="/item/how-to-become-a-fierce-creative-edd930/" title="Wie man ein wilder Kreativer wird">Wie man ein wilder Kreativer wird</a><a href="/item/save-yourself-some-time-here-s-how-to-do-christmas-shopping-right-6dee66/" title="Sparen Sie sich etwas Zeit. So erledigen Sie Weihnachtseinkäufe richtig">Sparen Sie sich etwas Zeit. So erledigen Sie Weihnachtseinkäufe richtig</a><a href="/item/crossing-the-product-chasm-or-how-to-prioritise-your-product-work-to-widen-your-audience-291859/" title="Überqueren Sie die „Produktlücke“ oder bestimmen Sie, wie Sie Ihre Produktarbeit priorisieren, um Ihr Publikum zu erweitern">Überqueren Sie die „Produktlücke“ oder bestimmen Sie, wie Sie Ihre Produktarbeit priorisieren, um Ihr Publikum zu erweitern</a><a href="/item/guilt-and-the-negative-thoughts-associated-with-diabetes-and-how-to-overcome-them-09a81f/" title="Schuld und die negativen Gedanken im Zusammenhang mit Diabetes und wie man sie überwinden kann">Schuld und die negativen Gedanken im Zusammenhang mit Diabetes und wie man sie überwinden kann</a><a href="/item/how-to-start-writing-again-in-4-easy-steps-6dacdd/" title="Wie fange ich wieder an zu schreiben? In 4 einfachen Schritten">Wie fange ich wieder an zu schreiben? In 4 einfachen Schritten</a></div></main><div class="push"></div></div><footer style="height:50px">chinthaka.org<!-- --> © <!-- -->2020<!-- --> <a href="https://ar.chinthaka.org/item/learn-how-to-build-a-pwa-in-5-minutes-f94a0b" title="https://chinthaka.org">chinthaka.org</a></footer></div></div></div></body></html>