# Progressive Web App (PWA) Guide (Suomi) 🌐 **Languages:** 🇺🇸 [English](../../../../guides/PWA_GUIDE.md) · 🇪🇹 [am](../../../am/docs/guides/PWA_GUIDE.md) · 🇸🇦 [ar](../../../ar/docs/guides/PWA_GUIDE.md) · 🇦🇿 [az](../../../az/docs/guides/PWA_GUIDE.md) · 🇧🇬 [bg](../../../bg/docs/guides/PWA_GUIDE.md) · 🇧🇩 [bn](../../../bn/docs/guides/PWA_GUIDE.md) · 🇧🇦 [bs](../../../bs/docs/guides/PWA_GUIDE.md) · 🇨🇿 [cs](../../../cs/docs/guides/PWA_GUIDE.md) · 🇩🇰 [da](../../../da/docs/guides/PWA_GUIDE.md) · 🇩🇪 [de](../../../de/docs/guides/PWA_GUIDE.md) · 🇬🇷 [el](../../../el/docs/guides/PWA_GUIDE.md) · 🇪🇸 [es](../../../es/docs/guides/PWA_GUIDE.md) · 🇪🇪 [et](../../../et/docs/guides/PWA_GUIDE.md) · 🇮🇷 [fa](../../../fa/docs/guides/PWA_GUIDE.md) · 🇫🇷 [fr](../../../fr/docs/guides/PWA_GUIDE.md) · 🇮🇪 [ga](../../../ga/docs/guides/PWA_GUIDE.md) · 🇮🇳 [gu](../../../gu/docs/guides/PWA_GUIDE.md) · 🇳🇬 [ha](../../../ha/docs/guides/PWA_GUIDE.md) · 🇮🇱 [he](../../../he/docs/guides/PWA_GUIDE.md) · 🇮🇳 [hi](../../../hi/docs/guides/PWA_GUIDE.md) · 🇭🇷 [hr](../../../hr/docs/guides/PWA_GUIDE.md) · 🇭🇺 [hu](../../../hu/docs/guides/PWA_GUIDE.md) · 🇦🇲 [hy](../../../hy/docs/guides/PWA_GUIDE.md) · 🇮🇩 [id](../../../id/docs/guides/PWA_GUIDE.md) · 🇳🇬 [ig](../../../ig/docs/guides/PWA_GUIDE.md) · 🇮🇹 [it](../../../it/docs/guides/PWA_GUIDE.md) · 🇯🇵 [ja](../../../ja/docs/guides/PWA_GUIDE.md) · 🇬🇪 [ka](../../../ka/docs/guides/PWA_GUIDE.md) · 🇰🇭 [km](../../../km/docs/guides/PWA_GUIDE.md) · 🇮🇳 [kn](../../../kn/docs/guides/PWA_GUIDE.md) · 🇰🇷 [ko](../../../ko/docs/guides/PWA_GUIDE.md) · 🇱🇹 [lt](../../../lt/docs/guides/PWA_GUIDE.md) · 🇱🇻 [lv](../../../lv/docs/guides/PWA_GUIDE.md) · 🇮🇳 [ml](../../../ml/docs/guides/PWA_GUIDE.md) · 🇮🇳 [mr](../../../mr/docs/guides/PWA_GUIDE.md) · 🇲🇾 [ms](../../../ms/docs/guides/PWA_GUIDE.md) · 🇲🇹 [mt](../../../mt/docs/guides/PWA_GUIDE.md) · 🇲🇲 [my](../../../my/docs/guides/PWA_GUIDE.md) · 🇳🇵 [ne](../../../ne/docs/guides/PWA_GUIDE.md) · 🇳🇱 [nl](../../../nl/docs/guides/PWA_GUIDE.md) · 🇳🇴 [no](../../../no/docs/guides/PWA_GUIDE.md) · 🇮🇳 [or](../../../or/docs/guides/PWA_GUIDE.md) · 🇮🇳 [pa](../../../pa/docs/guides/PWA_GUIDE.md) · 🇵🇭 [phi](../../../phi/docs/guides/PWA_GUIDE.md) · 🇵🇱 [pl](../../../pl/docs/guides/PWA_GUIDE.md) · 🇵🇹 [pt](../../../pt/docs/guides/PWA_GUIDE.md) · 🇧🇷 [pt-BR](../../../pt-BR/docs/guides/PWA_GUIDE.md) · 🇷🇴 [ro](../../../ro/docs/guides/PWA_GUIDE.md) · 🇷🇺 [ru](../../../ru/docs/guides/PWA_GUIDE.md) · 🇱🇰 [si](../../../si/docs/guides/PWA_GUIDE.md) · 🇸🇰 [sk](../../../sk/docs/guides/PWA_GUIDE.md) · 🇸🇮 [sl](../../../sl/docs/guides/PWA_GUIDE.md) · 🇷🇸 [sr](../../../sr/docs/guides/PWA_GUIDE.md) · 🇸🇪 [sv](../../../sv/docs/guides/PWA_GUIDE.md) · 🇰🇪 [sw](../../../sw/docs/guides/PWA_GUIDE.md) · 🇮🇳 [ta](../../../ta/docs/guides/PWA_GUIDE.md) · 🇮🇳 [te](../../../te/docs/guides/PWA_GUIDE.md) · 🇹🇭 [th](../../../th/docs/guides/PWA_GUIDE.md) · 🇹🇷 [tr](../../../tr/docs/guides/PWA_GUIDE.md) · 🇺🇦 [uk-UA](../../../uk-UA/docs/guides/PWA_GUIDE.md) · 🇵🇰 [ur](../../../ur/docs/guides/PWA_GUIDE.md) · 🇺🇿 [uz](../../../uz/docs/guides/PWA_GUIDE.md) · 🇻🇳 [vi](../../../vi/docs/guides/PWA_GUIDE.md) · 🇳🇬 [yo](../../../yo/docs/guides/PWA_GUIDE.md) · 🇨🇳 [zh-CN](../../../zh-CN/docs/guides/PWA_GUIDE.md) · 🇹🇼 [zh-TW](../../../zh-TW/docs/guides/PWA_GUIDE.md) --- OmniRoute toimitetaan täysin asennettavana progressiivisena verkkosovelluksena (PWA). Kun käytät hallintapaneelia millä tahansa mobiiliselaimella — Androidilla (Chrome) tai iOS:llä (Safari) — voit valita "Lisää Koti-valikkoon" ja saada natiivisovelluksen kaltaisen käyttökokemuksen ilman sovelluskauppaa. ## Mikä on PWA? Progressiivinen verkkosovellus muuttaa OmniRoute-verkkohallintapaneelin sovellukseksi, joka näyttää ja tuntuu natiivilta mobiilisovellukselta. Asennuksen jälkeen se: - Käynnistyy aloitusnäytöltä omasta kuvakkeestaan - Avautuu koko näytön tilassa — selaimen osoitepalkkia tai välilehtikäyttöliittymää ei näytetä - Toimii offline-tilassa erillisen yhteyssivun avulla - Tallentaa staattiset resurssit välimuistiin nopeampaa lataamista varten - Tukee sekä pysty- että vaakasuuntaa ## Asennus ### Android (Chrome) 1. Avaa OmniRoute-hallintapaneeli Chromessa: `http://YOUR_IP:20128` 2. Chrome näyttää automaattisesti **"Lisää OmniRoute aloitusnäyttöön"** -bannerin, tai: - Napauta **⋮**-valikkoa (kolme pistettä) → **"Lisää aloitusnäyttöön"** tai **"Asenna sovellus"** 3. Vahvista kehote 4. OmniRoute ilmestyy aloitusnäytöllesi itsenäisenä sovelluksena ### iOS (Safari) 1. Avaa OmniRoute-hallintapaneeli Safarissa: `http://YOUR_IP:20128` 2. Napauta **Jaa**-painiketta (nuolella varustettu laatikko) 3. Vieritä alaspäin ja napauta **"Lisää Koti-valikkoon"** 4. Anna sille nimi (oletuksena "OmniRoute") ja napauta **Lisää** 5. OmniRoute ilmestyy aloitusnäytöllesi sovelluskuvakkeena ### Työpöytä (Chrome / Edge) 1. Avaa OmniRoute-hallintapaneeli 2. Napsauta osoitepalkin **asennuskuvaketta** (tai ⋮ → "Asenna OmniRoute...") 3. Vahvista kehote 4. OmniRoute avautuu itsenäiseen ikkunaan — ei välilehtiä eikä osoitepalkkia ## Ominaisuudet ### Koko näytön käyttökokemus Sovellusmanifestissa on asetus `display: "fullscreen"`, mikä tarkoittaa, että asennettu sovellus käyttää koko näyttöä — ilman selaimen käyttöliittymää tai tilapalkin päällekkäisyyttä. Tämän ansiosta hallintapaneeli tuntuu aidosti natiivilta. ### Offline-tuki OmniRoute sisältää service workerin (`sw.js`), joka tarjoaa älykkään välimuistitallennuksen: | Resurssityyppi | Strategia | Toiminta | | -------------------------------------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | **Sovellusrunko** | Välimuisti ensin | `/`, `/offline`, manifesti ja kuvakkeet tallennetaan välimuistiin asennuksen yhteydessä | | **Staattiset resurssit** (CSS, JS, kuvat, fontit) | Verkko ensin, välimuisti varalla | Noutaa tuoreen version verkosta; käyttää välimuistia offline-tilassa | | **Next.js-paketit** (`/_next/`) | Verkko ensin ja välimuistin päivitys | Noutaa verkosta ja päivittää välimuistin; käyttää välimuistiversiota offline-tilassa | | **Navigointipyynnöt** | Ohitus (ei koskaan siepata) | Selain huolehtii HTTP/3→HTTP/2-varayhteydestä; toimimaton QUIC-yhteys ei saa muuttua `Response.error()`-vastaukseksi | | **API-/hallintapaneelireitit** (`/api/`, `/a2a`, `/dashboard`) | Ohitus (ei koskaan tallenneta välimuistiin) | Siirtyy aina suoraan palvelimelle — service worker ei koskaan sieppaa pyyntöä | ### Offline-sivu Kun verkkoyhteys ei ole käytettävissä ja käyttäjä siirtyy uudelle sivulle, service worker näyttää erillisen `/offline`-sivun, joka: - Näyttää selkeän **"Yhteysongelma"**-viestin - Näyttää reaaliaikaisesti päivittyvän **online-/offline-tilailmaisimen** - Tarjoaa **"Yritä yhteyttä uudelleen"** -painikkeen sivun lataamiseksi uudelleen, kun yhteys palautuu - Sisältää linkin diagnostiikkaa varten **tilasivulle** ### Sovelluskuvakkeet OmniRoute tarjoaa kullekin alustalle optimoidut kuvakkeet: | Tiedosto | Koko | Käyttökohde | | ---------------------- | ----------------- | ------------------------------------ | | `icon-512.png` | 512×512 | Androidin asennuskehote, aloituskuva | | `apple-touch-icon.png` | 180×180 | iOS:n aloitusnäytön kuvake | | `icon-192.svg` | 192×192 (vektori) | Androidin mukautuva kuvake | | `apple-touch-icon.svg` | 180×180 (vektori) | Applen varakuvake | | `favicon.svg` | Vektori | Selaimen välilehdet | | `favicon.ico` | Useita kokoja | Vanhat selaimet | ### Automaattinen rekisteröinti Service worker rekisteröidään automaattisesti juuriasettelun ``-komponentin kautta. Käyttäjän toimia ei tarvita — sovellus voidaan asentaa heti, kun selain havaitsee kelvollisen manifestin ja service workerin. ## Tekninen arkkitehtuuri ### Verkkosovellusmanifesti (`manifest.webmanifest`) Next.js luo sen tiedoston `src/app/manifest.ts` kautta: ```json { "name": "OmniRoute", "short_name": "OmniRoute", "description": "OmniRoute is an AI gateway for multi-provider LLMs. One endpoint for all your AI providers.", "start_url": "/", "scope": "/", "display": "fullscreen", "orientation": "any", "background_color": "#0b0f1a", "theme_color": "#0b0f1a", "icons": [ { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }, { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" } ] } ``` ### Service Worker (`public/sw.js`) Tavallinen service worker (ei riippuvuuksia sovelluskehyksistä), joka sisältää seuraavat toiminnot: - **Asennusvaihe**: Esitallentaa sovelluskehyksen välimuistiin (juuripolku, offline-sivu, manifesti ja kuvakkeet) - **Aktivointivaihe**: Poistaa vanhat välimuistiversiot ja ottaa kaikki asiakasohjelmat hallintaansa - **Hakuvaihe**: Älykäs reititys pyynnön tyypin perusteella (navigointi, staattinen resurssi tai API) - **Välimuistin versiointi**: `omniroute-pwa-v3` — suurenna tätä versionumeroa, jos haluat pakottaa välimuistin uusimisen päivityksen yhteydessä ### Asettelun metatiedot (`src/app/layout.tsx`) Juuriasettelu tarjoaa kaikki PWA-yhteensopivuuden edellyttämät metatunnisteet: - `manifest`-linkki kohteeseen `/manifest.webmanifest` - `apple-web-app-capable: true` iOS:n itsenäistä tilaa varten - `apple-web-app-status-bar-style: black-translucent` - `mobile-web-app-capable: yes` Android Chromea varten - `theme-color: #0b0f1a` - `viewport-fit: cover` reunasta reunaan ulottuvaa hahmonnusta varten ### Komponentti: `PwaRegister` Tiedostossa `src/shared/components/PwaRegister.tsx` sijaitseva asiakaskomponentti: 1. Suoritetaan liitettäessä (vain asiakaspuolella) 2. Tarkistaa selaimen `serviceWorker`-tuen 3. Rekisteröi tiedoston `/sw.js` hiljaisesti (virheet ohitetaan, jotta ne eivät estä sovelluksen toimintaa) 4. Ei hahmonna mitään (`return null`) — komponenttia käytetään ainoastaan sivuvaikutuksen suorittamiseen ## Käyttö Termuxin kanssa (Android) Kun OmniRoutea käytetään Androidissa Termuxin kautta, PWA toimii saumattomasti: 1. Käynnistä OmniRoute Termuxissa: `npx omniroute` 2. Avaa Chrome samassa puhelimessa: `http://localhost:20128` 3. Asenna PWA valitsemalla "Lisää aloitusnäyttöön" 4. PWA muodostaa yhteyden paikalliseen Termux-palvelimeen — kaikki suoritetaan laitteessa Tämä yhdistelmä tarkoittaa, että Android-puhelimesi toimii sekä **palvelimena** (Termux) että **asiakasohjelmana** (PWA) — kyseessä on täysin itsenäinen tekoäly-yhdyskäytävä. ## Käyttö muilta laitteilta Asenna PWA mille tahansa laitteelle, jonka selaimella voi käyttää OmniRoute-palvelintasi: - **Toinen puhelin/tabletti**: Siirry osoitteeseen `http://PHONE_IP:20128` ja asenna PWA - **Kannettava tietokone**: Avaa Chrome/Edge ja asenna se työpöydän PWA-sovelluksena - **Selaimella varustettu älytelevisio**: Käytä hallintapaneelia koko näytön tilassa ## Mukauttaminen ### Instanssin nimi PWA:n nimi noudattaa kohdassa **Hallintapaneeli → Asetukset** määritettyä **Instanssin nimi** -asetusta. Jos annat instanssillesi nimeksi "Oma tekoäly-yhdyskäytävä", asennettu PWA näyttää kyseisen nimen. ### Mukautettu suosikkikuvake Jos lataat mukautetun suosikkikuvakkeen kohdassa `Hallintapaneeli → Asetukset`, työpöydän PWA-kuvake käyttää mukautettua kuvaketta. Mobiililaitteen aloitusnäytön kuvakkeet käyttävät valmiiksi luotuja tiedostoja `icon-512.png` ja `apple-touch-icon.png`. ## Rajoitukset - **Ei push-ilmoituksia** — Service worker ei toteuta Push API -rajapintaa. Ilmoituksista vastaa sen sijaan Electron-sovellus. - **Ei taustasynkronointia** — Offline-tilassa tehtyjä toimintoja ei aseteta jonoon myöhempää suorittamista varten. PWA on ensisijaisesti koontinäytön katseluun tarkoitettu sovellus. - **iOS-rajoitukset** — iOS:n Safari ei tue kaikkia PWA-ominaisuuksia (esimerkiksi asennuskehotteet ovat manuaalisia ja service workereiden taustatoimintaa on rajoitettu). - **Välimuistin koko** — Service worker tallentaa välimuistiin vain staattiset resurssit. `/api/`-reittien suuria vastaussisältöjä ei koskaan tallenneta välimuistiin. - **Mukautetut kuvakkeet mobiililaitteissa** — Faviconin vaihtaminen asetuksissa ei päivitä mobiililaitteen aloitusnäytön kuvaketta (tämä edellyttää PWA-kuvakkeiden luomista uudelleen). ## Tiedostoviite | Tiedosto | Tarkoitus | | --------------------------------------- | ------------------------------------------------------------------ | | `src/app/manifest.ts` | Next.js-manifestireitti (luo tiedoston `manifest.webmanifest`) | | `public/sw.js` | Välimuistilogiikan sisältävä service worker | | `src/shared/components/PwaRegister.tsx` | Service workerin rekisteröivä asiakaskomponentti | | `src/app/offline/page.tsx` | Offline-varasivu reaaliaikaisella tilailmaisimella | | `src/app/layout.tsx` | Juuriasettelu PWA-metatietoineen (apple-web-app, theme-color jne.) | | `public/icon-512.png` | 512×512 PNG-kuvake (Android, käynnistysnäyttö) | | `public/apple-touch-icon.png` | 180×180 PNG-kuvake (iOS:n aloitusnäyttö) | | `public/icon-192.svg` | 192×192 SVG-kuvake (Androidin mukautuva kuvake) | | `public/apple-touch-icon.svg` | 180×180 SVG-kuvake (Applen varakuvake) |