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.
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:
Warum eine PWA erstellen?
Voraussetzungen:
Eine einfache PWA erstellen:
Projekteinrichtung:
mkdir my-pwa cd my-pwa npm init -y npm install express
Projektstruktur:
my-pwa/ ├── public/ │ ├── index.html │ ├── styles.css │ └── app.js ├── server.js ├── package.json └── manifest.json
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"
}
]
}
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My PWA</title> <link rel="stylesheet" href="/styles.css"> <link rel="manifest" href="/manifest.json"> </head> <body> <h1>Welcome to My Progressive Web App!</h1> <script src="/app.js"></script> </body> </html>
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);
});
});
}
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);
})
);
});
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
Öffnen Sie die App:
Registrierung von Servicemitarbeitern:
Zum Startbildschirm hinzufügen:
Best Practices:
Fassen Sie die wichtigsten behandelten Punkte zusammen:
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!
Die acht am häufigsten verwendeten Funktionen in Excel
So runden Sie in Matlab
Was sind die Webserver?
Der Unterschied zwischen statischen Webseiten und dynamischen Webseiten
Welche Rolle spielt der SIP-Server?
So lösen Sie das Problem, dass document.cookie nicht abgerufen werden kann
So öffnen Sie eine ISO-Datei
So kommentieren Sie Code in HTML
