Odoo ist eine hervorragende Basis für Geschäftsanwendungen – Sie haben bereits Modelle, Benutzer, Zugriffsrechte, ein Portal …
Aber Nutzer erwarten heute, dass sich alles wie eine echte Mobile App anfühlt: ein Icon auf dem Startbildschirm, schnelle Reaktion und Benachrichtigungen, die erscheinen, selbst wenn die App nicht geöffnet ist.
Genau hier kommt eine Progressive Web App (PWA) oben auf Odoo ins Spiel.
Im Folgenden gehen wir die wichtigsten Schritte durch, wie Sie eine schlanke PWA-Schicht über Ihr Odoo-Portal legen und Push-Benachrichtigungen integrieren.
Struktur des Odoo-Moduls für die PWA
Zuerst ist es wichtig, dass das Projekt logisch aufgebaut ist.
Ein typisches Modul kann so aussehen:
pwa_custom/ │ ├── __init__.py ├── __manifest__.py │ ├── controllers/ │ ├── __init__.py │ └── main.py │ ├── models/ │ ├── __init__.py │ └── push_subscription.py │ ├── views/ │ ├── pwa_templates.xml │ └── assets.xml │ └── static/ └── src/ ├── js/ │ ├── pwa.js │ └── service_worker.js └── img/ └── icons/ ├── icon-192.png └── icon-512.png
Die Idee dahinter:
Odoo bleibt das Backend (Modelle, Business-Logik), und dieses Modul ist eine dünne PWA-Schicht – Routen, Templates und JavaScript.
Drei zentrale Bausteine einer PWA
Damit sich ein beliebiges Portal wie eine Progressive Web App verhält, braucht es drei Elemente:
- Manifest – der „Ausweis“ der Anwendung
- Service Worker – der Hintergrundarbeiter
- sicheres Protokoll (HTTPS)
1. Manifest – wie sich die Anwendung präsentiert
Das Manifest ist eine JSON-Datei, die dem Browser mitteilt:
- wie die Anwendung heißt
- welche URL die Startseite ist
- welche Icons verwendet werden
- in welchem Modus die App dargestellt wird (standalone, fullscreen …)
Minimalbeispiel:
{ "name": "Odoo portal aplikacija", "short_name": "Odoo app", "start_url": "/my/pwa", "display": "standalone", "background_color": "#ffffff", "theme_color": "#2563eb", "icons": [ { "src": "/pwa_custom/static/src/img/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/pwa_custom/static/src/img/icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ] }
Dieses JSON wird üblicherweise von einem Controller ausgeliefert, z. B. unter /pwa/manifest.json.
Im gemeinsamen HTML-Layout fügen Sie dann den Verweis auf das Manifest ein:
<link rel="manifest" href="/pwa/manifest.json" />
Ab diesem Zeitpunkt weiß der Browser, dass Ihr Portal nicht nur eine normale Seite ist, sondern eine Anwendung, die auf dem Startbildschirm installiert werden kann.
2. Service Worker – Cache, Offline-Modus und Benachrichtigungen
Ein Service Worker ist ein kleines Skript, das in einem eigenen Thread des Browsers läuft. Seine Hauptaufgaben:
- Ressourcen (CSS, JS, wichtige Seiten) cachen
- Basisinhalte anzeigen, auch wenn die Verbindung instabil ist
- Benachrichtigungen entgegennehmen und anzeigen, die vom Server kommen
Registracija service worker-а obično izgleda ovako (u pwa.js):
if ("serviceWorker" in navigator) { navigator.serviceWorker .register("/pwa-service-worker.js") .then(function (registration) { console.log("Service worker registered:", registration.scope); }) .catch(function (error) { console.error("Service worker registration failed:", error); }); }
In der Datei service_worker.js legen Sie fest:
- was in den Cache kommt
- wie sich die Anwendung verhält, wenn kein Internet verfügbar ist
- was passiert, wenn eine neue Nachricht (Benachrichtigung) aus dem Odoo-Backend eintrifft
3. HTTPS – Voraussetzung, damit alles funktioniert
Sowohl PWA-Funktionen als auch Push-Benachrichtigungen setzen ein sicheres Protokoll voraus.
In der Praxis: Die Odoo-Instanz muss über HTTPS (Domain + Zertifikat) erreichbar sein. Ohne HTTPS erlaubt der Browser weder die Registrierung des Service Workers noch die Nutzung von Web Push.
Die PWA-Startseite im Portal
In der Odoo-Welt ist eine PWA vor allem als Portal-App sinnvoll – etwas, das Endnutzer häufig auf dem Smartphone öffnen.
Der erste Schritt ist daher, eine klare Startseite zu erstellen, typischerweise /my/pwa, die Folgendes anzeigt:
- bevorstehende Termine oder Aufgaben
- aktuelle Elemente (Bestellungen, Rechnungen, Tickets …)
- eine kleine Statusübersicht (Dashboard)
Einige Empfehlungen:
- alles sollte auf einem Smartphone-Display gut lesbar sein
- vermeiden Sie zu viele Klicks und unnötige Navigation
- aus PWA-Sicht ist dies der „Home-Screen“ Ihrer Anwendung
Im Manifest setzen Sie dann start_url: "/my/pwa", sodass die PWA immer mit dieser Seite startet.
Wie Benachrichtigungen im Browser funktionieren
Benachrichtigungen basieren auf dem Web-Push-Standard. Kurz zusammengefasst:
- Die PWA bittet um Erlaubnis, der Browser fragt den Nutzer nach der Zustimmung zu Benachrichtigungen.
- Akzeptiert der Nutzer, erzeugt der Browser ein sogenanntes Subscription-Objekt für dieses Gerät und diesen Browser.
- Die PWA sendet die Subscription-Daten an das Odoo-Backend.
- Das Backend speichert die Subscription in einer Tabelle, die mit dem Benutzer verknüpft ist.
- Wenn in Odoo etwas Wichtiges passiert (Termin bestätigt, neue Nachricht, Statusänderung …), sendet das Backend eine Nachricht an alle Subscriptions dieses Benutzers.
- Der Service Worker empfängt die Nachricht und zeigt sie als Benachrichtigung an – auch wenn der Browser minimiert ist.
Die Subscription sieht ungefähr so aus:
{ "endpoint": "https://push-service.example/...", "keys": { "p256dh": "PUBLIC_KEY_BASE64", "auth": "AUTH_SECRET_BASE64" } }
Diese Werte verwendet Odoo, wenn eine neue Nachricht an dieses Gerät geschickt werden soll.
Was im Odoo-Backend ergänzt wird
Damit alles funktioniert, bringt das PWA-Modul in Odoo normalerweise einige Bausteine mit:
-
Modell für Subscriptions – eine Tabelle (z. B. pwa.push.subscription) mit Feldern wie:
- Benutzer
- Endpoint
- öffentlicher Schlüssel (p256dh)
- Auth-Schlüssel
-
Routen für den Datenaustausch mit der PWA:
- eine Route, die den öffentlichen VAPID-Schlüssel zurückgibt, den das Frontend beim Abonnieren verwendet
- eine Route, an die das Frontend das Subscription-JSON sendet, damit es in der Datenbank gespeichert wird
- Konfiguration der VAPID-Schlüssel – privater und öffentlicher Schlüssel werden in Odoo-Systemparametern abgelegt
-
Hilfsmethode zum Versenden von Benachrichtigungen – ein Stück Code, das:
- alle Subscriptions eines Benutzers findet
- eine Web-Push-Nachricht mit kurzem Text und optionaler URL sendet
Ihre bestehende Business-Logik (Module für Termine, Bestellungen, Tickets …) ruft diese Hilfsmethode einfach immer dann auf, wenn ein für den Nutzer relevanter Vorgang stattfindet.
Wie die PWA nützlich wird – und nicht lästig
Die technische Umsetzung ist machbar, aber die User Experience entscheidet, ob die PWA wirklich genutzt wird.
Einige praktische Hinweise:
- Versenden Sie sie nur, wenn sie für den Nutzer wirklich relevant sind: Terminbestätigung oder -änderung, wichtige Erinnerung, neue Nachricht, wesentliche Statusänderung.
- Erklären Sie, warum Benachrichtigungen sinnvoll sind. Schreiben Sie direkt auf der PWA-Startseite in einem Satz, was der Nutzer davon hat: weniger verpasste Aufgaben, schnellere Reaktion auf wichtige Änderungen usw.
- Achten Sie auf den Offline-Modus. Statt eines leeren Bildschirms sollte eine klare Meldung erscheinen, dass der Nutzer momentan offline ist – idealerweise mit den zuletzt verfügbaren Daten.
- Verlinken Sie jede Benachrichtigung auf den richtigen Bildschirm. Wenn die Meldung lautet „Sie haben ein neues Dokument“, sollte der Klick genau dieses Dokument oder eine Liste neuer Dokumente öffnen – nicht irgendein Dashboard.
Fazit
Eine maßgeschneiderte PWA auf Basis von Odoo bedeutet kein komplett neues Projekt, sondern eine dünne Schicht über Ihrem bestehenden System:
- ein Modul mit klarer Struktur
- ein Manifest, das die App beschreibt
- ein Service Worker, der sich um Cache, Offline-Modus und Benachrichtigungen kümmert
- ein Modell und Routen in Odoo zum Speichern von Subscriptions und Versenden von Nachrichten
Das Ergebnis ist ein Odoo-Portal, das:
- sich wie eine App vom Startbildschirm öffnen lässt
- stabiler wirkt, wenn die Verbindung schwach ist
- den Nutzer durch Benachrichtigungen aktiv zurückholt, wenn etwas Wichtiges passiert
So heben Sie ein bestehendes Odoo-System auf das Niveau einer modernen, app-ähnlichen Nutzererfahrung – ohne den Aufwand und die Wartung separater nativer Mobile-Apps.