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>
    <script src = "https://www.gstatic.com/firebasejs/4.4.0/firebase.js"> </ script>
    <script>
      // Firebase initialisieren
      var config = {
        apiKey: "AIzaSyAXK4Orxl2CghIQvKiUPtkhEngSgzteqE0",
        authDomain: "hello-world-pwa-8669c.firebaseapp.com",
        databaseURL: "https://hello-world-pwa-8669c.firebaseio.com",
        projectId: "hallo-welt-pwa-8669c",
        storageBucket: "hello-world-pwa-8669c.appspot.com",
        messagingSenderId: "660239288739"
      };
      firebase.initializeApp (config);
    </ script>
  </ body>
</ html></pre><h4>Initialisieren Sie das Firebase-Projekt</h4><p>Stellen Sie sicher, dass node.js installiert ist, und führen Sie dann Folgendes aus:</p><pre>$ npm install -g firebase-tools</pre><pre>$ firebase init # Erzeugt eine firebase.json (ERFORDERLICH)</pre><p>Hosting auswählen:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1567606953615." /><p>Wählen Sie unter Anleitung von Firebase Ihr Projekt aus, ändern Sie das öffentliche Verzeichnis in "src", konfigurieren Sie es als einseitige App und überschreiben Sie die Datei "index.html" NICHT.</p><h4>Stellen Sie das Firebase-Projekt bereit</h4><pre>$ firebase deploy</pre><p>Gehe zur URL und überprüfe, ob sie so aussieht:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1567606955703." /><h3>Führen Sie Lighthouse aus</h3><p>Holen Sie sich die Lighthouse-Erweiterung und führen Sie das Lighthouse-Tool auf der gehosteten Site aus:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1567606957143." /><h3>Servicemitarbeiter registrieren</h3><p>Fügen Sie den Service Worker <script> zu index.html hinzu:</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>
    <script src = "https://www.gstatic.com/firebasejs/4.4.0/firebase.js"> </ script>
    <script>
      // Firebase initialisieren
      var config = {
        apiKey: "AIzaSyAXK4Orxl2CghIQvKiUPtkhEngSgzteqE0",
        authDomain: "hello-world-pwa-8669c.firebaseapp.com",
        databaseURL: "https://hello-world-pwa-8669c.firebaseio.com",
        projectId: "hallo-welt-pwa-8669c",
        storageBucket: "hello-world-pwa-8669c.appspot.com",
        messagingSenderId: "660239288739"
      };
      firebase.initializeApp (config);
    </ script>
    <script>
      if ('serviceWorker' im Navigator) {
        navigator.serviceWorker.register ('/ sw.js')
          .then (function () {
                console.log ('Service Worker Registered');
          });
      }
    </ script>
  </ body>
</ html></pre><h3>Statische Ressourcen zwischenspeichern</h3><p>Erstelle sw.js und füge index.html und hellow-world-pwa.css zum Hallo-Welt-Seiten-Cache hinzu:</p><pre>var cacheName = 'Hallo-Welt-Seite';
var filesToCache = [
  '/',
  '/index.html',
  '/hello-world.css'
];</pre><pre>self.addEventListener ('install', Funktion (e) {
  console.log ('[ServiceWorker] Install');
  e.waitUntil (
    caches.open (cacheName) .then (function (cache) {
      console.log ('[ServiceWorker] App-Shell zwischenspeichern');
      return cache.addAll (filesToCache);
    })
  );
});</pre><pre>self.addEventListener ('activate', event => {
  event.waitUntil (self.clients.claim ());
});</pre><pre>self.addEventListener ('fetch', event => {
  event.respondWith (
    caches.match (event.request, {ignoreSearch: true}). then (response => {
      Antwort zurück || fetch (event.request);
    })
  );
});</pre><h3>Zwischengespeicherte Ressourcen testen</h3><p>Stellen Sie es erneut bereit, öffnen Sie Chrome DevTools und überprüfen Sie den Cache-Speicher auf der Registerkarte "Anwendung":</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1567606958782." /><h3>Erstellen Sie ein Symbol</h3><p>Erstellen Sie ein Symbol und speichern Sie es in den Größen 128 x 128, 144 x 144, 152 x 152, 192 x 192, 512 x 512.</p><h3>Erstellen Sie manifest.json</h3><p>Erstellen Sie manifest.json, um das Hinzufügen zur Homescreen-Funktion zu unterstützen:</p><pre>{
  "name": "Hello World PWA",
  "short_name": "Hi",
  "icons": [{
    "src": "icons / icon-128x128.png",
      "Größen": "128x128",
      "type": "image / png"
    }, {
      "src": "icons / icon-144x144.png",
      "Größen": "144x144",
      "type": "image / png"
    }, {
      "src": "icons / icon-152x152.png",
      "Größen": "152x152",
      "type": "image / png"
    }, {
      "src": "icons / icon-192x192.png",
      "Größen": "192x192",
      "type": "image / png"
    },
    {
      "src": "icons / icon-512x512.png",
      "Größen": "512x512",
      "type": "image / png"
    }
  ],
  "start_url": "/index.html",
  "gcm_sender_id": "103953800507",
  "display": "Standalone",
  "background_color": "# FF9800",
  "theme_color": "# FF9800"
}</pre><p>Dann verlinken Sie auf manifest.json in index.html:</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">
    <link rel = "manifest" href = "manifest.json">
  </ head>
  <body>
    <h1 class = "vertical-container"> Hallo Welt </ h1>
    <script src = "https://www.gstatic.com/firebasejs/4.4.0/firebase.js"> </ script>
    <script>
      // Firebase initialisieren
      var config = {
        apiKey: "AIzaSyAXK4Orxl2CghIQvKiUPtkhEngSgzteqE0",
        authDomain: "hello-world-pwa-8669c.firebaseapp.com",
        databaseURL: "https://hello-world-pwa-8669c.firebaseio.com",
        projectId: "hallo-welt-pwa-8669c",
        storageBucket: "hello-world-pwa-8669c.appspot.com",
        messagingSenderId: "660239288739"
      };
      firebase.initializeApp (config);
    </ script>
    <script>
      if ('serviceWorker' im Navigator) {
        navigator.serviceWorker.register ('/ sw.js')
          .then (function () {
                console.log ('Service Worker Registered');
          });
      }
    </ script>
  </ body>
</ html></pre><h3>Richten Sie die Push-Benachrichtigung ein</h3><p>Benutzerberechtigungsanforderung zu index.html hinzufügen:</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">
    <link rel = "manifest" href = "manifest.json">
  </ head>
  <body>
    <h1 class = "vertical-container"> Hallo Welt </ h1>
    <script src = "https://www.gstatic.com/firebasejs/4.4.0/firebase.js"> </ script>
    <script>
      // Firebase initialisieren
      var config = {
        apiKey: "AIzaSyAXK4Orxl2CghIQvKiUPtkhEngSgzteqE0",
        authDomain: "hello-world-pwa-8669c.firebaseapp.com",
        databaseURL: "https://hello-world-pwa-8669c.firebaseio.com",
        projectId: "hallo-welt-pwa-8669c",
        storageBucket: "hello-world-pwa-8669c.appspot.com",
        messagingSenderId: "660239288739"
      };
      firebase.initializeApp (config);
    </ script>
    <script>
      if ('serviceWorker' im Navigator) {
        navigator.serviceWorker.register ('/ sw.js')
          .then (function () {
                console.log ('Service Worker Registered');
          });
      }
    </ script>
    <script>
      const messaging = firebase.messaging ();</pre><pre>      messaging.requestPermission ()
      .then (function () {
        console.log ('Benachrichtigungserlaubnis erteilt.');
        return messaging.getToken ();
      })
      .then (Funktion (Token) {
        console.log (Token);
      })
      .catch (function (err) {
        console.log ('Erlaubnis zur Benachrichtigung kann nicht abgerufen werden.', err);
      })
    </ script>
  </ body>
</ html></pre><p>Lassen Sie den Servicemitarbeiter Push-Ereignisse in der neuen Datei firebase-messaging-sw.js verarbeiten:</p><pre>importScripts ('https://www.gstatic.com/firebasejs/4.4.0/firebase-app.js');
importScripts ('https://www.gstatic.com/firebasejs/4.4.0/firebase-messaging.js');</pre><pre>var config = {
apiKey: "AIzaSyAXK4Orxl2CghIQvKiUPtkhEngSgzteqE0",
authDomain: "hello-world-pwa-8669c.firebaseapp.com",
databaseURL: "https://hello-world-pwa-8669c.firebaseio.com",
projectId: "hallo-welt-pwa-8669c",
storageBucket: "hello-world-pwa-8669c.appspot.com",
messagingSenderId: "660239288739"
};
firebase.initializeApp (config);</pre><pre>const messaging = firebase.messaging ();</pre><pre>messaging.setBackgroundMessageHandler (function (payload) {
 const title = 'Hallo Welt';
 const options = {
  body: payload.data.body
 };
 return self.registration.showNotification (Titel, Optionen);
});</pre><h3>Push-Benachrichtigung testen</h3><p>So richten Sie Push-Benachrichtigungen mit Firebase Cloud Messaging ein:</p><ol><li>Erhalten Sie den Serverschlüssel Ihres Firebase-Projekts (danke, Stack Overflow):</li><li>Klicken Sie oben in der neuen Firebase-Konsole auf das Einstellungssymbol / Zahnrad neben Ihrem Projektnamen.</li><li>Klicken Sie auf Projekteinstellungen.</li><li>Klicken Sie auf die Registerkarte Cloud Messaging. Schlüssel unter Serverschlüssel kopieren.</li><li>Stellen Sie Ihre Firebase-App erneut bereit: $ firebase deploy.</li><li>Öffnen Sie die Chrome DevTools-Konsole und kopieren Sie das Token in das Konsolenprotokoll.</li><li>Testen Sie die Push-Benachrichtigung über die Befehlszeile (ersetzen Sie YOUR_SERVER_KEY durch den kopierten Schlüssel und DEVICE_REGISTRATION_TOKEN durch das kopierte Token):</li></ol><pre>curl -X POST -H "Autorisierung: key = YOUR_SERVER_KEY" -H "Inhaltstyp: application / json" -d '{
  "Benachrichtigung": {
    "title": "Hello World PWA",
    "body": "Hi",
  },
  "to": "DEVICE_REGISTRATION_TOKEN"
} '"https://fcm.googleapis.com/fcm/send"</pre><h3>Führen Sie den Leuchtturm erneut aus</h3><p>Stellen Sie Lighthouse wieder bereit und führen Sie es erneut aus. Es ist nicht perfekt, wird aber schrittweise verbessert:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1567606960297." /></div><div class="neighbor-articles"><h4 class="ui header">Siehe auch</h4><a href="/item/how-to-hack-your-way-into-financial-independence-with-cryptocurrencies-part-2-531fe8/" title="Wie Sie Ihren Weg in die finanzielle Unabhängigkeit mit Cryptocurrencies finden, Teil 2">Wie Sie Ihren Weg in die finanzielle Unabhängigkeit mit Cryptocurrencies finden, Teil 2</a><a href="/item/how-to-structure-a-funny-story-652c21/" title="Wie man eine lustige Geschichte strukturiert">Wie man eine lustige Geschichte strukturiert</a><a href="/item/why-your-instagram-account-isn-t-growing-and-how-to-fix-it-017321/" title="Warum Ihr Instagram-Konto nicht wächst und wie Sie es beheben können">Warum Ihr Instagram-Konto nicht wächst und wie Sie es beheben können</a><a href="/item/eidoo-ico-engine-how-to-join-icos-or-promote-your-own-token-sale-ba191d/" title="Eidoo ICO Engine: So treten Sie ICOs bei oder fördern Sie Ihren eigenen Token-Verkauf">Eidoo ICO Engine: So treten Sie ICOs bei oder fördern Sie Ihren eigenen Token-Verkauf</a><a href="/item/how-to-win-back-subscribers-who-cancel-4de97b/" title="So gewinnen Sie Abonnenten zurück, die stornieren">So gewinnen Sie Abonnenten zurück, die stornieren</a></div></main><div class="push"></div></div><footer style="height:50px">chinthaka.org<!-- --> © <!-- -->2019<!-- --> <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><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script>
                  window.cookieconsent.initialise({
                    "palette": {
                      "popup": {
                        "background": "#eaf7f7",
                        "text": "#5c7291"
                      },
                      "button": {
                        "background": "#56cbdb",
                        "text": "#ffffff"
                      }
                    },
                    "showLink": false
                  });
              </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>
                (adsbygoogle = window.adsbygoogle || []).push({
                  google_ad_client: "ca-pub-3845662922897763",
                  enable_page_level_ads: true
                });
              </script></body></html>