Kako napraviti prilagođenu Odoo PWA aplikaciju sa obavještenjima

Odoo je odlična baza za poslovne aplikacije – imate modele, korisnike, prava pristupa, portal…

Ali korisnici danas očekuju da sve „osjećaju“ kao pravu aplikaciju na telefonu: ikonica na ekranu, brz rad i obavještenja koja iskaču čak i kada aplikacija nije otvorena.

Tu ulazi progresivna veb aplikacija (PWA) na vrhu Odoo-a.

U nastavku prolazimo kroz glavne korake kako da napravite svoj mali PWA sloj iznad Odoo portala, sa podrškom za obavještenja.

Struktura Odoo modula za PWA​

Prvo je važno da projekat bude logično organizovan.

Tipičan modul može da izgleda ovako:

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

Ideja je:

Odoo ostaje backend (modeli, logika), a ovaj modul je tanki PWA sloj – rute, šabloni i JavaScript.

Tri ključna dijela PWA

Da bi se bilo koji portal ponašao kao progresivna aplikacija, potrebna su tri elementa:

1. Manifest – lična karta aplikacije
2. Service worker – radnik u pozadini
3. Bezbijedan protokol (HTTPS)

Bezbijedan protokol (HTTPS)

Manifest je JSON fajl koji govori pregledaču:

• kako se aplikacija zove
• koji URL je početna stranica
• koje ikone da koristi
• u kom „modu“ da prikaže aplikaciju (standalone, fullscreen…)

Minimalan primjer:

{
  "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"
    }
  ]
}

Ovaj JSON se obično servira iz kontrolera kao npr. /pwa/manifest.json.

Zatim se u zajednički HTML „layout“ ubaci link ka manifestu:

<link rel="manifest" href="/pwa/manifest.json" />

Od tog trenutka pregledač zna da vaš portal nije obična stranica, nego aplikacija koja se može instalirati na početni ekran.

2. Service worker – keš, offline i obavještenja

Service worker je mala skripta koja radi u posebnom thread-u pregledača. Njegove glavne uloge:​

• keširanje resursa (CSS, JS, glavne stranice)
• prikaz osnovnog sadržaja i kada mreža „puca“
• prihvatanje i prikaz obavještenja koja stižu sa servera

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);
    });
}

U samom fajlu service_worker.js odlučujete:

• šta ide u keš
• kako aplikacija reaguje kad nema interneta
• šta se dešava kada stigne nova poruka iz Odoo backend-a (obavještenje)

3. HTTPS – preduslov da sve radi

I PWA i obavještenja zahtijevaju siguran protokol.

U praksi: Odoo aplikacija mora da radi preko HTTPS-a (domen + sertifikat). Bez toga pregledač neće dozvoliti registraciju service worker-a niti rad Web Push mehanizma.

Početna PWA stranica u portalu​

U Odoo svijetu PWA ima smisla najviše kao portal aplikacija: nešto što krajnji korisnik često otvara sa telefona.

Zato je prvi korak da napravite jednu jasnu početnu stranicu, tipično /my/pwa, koja prikazuje:

• nadolazeće termine ili zadatke
• najnovije stavke (narudžbe, račune, tikete…)
• kratki pregled stanja (dashboard)

Nekoliko smjernica:

• sve treba da bude čitljivo na ekranu telefona
• bez previše klikova i nepotrebne navigacije
• iz PWA perspektive ovo je „home ekran“ vaše aplikacije

U manifestu onda stavite start_url: "/my/pwa", tako da PWA uvijek kreće od te stranice.

Kako funkcionišu obavještenja u pregledaču

Obavještenja se zasnivaju na Web Push standardu. Ukratko:

1. PWA traži dozvolu: pregledač pita korisnika da li dozvoljava obavještenja.
2. Ako korisnik prihvati, pregledač generiše tzv. pretplatu (subscription) za taj uređaj i taj pregledač.
3. PWA šalje podatke o pretplati u Odoo backend.
4. Backend čuva pretplatu u tabeli povezanoj sa korisnikom.
5. Kad se u Odoo-u desi nešto važno (potvrđen termin, nova poruka, promjena statusa…), backend šalje poruku svim pretplatama tog korisnika.
6. Service worker prima poruku i prikazuje je kao obavještenje, čak i ako je pregledač minimizovan.

Pretplata izgleda otprilike ovako:

{
  "endpoint": "https://push-service.example/...",
  "keys": {
    "p256dh": "PUBLIC_KEY_BASE64",
    "auth": "AUTH_SECRET_BASE64"
  }
}

Ove vrijednosti Odoo koristi kad treba da pošalje novu poruku tom uređaju.

Šta se dodaje u Odoo backend

Da bi sve radilo, modul za PWA u Odoo-u obično uvodi nekoliko stvari:

• model za pretplate – tabela (npr. pwa.push.subscription) sa poljima:
  • korisnik
  • endpoint
  • javni ključ (p256dh)
  • auth ključ
• rute za razmjenu podataka sa PWA-om:
  • ruta koja vraća javni VAPID ključ koji frontend koristi kada se pretplaćuje
  • ruta kojoj frontend šalje JSON pretplate da bi se sačuvao u bazi
• konfiguracija VAPID ključeva – privatni i javni ključ se čuvaju u sistemskim parametrima Odoo-a
• pomoćna metoda za slanje obavještenja – dio koda koji:
  • nađe sve pretplate određenog korisnika
  • pošalje Web Push poruku sa kratkim tekstom i opcionalnim URL-om

Vaš postojeći poslovni kod (modul za termine, narudžbe, tikete…) samo poziva tu pomoćnu metodu onda kada se desi događaj značajan za korisnika.

Kako da PWA bude korisna, a ne naporna

Tehnički dio je rješiv, ali korisničko iskustvo odlučuje da li će PWA zaživjeti.

Nekoliko praktičnih savjeta:

• Ne zatrpavajte obavještenjima. Šaljite ih samo kada zaista znače nešto korisniku: potvrda ili promjena termina, važan podsjetnik, nova poruka, značajna promjena statusa.
• Objasnite zašto da uključi obavještenja. Na samoj PWA stranici napišite jednom rečenicom šta korisnik dobija: manje propuštenih obaveza, brže reagovanje na važne promjene i slično.
• Vodite računa o offline režimu. Umjesto praznog ekrana, prikažite jasnu poruku da korisnik trenutno nije online, ali da su prikazani posljednji dostupni podaci.
• Povežite obavještenje sa pravom stranicom. Ako poruka glasi „Imate novi dokument“, klik na nju treba da otvori baš taj dokument ili listu novih dokumenata, a ne nasumičan dashboard.

Zaključak

Prilagođena PWA aplikacija na vrhu Odoo-a ne znači potpuno novi projekat, nego tanak sloj iznad postojećeg sistema:

• jedan modul sa jasnom strukturom
• manifest koji opisuje aplikaciju
• service worker koji brine o kešu, offline režimu i obavještenjima
• model i rute u Odoo-u za čuvanje pretplata i slanje poruka

Rezultat je Odoo portal koji se:

• otvara kao aplikacija sa početnog ekrana
• radi pouzdanije i kada je mreža slaba
• sam „pozove“ korisnika nazad kroz obavještenja kada se desi nešto važno​

To je praktičan način da postojeći Odoo sistem podignete na nivo modernog aplikativnog iskustva, bez razvoja i održavanja posebnih mobilnih aplikacija.