Progressive Web Apps (PWAs)

Erstellen von Progressive Web Apps (PWAs)

In diesem Beitrag befassen wir uns mit Progressive Web Apps (PWAs), einem modernen Ansatz zum Erstellen von Webanwendungen, die ein natives App-ähnliches Erlebnis bieten. Ich werde die Grundlagen von PWAs, ihre Vorteile und die Schritte zum Erstellen einer PWA von Grund auf behandeln.

1. Einführung in Progressive Web Apps (PWAs)

Was ist eine Progressive Web App (PWA)?

Eine Progressive Web App ist eine Art Anwendungssoftware, die über das Web bereitgestellt wird und unter Verwendung gängiger Webtechnologien wie HTML, CSS und JavaScript erstellt wird. PWAs sollen auf jeder Plattform funktionieren, die einen standardkonformen Browser verwendet.

Hauptmerkmale von PWAs:

• Responsiv: Funktioniert auf jedem Gerät und jeder Bildschirmgröße.
• Offline-Fähigkeit: Funktioniert offline oder bei schlechten Netzwerkbedingungen mithilfe von Servicemitarbeitern.
• App-ähnliches Erlebnis: Bietet ein App-ähnliches Benutzererlebnis mit Funktionen wie der Installation auf dem Startbildschirm.
• Sicher: Wird über HTTPS bereitgestellt, um Snooping zu verhindern und die Inhaltsintegrität sicherzustellen.
• Wiedereinschaltbar: Ermöglicht Push-Benachrichtigungen, um Benutzer zu beschäftigen.

2. Vorteile von PWAs

Warum eine PWA erstellen?

• Verbesserte Leistung: Schnellere Ladezeiten und reibungslosere Interaktionen.
• Verbesserte Benutzereinbindung: Push-Benachrichtigungen und Zugriff auf den Startbildschirm.
• Geringere Entwicklungskosten: Eine einzige Codebasis für Web- und Mobilerlebnisse.
• SEO-Vorteile: PWAs sind für Suchmaschinen auffindbar.

3. Einrichten einer PWA

Voraussetzungen:

• Grundkenntnisse in HTML, CSS und JavaScript.
• Node.js und npm/yarn installiert.

Eine einfache PWA erstellen:

1. Projekteinrichtung:
   

   mkdir my-pwa
   cd my-pwa
   npm init -y
   npm install express
   

2. Projektstruktur:
   

   my-pwa/
   ├── public/
   │   ├── index.html
   │   ├── styles.css
   │   └── app.js
   ├── server.js
   ├── package.json
   └── manifest.json
   

4. Erstellen der Manifestdatei

manifest.json:

Die Manifestdatei stellt Metadaten über die PWA bereit und ist für die Installation der App auf dem Startbildschirm erforderlich.

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

5. Erstellen der HTML-, CSS- und JavaScript-Dateien

index.html:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
  1fc2df4564f5324148703df3b6ed50c1
  4f2fb0231f24e8aef524fc9bf9b9874f
  b2386ffb911b14667cb8f0f91ea547a7My PWA6e916e0f7d1e588d4f442bf645aedb2f
  810801fb5d57e2948359b7eef57cb689
  02ccac29734b382144275b53674934d7
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
  4a249f0d628e2318394fd9b75b4636b1Welcome to My Progressive Web App!473f0a7621bec819994bb5020d29372a
  1e1ccda7e68c35a670bf47149c0f0c612cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

styles.css:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
}

app.js:

// app.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('ServiceWorker registered: ', registration);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

6. Einrichten des Servicemitarbeiters

Ein Service Worker ist ein Skript, das der Browser getrennt von der Webseite im Hintergrund ausführt. Es fängt Netzwerkanfragen ab und kann Ressourcen zwischenspeichern, um die Leistung und Offline-Fähigkeiten zu verbessern.

service-worker.js:

// service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/app.js',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

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

7. Einrichten des Servers

server.js:

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Ausführen des Servers:

node server.js

8. Testen Sie Ihre PWA

1. Öffnen Sie die App:

   • Navigieren Sie in Ihrem Browser zu http://localhost:3000.

2. Registrierung von Servicemitarbeitern:

   • Öffnen Sie die Entwicklertools (F12 oder klicken Sie mit der rechten Maustaste und wählen Sie „Inspizieren“).
   • Gehen Sie zur Registerkarte „Bewerbung“.
   • Unter „Servicemitarbeiter“ sollten Sie Ihren registrierten Servicemitarbeiter sehen.

3. Zum Startbildschirm hinzufügen:

   • Öffnen Sie auf einem mobilen Gerät Ihre PWA im Browser.
   • Sie sollten eine Aufforderung zum „Zum Startbildschirm hinzufügen“ sehen.

9. Best Practices für PWAs

Best Practices:

• HTTPS verwenden: PWAs erfordern sichere Kontexte.
• Bilder optimieren: Verwenden Sie reaktionsfähige Bilder und Lazy Loading.
• Netzwerkanforderungen minimieren: Ressourcen effektiv zwischenspeichern.
• Offline-Funktionalität sicherstellen: Bieten Sie sinnvolle Offline-Erlebnisse.

10. Fazit

Fassen Sie die wichtigsten behandelten Punkte zusammen:

• Einführung in PWAs und ihre Vorteile.
• Einrichten einer einfachen PWA mit Manifest, Service Worker und Caching.
• Best Practices für den Aufbau robuster PWAs.

11. Zusätzliche Ressourcen

• PWA-Dokumentation
• Tutorials und Anleitungen zu fortgeschrittenen PWA-Themen.
• Community-Foren und Support.

Das obige ist der detaillierte Inhalt vonProgressive Web Apps (PWAs). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!