# 📤 Οδηγός: Ειδοποιήσεις στο κινητό (Web Push με κλειδωμένη οθόνη)

Αυτός ο οδηγός ενεργοποιεί **αληθινές ειδοποιήσεις** για το Timer — έρχονται στο κινητό ακόμα και με **κλειδωμένη οθόνη** ή **κλειστή εφαρμογή**. Όλα δωρεάν με Cloudflare.

## Αρχεία

| Αρχείο | Ρόλος |
|---|---|
| `ios_multi_tool_hub.html` | Η εφαρμογή (μετονομαζέ σε `index.html`) |
| `sw.js` | Service worker — δέχεται τα push |
| `manifest.json` | PWA manifest (απαραίτητο για iOS) |
| `worker.js` | Cloudflare Worker — στέλνει τα push |

## Βήμα 1 — Δημιούργησε VAPID κλειδιά

Τα κλειδιά είναι η «ταυτότητα» του server σου. Δημιούργησέ τα δωρεάν με μία επίσκεψη:

1. Άνοιξε: https://tools.reactpwa.com/vapid
2. Αντέγραψε τα **Public Key** και **Private Key** (μορφή base64url)

*(Εναλλακτικά με npm: `npx web-push generate-vapid-keys`)*

## Βήμα 2 — Deploy του Worker στο Cloudflare

1. Στο **dash.cloudflare.com** πήγαινε **Workers & Pages → Create → Worker**
2. Δώσε όνομα, π.χ. `ios-hub-push` → **Deploy**
3. Πάτα **Edit code**, σβήσε τα πάντα και **επικόλλησε όλο το περιεχόμενο του `worker.js`** → **Deploy**
4. Πήγαινε **Settings → Variables and Secrets** και πρόσθεσε:

| Τύπος | Όνομα | Τιμή |
|---|---|---|
| Secret | `VAPID_PUBLIC_KEY` | το public key από Βήμα 1 |
| Secret | `VAPID_PRIVATE_KEY` | το private key από Βήμα 1 |
| Variable | `VAPID_SUBJECT` | `mailto:το-email@sou.gr` |

5. Πήγαινε **Settings → Bindings → Add → KV Namespace**:
   - Δημιούργησε namespace με όνομα π.χ. `ios-hub-push-kv`
   - **Variable name**: `PUSH_KV` (ακριβώς έτσι — ο κώδικας το περιμένει)

6. Πήγαινε **Settings → Trigger Events → Cron Triggers** και βάλε:
   ```
   */1 * * * *
   ```
   (τρέχει κάθε λεπτό — είναι το «ξυπνητήρι» που στέλνει τις ειδοποιήσεις)

7. Σημείωσε το URL του Worker: `https://ios-hub-push.<το-account σου>.workers.dev`

## Βήμα 3 — Deploy της εφαρμογής

1. Στο **Workers & Pages** πήγαινε στο project των Pages σου (π.χ. `ios-hub`)
2. **Create new deployment → Upload assets** και ανέβασε **και τα 4 αρχεία**:
   - `ios_multi_tool_hub.html` ← μετονομασμένο σε `index.html` ⚠️
   - `sw.js`
   - `manifest.json`
3. Deploy

## Βήμα 4 — Ενεργοποίηση στο iPhone

1. Άνοιξε το `https://ios-hub.pages.dev` στο **Safari**
2. **Κοινοποίηση → Προσθήκη στην Οθόνη Αφετηρίας**
3. Άνοιξε την εφαρμογή **από το νέο εικονίδιο**
4. **Settings → Push Ειδοποιήσεις (24/7)**:
   - Επικόλλησε το URL του Worker (Βήμα 2.7)
   - Πάτα **Ενεργοποίηση Push Ειδοποιήσεων**
   - Αποδέξου τις άδειες ειδοποιήσεων
5. Το badge πρέπει να γίνει πράσινο **«Ενεργό»**

## Βήμα 5 — Τεστ 🎯

1. Στο Timer, βάλε **Custom 1 λεπτό** και πάτα **Εκκίνηση**
2. **Κλείδωσε την οθόνη** 📵
3. Σε ~1 λεπτό πρέπει να έρθει η ειδοποίηση: «⏱️ Timer Ολοκληρώθηκε!»

**Troubleshooting:** Άν δεν έρθει:
- Έλεγξε ότι το Cron Trigger είναι σωστά αποθηκευμένο
- Στο Worker **Logs** (Real-time Logs) δες αν τρέχει το cron
- Βεβαιώσου ότι ο έλεγχος γίνεται από **Αρχική Οθόνη** (όχι tab Safari)
- iOS 16.4+ απαιτείται

## Πώς δουλεύει (για την περιέργεια) 🧠

1. Πατάς «Εκκίνηση» στο Timer → η εφαρμογή στέλνει `POST /schedule {delaySeconds: 1500}` στον Worker
2. Ο Worker το αποθηκεύει στο KV με χρονική σήμανση
3. Το Cron Trigger ξυπνά τον Worker κάθε λεπτό → στέλνει κρυπτογραφημένο push (aes128gcm + VAPID) στο Apple/Google push server
4. Το push server ξυπνά το iPhone σου → το service worker δέχεται το payload → εμφανίζει την ειδοποίηση
5. Αν κάνεις Pause/Reset πριν λήξει → η εφαρμογή στέλνει `POST /cancel` και η ειδοποίηση ακυρώνεται

Παύση (Pause): ακυρώνεται. Ξανά-Εκκίνηση: προγραμματίζεται ξανά με τον υπόλοιπο χρόνο.