Heim > Web-Frontend > js-Tutorial > Implementieren von Push-Benachrichtigungen mit JavaScript: Ein produktionstauglicher Ansatz

Implementieren von Push-Benachrichtigungen mit JavaScript: Ein produktionstauglicher Ansatz

WBOY
Freigeben: 2024-08-17 13:05:02
Original
491 Leute haben es durchsucht

Implementing Push Notifications Using JavaScript: A Production-Grade Approach

In diesem Beitrag erfahren Sie, wie Sie Push-Benachrichtigungen mithilfe von JavaScript implementieren, indem Sie Best Practices für die Produktion befolgen. Das Beste ist, dass ich auch eine Ordnerstruktur zur Verfügung stelle, damit Sie Ihr Projekt einfach einrichten können.

Das Einrichten von Push-Benachrichtigungen in einer realen App erfordert sorgfältige Planung. Ich zeige Ihnen, wie Sie diese Funktion in einer professionellen Node.js-App erstellen. Wir behandeln wichtige Aspekte wie die Organisation Ihres Codes, die Sicherheit und die Sicherstellung, dass er auch dann gut funktioniert, wenn Ihre App wächst.

Um zu beginnen, benötigen Sie eine Bibliothek, die Sie beim Senden von Push-Benachrichtigungen von Ihrem Node.js-Server unterstützt. Die Web-Push-Bibliothek stellt Tools zum Versenden von Benachrichtigungen und zum Verwalten der erforderlichen Schlüssel bereit.

1. Push-Benachrichtigung: Projektstruktur

Lassen Sie uns zunächst die Projektstruktur einrichten, um eine saubere und skalierbare Codebasis zu gewährleisten:

/notification-service
├── /config
│   ├── default.js
│   └── production.js
├── /controllers
│   └── notificationController.js
├── /models
│   └── user.js
├── /routes
│   └── notificationRoutes.js
├── /services
│   ├── notificationService.js
│   ├── subscriptionService.js
│   └── webPushService.js
├── /utils
│   └── errorHandler.js
├── /tests
│   └── notification.test.js
├── app.js
├── package.json
├── .env
└── README.md
Nach dem Login kopieren

Erforderliche NPM-Pakete

Bevor Sie mit der Implementierung beginnen, stellen Sie sicher, dass die folgenden NPM-Pakete installiert sind:

  • Express: Ein minimales und flexibles Node.js-Webanwendungs-Framework.
  • mongoose: Eine ODM-Bibliothek (Object Data Modeling) für MongoDB und Node.js.
  • Web-Push: Eine Bibliothek zum Senden von Push-Benachrichtigungen mithilfe des Web Push-Protokolls.
  • dotenv: Ein Modul ohne Abhängigkeit, das Umgebungsvariablen aus einer .env-Datei lädt.
  • Supertest: Eine Bibliothek zum Testen von HTTP-Assertionen in Node.js.

Installieren Sie diese Pakete mit npm:

bash

npm install express mongoose web-push dotenv supertest
Nach dem Login kopieren

2. Push-Benachrichtigung: Projektkonfiguration

Erstellen Sie Konfigurationsdateien für verschiedene Umgebungen (z. B. Entwicklung, Produktion). In diesen Dateien werden umgebungsspezifische Einstellungen gespeichert.

// /config/default.js
module.exports = {
    server: {
        port: 3000,
        env: 'development'
    },
    pushNotifications: {
        publicVapidKey: process.env.VAPID_PUBLIC_KEY,
        privateVapidKey: process.env.VAPID_PRIVATE_KEY,
        gcmApiKey: process.env.GCM_API_KEY
    },
    db: {
        uri: process.env.MONGO_URI
    }
};
Nach dem Login kopieren
// /config/production.js
module.exports = {
    server: {
        port: process.env.PORT || 3000,
        env: 'production'
    },
    // Same structure as default, with production-specific values
};
Nach dem Login kopieren

3. Modellierung der Datenbank

Verwenden Sie Mongoose, um Ihr Benutzerschema und Ihre Benachrichtigungsabonnements zu definieren.

// /models/user.js
const mongoose = require('mongoose');

const subscriptionSchema = new mongoose.Schema({
    endpoint: String,
    keys: {
        p256dh: String,
        auth: String
    }
});

const userSchema = new mongoose.Schema({
    email: { type: String, required: true, unique: true },
    subscriptions: [subscriptionSchema],
    preferences: {
        pushNotifications: { type: Boolean, default: true }
    }
});

module.exports = mongoose.model('User', userSchema);
Nach dem Login kopieren

4. Benachrichtigungsdienste

Modularisieren Sie die Logik für die Verarbeitung von Benachrichtigungen in Dienste.

// /services/webPushService.js
const webPush = require('web-push');
const config = require('config');

webPush.setVapidDetails(
    'mailto:example@yourdomain.org',
    config.get('pushNotifications.publicVapidKey'),
    config.get('pushNotifications.privateVapidKey')
);

module.exports = {
    sendNotification: async (subscription, payload) => {
        try {
            await webPush.sendNotification(subscription, JSON.stringify(payload));
        } catch (error) {
            console.error('Error sending notification', error);
        }
    }
};
Nach dem Login kopieren
// /services/notificationService.js
const User = require('../models/user');
const webPushService = require('./webPushService');

module.exports = {
    sendPushNotifications: async (userId, payload) => {
        const user = await User.findById(userId);
        if (user && user.preferences.pushNotifications) {
            user.subscriptions.forEach(subscription => {
                webPushService.sendNotification(subscription, payload);
            });
        }
    }
};
Nach dem Login kopieren

5. Controller-Logik

API-Routen verarbeiten und Dienste integrieren.

// /controllers/notificationController.js
const notificationService = require('../services/notificationService');

exports.sendNotification = async (req, res, next) => {
    try {
        const { userId, title, body } = req.body;
        const payload = { title, body };
        await notificationService.sendPushNotifications(userId, payload);
        res.status(200).json({ message: 'Notification sent successfully' });
    } catch (error) {
        next(error);
    }
};
Nach dem Login kopieren

6. Routing

Richten Sie Routen für Ihre API ein.

// /routes/notificationRoutes.js
const express = require('express');
const router = express.Router();
const notificationController = require('../controllers/notificationController');

router.post('/send', notificationController.sendNotification);

module.exports = router;
Nach dem Login kopieren

7. Fehlerbehandlung

Zentralisieren Sie die Fehlerbehandlung, um sicherzustellen, dass die App nicht abstürzt.

// /utils/errorHandler.js
module.exports = (err, req, res, next) => {
    console.error(err.stack);
    res.status(500).send({ error: 'Something went wrong!' });
};
Nach dem Login kopieren

8. Anwendungseinstiegspunkt

Initialisieren Sie die Anwendung und stellen Sie eine Verbindung zur Datenbank her.

// app.js
const express = require('express');
const mongoose = require('mongoose');
const config = require('config');
const notificationRoutes = require('./routes/notificationRoutes');
const errorHandler = require('./utils/errorHandler');

const app = express();

app.use(express.json());
app.use('/api/notifications', notificationRoutes);
app.use(errorHandler);

mongoose.connect(config.get('db.uri'), {
    useNewUrlParser: true,
    useUnifiedTopology: true
})
    .then(() => console.log('MongoDB connected...'))
    .catch(err => console.error('MongoDB connection error:', err));

const PORT = config.get('server.port');
app.listen(PORT, () => console.log(`Server running in ${config.get('server.env')} mode on port ${PORT}`));
Nach dem Login kopieren

9. Sicherheitspraktiken

  • Umgebungsvariablen: Speichern Sie vertrauliche Informationen wie API-Schlüssel und Datenbank-URIs in Umgebungsvariablen.
  • HTTPS: Stellen Sie Ihre Anwendung über HTTPS bereit, um die Kommunikation zwischen Clients und dem Server zu sichern.
  • Content Security Policy (CSP): Implementieren Sie CSP-Header, um Cross-Site-Scripting (XSS)-Angriffe zu verhindern.
  • Ratenbegrenzung: Verwenden Sie Middleware wie Express-Rate-Limit, um Ihre API vor Brute-Force-Angriffen zu schützen.

10. Testen

Schreiben Sie Tests, um sicherzustellen, dass Ihr Dienst unter verschiedenen Bedingungen wie erwartet funktioniert.

// /tests/notification.test.js
const request = require('supertest');
const app = require('../app');

describe('Notification API', () => {
    it('should send a notification', async () => {
        const res = await request(app)
            .post('/api/notifications/send')
            .send({ userId: 'someUserId', title: 'Test', body: 'This is a test' });
        expect(res.statusCode).toEqual(200);
        expect(res.body.message).toBe('Notification sent successfully');
    });
});
Nach dem Login kopieren

11. Bereitstellung in der Produktion

  • CI/CD-Pipeline: Richten Sie eine CI/CD-Pipeline mit Tools wie Jenkins, GitHub Actions oder GitLab CI ein, um das Testen, Erstellen und Bereitstellen Ihrer Anwendung zu automatisieren.
  • Containerisierung: Dockerisieren Sie Ihre Anwendung, um Konsistenz in verschiedenen Umgebungen sicherzustellen.
  • Überwachung: Verwenden Sie Überwachungstools wie Prometheus und Grafana, um den Zustand und die Leistung Ihrer Anwendung zu verfolgen.

12. Skalierung

  • Horizontale Skalierung: Stellen Sie mehrere Instanzen Ihres Dienstes hinter einem Load Balancer bereit, um hohen Datenverkehr zu bewältigen.
  • Datenbankskalierung: Implementieren Sie Sharding- oder Replikatsätze in MongoDB für die horizontale Skalierung Ihrer Datenbank.

Dieses produktionstaugliche Setup stellt sicher, dass Ihr Push-Benachrichtigungssystem skalierbar, sicher und wartbar ist. Der Code ist so organisiert, dass er einfaches Testen, Bereitstellen und Überwachen unterstützt und dabei den Best Practices der Branche folgt. Wenn Sie weitere Fragen haben oder spezifische Implementierungsdetails benötigen, fragen Sie uns gerne!

Das obige ist der detaillierte Inhalt vonImplementieren von Push-Benachrichtigungen mit JavaScript: Ein produktionstauglicher Ansatz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage