Skip to content

PWA_GUIDE.md

Latest commit

 

History

History
195 lines (139 loc) · 22.6 KB

PWA_GUIDE.md

File metadata and controls

195 lines (139 loc) · 22.6 KB
Raw

Progressive Web App (PWA) Guide (ਪੰਜਾਬੀ)

🌐 Languages: 🇺🇸 English · 🇪🇹 am · 🇸🇦 ar · 🇦🇿 az · 🇧🇬 bg · 🇧🇩 bn · 🇧🇦 bs · 🇨🇿 cs · 🇩🇰 da · 🇩🇪 de · 🇬🇷 el · 🇪🇸 es · 🇪🇪 et · 🇮🇷 fa · 🇫🇮 fi · 🇫🇷 fr · 🇮🇪 ga · 🇮🇳 gu · 🇳🇬 ha · 🇮🇱 he · 🇮🇳 hi · 🇭🇷 hr · 🇭🇺 hu · 🇦🇲 hy · 🇮🇩 id · 🇳🇬 ig · 🇮🇹 it · 🇯🇵 ja · 🇬🇪 ka · 🇰🇭 km · 🇮🇳 kn · 🇰🇷 ko · 🇱🇹 lt · 🇱🇻 lv · 🇮🇳 ml · 🇮🇳 mr · 🇲🇾 ms · 🇲🇹 mt · 🇲🇲 my · 🇳🇵 ne · 🇳🇱 nl · 🇳🇴 no · 🇮🇳 or · 🇵🇭 phi · 🇵🇱 pl · 🇵🇹 pt · 🇧🇷 pt-BR · 🇷🇴 ro · 🇷🇺 ru · 🇱🇰 si · 🇸🇰 sk · 🇸🇮 sl · 🇷🇸 sr · 🇸🇪 sv · 🇰🇪 sw · 🇮🇳 ta · 🇮🇳 te · 🇹🇭 th · 🇹🇷 tr · 🇺🇦 uk-UA · 🇵🇰 ur · 🇺🇿 uz · 🇻🇳 vi · 🇳🇬 yo · 🇨🇳 zh-CN · 🇹🇼 zh-TW

OmniRoute ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇੰਸਟਾਲ ਕੀਤੀ ਜਾ ਸਕਣ ਵਾਲੀ Progressive Web App ਵਜੋਂ ਉਪਲਬਧ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਮੋਬਾਈਲ ਬ੍ਰਾਊਜ਼ਰ — Android (Chrome) ਜਾਂ iOS (Safari) — ਤੋਂ ਡੈਸ਼ਬੋਰਡ ਖੋਲ੍ਹਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ "ਹੋਮ ਸਕ੍ਰੀਨ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ" ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਿਨਾਂ ਕਿਸੇ ਐਪ ਸਟੋਰ ਦੇ ਮੂਲ ਐਪ ਵਰਗਾ ਅਨੁਭਵ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ।

PWA ਕੀ ਹੈ?

Progressive Web App, OmniRoute ਵੈੱਬ ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਅਜਿਹੇ ਰੂਪ ਵਿੱਚ ਬਦਲ ਦਿੰਦੀ ਹੈ ਜੋ ਮੂਲ ਮੋਬਾਈਲ ਐਪ ਵਰਗਾ ਦਿਖਾਈ ਅਤੇ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। ਇੰਸਟਾਲ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਇਹ:

  • ਆਪਣੇ ਆਈਕਨ ਨਾਲ ਤੁਹਾਡੀ ਹੋਮ ਸਕ੍ਰੀਨ ਤੋਂ ਲਾਂਚ ਹੁੰਦੀ ਹੈ
  • ਪੂਰੀ ਸਕ੍ਰੀਨ ਵਿੱਚ ਖੁੱਲ੍ਹਦੀ ਹੈ — ਕੋਈ ਬ੍ਰਾਊਜ਼ਰ ਐਡਰੈੱਸ ਬਾਰ ਜਾਂ ਟੈਬ UI ਨਹੀਂ
  • ਸਮਰਪਿਤ ਕਨੈਕਟਿਵਿਟੀ ਪੰਨੇ ਨਾਲ ਆਫ਼ਲਾਈਨ ਕੰਮ ਕਰਦੀ ਹੈ
  • ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਕਰਨ ਲਈ ਸਥਿਰ ਐਸੈੱਟ ਕੈਸ਼ ਕਰਦੀ ਹੈ
  • ਪੋਰਟ੍ਰੇਟ ਅਤੇ ਲੈਂਡਸਕੇਪ ਦੋਵਾਂ ਦਿਸ਼ਾਵਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦੀ ਹੈ

ਇੰਸਟਾਲੇਸ਼ਨ

Android (Chrome)

  1. Chrome ਵਿੱਚ OmniRoute ਡੈਸ਼ਬੋਰਡ ਖੋਲ੍ਹੋ: http://YOUR_IP:20128
  2. Chrome ਆਪਣੇ ਆਪ "OmniRoute ਨੂੰ ਹੋਮ ਸਕ੍ਰੀਨ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ" ਬੈਨਰ ਦਿਖਾਏਗਾ, ਜਾਂ:
    • ⋮ ਮੀਨੂ (ਤਿੰਨ ਬਿੰਦੀਆਂ) 'ਤੇ ਟੈਪ ਕਰੋ → "ਹੋਮ ਸਕ੍ਰੀਨ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ" ਜਾਂ "ਐਪ ਇੰਸਟਾਲ ਕਰੋ"
  3. ਪੁਸ਼ਟੀਕਰਨ ਸੁਨੇਹੇ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ
  4. OmniRoute ਤੁਹਾਡੀ ਹੋਮ ਸਕ੍ਰੀਨ 'ਤੇ ਇੱਕ ਸੁਤੰਤਰ ਐਪ ਵਜੋਂ ਦਿਖਾਈ ਦੇਵੇਗੀ

iOS (Safari)

  1. Safari ਵਿੱਚ OmniRoute ਡੈਸ਼ਬੋਰਡ ਖੋਲ੍ਹੋ: http://YOUR_IP:20128
  2. ਸਾਂਝਾ ਕਰੋ ਬਟਨ (ਤੀਰ ਵਾਲਾ ਡੱਬਾ) 'ਤੇ ਟੈਪ ਕਰੋ
  3. ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ "ਹੋਮ ਸਕ੍ਰੀਨ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ" 'ਤੇ ਟੈਪ ਕਰੋ
  4. ਇਸਨੂੰ ਨਾਮ ਦਿਓ (ਮੂਲ ਨਾਮ "OmniRoute" ਹੈ) ਅਤੇ ਸ਼ਾਮਲ ਕਰੋ 'ਤੇ ਟੈਪ ਕਰੋ
  5. OmniRoute ਐਪ ਆਈਕਨ ਸਮੇਤ ਤੁਹਾਡੀ ਹੋਮ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦੇਵੇਗੀ

ਡੈਸਕਟਾਪ (Chrome / Edge)

  1. OmniRoute ਡੈਸ਼ਬੋਰਡ ਖੋਲ੍ਹੋ
  2. ਐਡਰੈੱਸ ਬਾਰ ਵਿੱਚ ਇੰਸਟਾਲ ਆਈਕਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ (ਜਾਂ ⋮ → "OmniRoute ਇੰਸਟਾਲ ਕਰੋ...")
  3. ਪੁਸ਼ਟੀਕਰਨ ਸੁਨੇਹੇ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ
  4. OmniRoute ਇੱਕ ਸੁਤੰਤਰ ਵਿੰਡੋ ਵਜੋਂ ਖੁੱਲ੍ਹਦੀ ਹੈ — ਕੋਈ ਟੈਬ ਨਹੀਂ, ਕੋਈ ਐਡਰੈੱਸ ਬਾਰ ਨਹੀਂ

ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਪੂਰੀ ਸਕ੍ਰੀਨ ਦਾ ਅਨੁਭਵ

ਮੈਨੀਫੈਸਟ ਨੂੰ display: "fullscreen" ਨਾਲ ਸੰਰਚਿਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਸਦਾ ਅਰਥ ਹੈ ਕਿ ਇੰਸਟਾਲ ਕੀਤੀ ਐਪ ਪੂਰੀ ਸਕ੍ਰੀਨ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ — ਕੋਈ ਬ੍ਰਾਊਜ਼ਰ ਕ੍ਰੋਮ ਨਹੀਂ ਅਤੇ ਸਟੇਟਸ ਬਾਰ ਓਵਰਲੈਪ ਨਹੀਂ। ਇਸ ਨਾਲ ਡੈਸ਼ਬੋਰਡ ਸੱਚਮੁੱਚ ਮੂਲ ਐਪ ਵਰਗਾ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।

ਆਫ਼ਲਾਈਨ ਸਮਰਥਨ

OmniRoute ਵਿੱਚ ਇੱਕ ਸਰਵਿਸ ਵਰਕਰ (sw.js) ਸ਼ਾਮਲ ਹੈ ਜੋ ਬੁੱਧੀਮਾਨ ਕੈਸ਼ਿੰਗ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:

ਐਸੈੱਟ ਦੀ ਕਿਸਮ ਰਣਨੀਤੀ ਵਿਹਾਰ
ਐਪ ਸ਼ੈੱਲ ਪਹਿਲਾਂ ਕੈਸ਼ /, /offline, ਮੈਨੀਫੈਸਟ ਅਤੇ ਆਈਕਨ ਇੰਸਟਾਲੇਸ਼ਨ ਵੇਲੇ ਪਹਿਲਾਂ ਹੀ ਕੈਸ਼ ਕੀਤੇ ਜਾਂਦੇ ਹਨ
ਸਥਿਰ ਐਸੈੱਟ (CSS, JS, ਚਿੱਤਰ, ਫੌਂਟ) ਕੈਸ਼ ਫ਼ਾਲਬੈਕ ਨਾਲ ਪਹਿਲਾਂ ਨੈੱਟਵਰਕ ਨੈੱਟਵਰਕ ਤੋਂ ਨਵੀਂ ਸਮੱਗਰੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ; ਆਫ਼ਲਾਈਨ ਹੋਣ 'ਤੇ ਕੈਸ਼ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ
Next.js ਬੰਡਲ (/_next/) ਕੈਸ਼ ਅੱਪਡੇਟ ਨਾਲ ਪਹਿਲਾਂ ਨੈੱਟਵਰਕ ਨੈੱਟਵਰਕ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰਕੇ ਕੈਸ਼ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ; ਆਫ਼ਲਾਈਨ ਹੋਣ 'ਤੇ ਕੈਸ਼ ਕੀਤਾ ਸੰਸਕਰਣ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
ਨੇਵੀਗੇਸ਼ਨ ਬੇਨਤੀਆਂ ਬਾਈਪਾਸ (ਕਦੇ ਇੰਟਰਸੈਪਟ ਨਹੀਂ ਹੁੰਦੀਆਂ) ਬ੍ਰਾਊਜ਼ਰ HTTP/3→HTTP/2 ਫ਼ਾਲਬੈਕ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ; ਇੱਕ ਨਿਸ਼ਕਿਰਿਆ QUIC ਸਾਕਟ ਨੂੰ Response.error() ਨਹੀਂ ਬਣਨਾ ਚਾਹੀਦਾ
API / ਡੈਸ਼ਬੋਰਡ ਰੂਟ (/api/, /a2a, /dashboard) ਬਾਈਪਾਸ (ਕਦੇ ਕੈਸ਼ ਨਹੀਂ ਹੁੰਦੇ) ਹਮੇਸ਼ਾ ਸਿੱਧੇ ਸਰਵਰ ਕੋਲ ਜਾਂਦੇ ਹਨ — ਸਰਵਿਸ ਵਰਕਰ ਕਦੇ ਵੀ ਇਨ੍ਹਾਂ ਨੂੰ ਇੰਟਰਸੈਪਟ ਨਹੀਂ ਕਰਦਾ

ਆਫ਼ਲਾਈਨ ਪੰਨਾ

ਜਦੋਂ ਨੈੱਟਵਰਕ ਉਪਲਬਧ ਨਹੀਂ ਹੁੰਦਾ ਅਤੇ ਵਰਤੋਂਕਾਰ ਕਿਸੇ ਨਵੇਂ ਪੰਨੇ 'ਤੇ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਰਵਿਸ ਵਰਕਰ ਇੱਕ ਸਮਰਪਿਤ /offline ਪੰਨਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ:

  • ਇੱਕ ਸਪਸ਼ਟ "ਕਨੈਕਟਿਵਿਟੀ ਸਮੱਸਿਆ" ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਹੈ
  • ਇੱਕ ਲਾਈਵ ਆਨਲਾਈਨ/ਆਫ਼ਲਾਈਨ ਸਥਿਤੀ ਸੂਚਕ ਦਿਖਾਉਂਦਾ ਹੈ ਜੋ ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ
  • ਕਨੈਕਟਿਵਿਟੀ ਵਾਪਸ ਆਉਣ 'ਤੇ ਮੁੜ ਲੋਡ ਕਰਨ ਲਈ "ਕਨੈਕਸ਼ਨ ਮੁੜ ਅਜ਼ਮਾਓ" ਬਟਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
  • ਨਿਦਾਨ ਲਈ ਸਥਿਤੀ ਪੰਨੇ ਦਾ ਲਿੰਕ ਦਿੰਦਾ ਹੈ

ਐਪ ਆਈਕਨ

OmniRoute ਹਰ ਪਲੇਟਫਾਰਮ ਲਈ ਅਨੁਕੂਲਿਤ ਆਈਕਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:

ਫ਼ਾਈਲ ਆਕਾਰ ਇਸ ਵੱਲੋਂ ਵਰਤੀ ਜਾਂਦੀ ਹੈ
icon-512.png 512×512 Android ਇੰਸਟਾਲੇਸ਼ਨ ਸੁਨੇਹਾ, ਸਪਲੈਸ਼ ਸਕ੍ਰੀਨ
apple-touch-icon.png 180×180 iOS ਹੋਮ ਸਕ੍ਰੀਨ ਆਈਕਨ
icon-192.svg 192×192 (ਵੈਕਟਰ) Android ਅਡੈਪਟਿਵ ਆਈਕਨ
apple-touch-icon.svg 180×180 (ਵੈਕਟਰ) Apple ਫ਼ਾਲਬੈਕ
favicon.svg ਵੈਕਟਰ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ
favicon.ico ਕਈ ਆਕਾਰਾਂ ਵਾਲਾ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ

ਆਟੋਮੈਟਿਕ ਰਜਿਸਟ੍ਰੇਸ਼ਨ

ਸਰਵਿਸ ਵਰਕਰ ਰੂਟ ਲੇਆਉਟ ਵਿੱਚ <PwaRegister /> ਕੰਪੋਨੈਂਟ ਰਾਹੀਂ ਆਪਣੇ ਆਪ ਰਜਿਸਟਰ ਹੁੰਦਾ ਹੈ। ਵਰਤੋਂਕਾਰ ਵੱਲੋਂ ਕਿਸੇ ਕਾਰਵਾਈ ਦੀ ਲੋੜ ਨਹੀਂ — ਜਿਵੇਂ ਹੀ ਬ੍ਰਾਊਜ਼ਰ ਵੈਧ ਮੈਨੀਫੈਸਟ ਅਤੇ ਸਰਵਿਸ ਵਰਕਰ ਦਾ ਪਤਾ ਲਗਾਉਂਦਾ ਹੈ, ਐਪ ਇੰਸਟਾਲ ਕਰਨ ਯੋਗ ਹੋ ਜਾਂਦੀ ਹੈ।

ਤਕਨੀਕੀ ਆਰਕੀਟੈਕਚਰ

ਵੈੱਬ ਐਪ ਮੈਨੀਫੈਸਟ (manifest.webmanifest)

Next.js ਵੱਲੋਂ src/app/manifest.ts ਰਾਹੀਂ ਤਿਆਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

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

ਸਰਵਿਸ ਵਰਕਰ (public/sw.js)

ਇੱਕ ਸਧਾਰਨ ਸਰਵਿਸ ਵਰਕਰ (ਕਿਸੇ ਫਰੇਮਵਰਕ ਨਿਰਭਰਤਾ ਤੋਂ ਬਿਨਾਂ), ਜਿਸ ਵਿੱਚ ਇਹ ਸ਼ਾਮਲ ਹਨ:

  • ਇੰਸਟਾਲ ਪੜਾਅ: ਐਪ ਸ਼ੈੱਲ (ਰੂਟ, ਆਫਲਾਈਨ ਪੰਨਾ, ਮੈਨੀਫੈਸਟ, ਆਈਕਨ) ਨੂੰ ਪਹਿਲਾਂ ਹੀ ਕੈਸ਼ ਕਰਦਾ ਹੈ
  • ਐਕਟੀਵੇਟ ਪੜਾਅ: ਪੁਰਾਣੇ ਕੈਸ਼ ਵਰਜਨਾਂ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ ਅਤੇ ਸਾਰੇ ਕਲਾਇੰਟਾਂ ਉੱਤੇ ਕੰਟਰੋਲ ਹਾਸਲ ਕਰਦਾ ਹੈ
  • ਫੈਚ ਪੜਾਅ: ਬੇਨਤੀ ਦੀ ਕਿਸਮ (ਨੇਵੀਗੇਸ਼ਨ, ਸਟੈਟਿਕ ਐਸੈੱਟ, API) ਦੇ ਆਧਾਰ 'ਤੇ ਸਮਝਦਾਰ ਰਾਊਟਿੰਗ ਕਰਦਾ ਹੈ
  • ਕੈਸ਼ ਵਰਜਨਿੰਗ: omniroute-pwa-v3 — ਅੱਪਡੇਟ ਤੋਂ ਬਾਅਦ ਨਵਾਂ ਕੈਸ਼ ਲਾਜ਼ਮੀ ਬਣਾਉਣ ਲਈ ਇਸ ਨੂੰ ਵਧਾਓ

ਲੇਆਉਟ ਮੈਟਾਡਾਟਾ (src/app/layout.tsx)

ਰੂਟ ਲੇਆਉਟ PWA ਅਨੁਕੂਲਤਾ ਲਈ ਲੋੜੀਂਦੇ ਸਾਰੇ ਮੈਟਾ ਟੈਗ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:

  • /manifest.webmanifest ਲਈ manifest ਲਿੰਕ
  • iOS ਸਟੈਂਡਅਲੋਨ ਮੋਡ ਲਈ apple-web-app-capable: true
  • apple-web-app-status-bar-style: black-translucent
  • Android Chrome ਲਈ mobile-web-app-capable: yes
  • theme-color: #0b0f1a
  • ਕਿਨਾਰੇ-ਤੋਂ-ਕਿਨਾਰੇ ਰੈਂਡਰਿੰਗ ਲਈ viewport-fit: cover

ਕੰਪੋਨੈਂਟ: PwaRegister

src/shared/components/PwaRegister.tsx ਵਿੱਚ ਸਥਿਤ ਇਹ ਕਲਾਇੰਟ ਕੰਪੋਨੈਂਟ:

  1. ਮਾਊਂਟ ਹੋਣ 'ਤੇ ਚੱਲਦਾ ਹੈ (ਸਿਰਫ਼ ਕਲਾਇੰਟ-ਸਾਈਡ)
  2. ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ serviceWorker ਸਮਰਥਨ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ
  3. /sw.js ਨੂੰ ਚੁੱਪਚਾਪ ਰਜਿਸਟਰ ਕਰਦਾ ਹੈ (ਐਪ ਨੂੰ ਬਲੌਕ ਹੋਣ ਤੋਂ ਬਚਾਉਣ ਲਈ ਗਲਤੀਆਂ ਨੂੰ ਅਣਡਿੱਠਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ)
  4. ਕੁਝ ਵੀ ਰੈਂਡਰ ਨਹੀਂ ਕਰਦਾ (return null) — ਇਹ ਸਿਰਫ਼ ਸਾਈਡ-ਇਫੈਕਟ ਵਾਲਾ ਕੰਪੋਨੈਂਟ ਹੈ

Termux (Android) ਨਾਲ ਵਰਤੋਂ

Android ਉੱਤੇ Termux ਰਾਹੀਂ OmniRoute ਚਲਾਉਣ ਵੇਲੇ, PWA ਬਿਨਾਂ ਕਿਸੇ ਰੁਕਾਵਟ ਦੇ ਕੰਮ ਕਰਦਾ ਹੈ:

  1. Termux ਵਿੱਚ OmniRoute ਸ਼ੁਰੂ ਕਰੋ: npx omniroute
  2. ਉਸੇ ਫ਼ੋਨ ਉੱਤੇ Chrome ਵਿੱਚ ਖੋਲ੍ਹੋ: http://localhost:20128
  3. "ਹੋਮ ਸਕ੍ਰੀਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ" ਰਾਹੀਂ PWA ਇੰਸਟਾਲ ਕਰੋ
  4. PWA ਸਥਾਨਕ Termux ਸਰਵਰ ਨਾਲ ਕਨੈਕਟ ਹੁੰਦਾ ਹੈ — ਸਭ ਕੁਝ ਡਿਵਾਈਸ ਉੱਤੇ ਹੀ ਚੱਲਦਾ ਹੈ

ਇਸ ਸੁਮੇਲ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡਾ Android ਫ਼ੋਨ ਸਰਵਰ (Termux) ਅਤੇ ਕਲਾਇੰਟ (PWA), ਦੋਵੇਂ ਹੈ — ਇੱਕ ਸੰਪੂਰਨ, ਸਵੈ-ਨਿਰਭਰ AI ਗੇਟਵੇ।

ਹੋਰ ਡਿਵਾਈਸਾਂ ਤੋਂ ਵਰਤੋਂ

PWA ਨੂੰ ਕਿਸੇ ਵੀ ਅਜਿਹੇ ਡਿਵਾਈਸ ਉੱਤੇ ਇੰਸਟਾਲ ਕਰੋ ਜਿਸ ਕੋਲ ਤੁਹਾਡੇ OmniRoute ਸਰਵਰ ਤੱਕ ਬ੍ਰਾਊਜ਼ਰ ਪਹੁੰਚ ਹੋਵੇ:

  • ਕੋਈ ਹੋਰ ਫ਼ੋਨ/ਟੈਬਲੈੱਟ: http://PHONE_IP:20128 ਉੱਤੇ ਜਾਓ ਅਤੇ PWA ਇੰਸਟਾਲ ਕਰੋ
  • ਲੈਪਟਾਪ: Chrome/Edge ਖੋਲ੍ਹੋ ਅਤੇ ਇਸ ਨੂੰ ਡੈਸਕਟਾਪ PWA ਵਜੋਂ ਇੰਸਟਾਲ ਕਰੋ
  • ਬ੍ਰਾਊਜ਼ਰ ਵਾਲਾ ਸਮਾਰਟ TV: ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਪੂਰੀ ਸਕ੍ਰੀਨ ਵਿੱਚ ਖੋਲ੍ਹੋ

ਅਨੁਕੂਲਨ

ਇੰਸਟੈਂਸ ਦਾ ਨਾਮ

PWA ਸਿਰਲੇਖ Dashboard → Settings ਵਿਚਲੀ ਇੰਸਟੈਂਸ ਦਾ ਨਾਮ ਸੈਟਿੰਗ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਇੰਸਟੈਂਸ ਦਾ ਨਾਮ ਬਦਲ ਕੇ "ਮੇਰਾ AI ਗੇਟਵੇ" ਰੱਖਦੇ ਹੋ, ਤਾਂ ਇੰਸਟਾਲ ਕੀਤਾ PWA ਉਹੀ ਨਾਮ ਦਿਖਾਏਗਾ।

ਕਸਟਮ ਫੈਵੀਕਾਨ

ਜੇ ਤੁਸੀਂ Dashboard → Settings ਰਾਹੀਂ ਕੋਈ ਕਸਟਮ ਫੈਵੀਕਾਨ ਅੱਪਲੋਡ ਕਰਦੇ ਹੋ, ਤਾਂ ਡੈਸਕਟਾਪ ਉੱਤੇ PWA ਆਈਕਨ ਕਸਟਮ ਆਈਕਨ ਨੂੰ ਦਰਸਾਏਗਾ। ਮੋਬਾਈਲ ਹੋਮ ਸਕ੍ਰੀਨ ਆਈਕਨ ਪਹਿਲਾਂ ਤੋਂ ਬਣੀਆਂ icon-512.png ਅਤੇ apple-touch-icon.png ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

ਸੀਮਾਵਾਂ

  • ਕੋਈ ਪੁਸ਼ ਸੂਚਨਾਵਾਂ ਨਹੀਂ — ਸਰਵਿਸ ਵਰਕਰ Push API ਨੂੰ ਲਾਗੂ ਨਹੀਂ ਕਰਦਾ। ਇਸ ਦੀ ਬਜਾਏ ਸੂਚਨਾਵਾਂ Electron ਐਪ ਦੁਆਰਾ ਸੰਭਾਲੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।
  • ਕੋਈ ਬੈਕਗ੍ਰਾਊਂਡ ਸਿੰਕ ਨਹੀਂ — ਆਫ਼ਲਾਈਨ ਕਾਰਵਾਈਆਂ ਨੂੰ ਮੁੜ ਚਲਾਉਣ ਲਈ ਕਤਾਰ ਵਿੱਚ ਨਹੀਂ ਰੱਖਿਆ ਜਾਂਦਾ। PWA ਮੁੱਖ ਤੌਰ 'ਤੇ ਡੈਸ਼ਬੋਰਡ ਵੇਖਣ ਲਈ ਹੈ।
  • iOS ਪਾਬੰਦੀਆਂ — iOS ਉੱਤੇ Safari ਸਾਰੀਆਂ PWA ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ (ਉਦਾਹਰਨ ਲਈ, ਇੰਸਟਾਲ ਪ੍ਰੌਂਪਟ ਮੈਨੂਅਲ ਹੁੰਦੇ ਹਨ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਸਰਵਿਸ ਵਰਕਰ ਸੀਮਿਤ ਹੁੰਦੇ ਹਨ)।
  • ਕੈਸ਼ ਆਕਾਰ — ਸਰਵਿਸ ਵਰਕਰ ਸਿਰਫ਼ ਸਟੈਟਿਕ ਐਸੈੱਟਾਂ ਨੂੰ ਕੈਸ਼ ਕਰਦਾ ਹੈ। /api/ ਰੂਟਾਂ ਤੋਂ ਆਉਣ ਵਾਲੇ ਵੱਡੇ ਰਿਸਪਾਂਸ ਪੇਲੋਡ ਕਦੇ ਵੀ ਕੈਸ਼ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ।
  • ਮੋਬਾਈਲ ਉੱਤੇ ਕਸਟਮ ਆਈਕਨ — ਸੈਟਿੰਗਾਂ ਵਿੱਚ ਫੇਵਿਕਾਨ ਬਦਲਣ ਨਾਲ ਮੋਬਾਈਲ ਉੱਤੇ ਹੋਮ ਸਕ੍ਰੀਨ ਆਈਕਨ ਅੱਪਡੇਟ ਨਹੀਂ ਹੁੰਦਾ (ਇਸ ਲਈ PWA ਆਈਕਨਾਂ ਨੂੰ ਮੁੜ ਜਨਰੇਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ)।

ਫ਼ਾਈਲਾਂ ਦਾ ਹਵਾਲਾ

ਫ਼ਾਈਲ ਉਦੇਸ਼
src/app/manifest.ts Next.js ਮੈਨੀਫੈਸਟ ਰੂਟ (manifest.webmanifest ਜਨਰੇਟ ਕਰਦਾ ਹੈ)
public/sw.js ਕੈਸ਼ਿੰਗ ਲੌਜਿਕ ਵਾਲਾ ਸਰਵਿਸ ਵਰਕਰ
src/shared/components/PwaRegister.tsx ਸਰਵਿਸ ਵਰਕਰ ਨੂੰ ਰਜਿਸਟਰ ਕਰਨ ਵਾਲਾ ਕਲਾਇੰਟ ਕੰਪੋਨੈਂਟ
src/app/offline/page.tsx ਲਾਈਵ ਸਥਿਤੀ ਸੰਕੇਤਕ ਵਾਲਾ ਆਫ਼ਲਾਈਨ ਫਾਲਬੈਕ ਪੰਨਾ
src/app/layout.tsx PWA ਮੈਟਾਡਾਟਾ ਵਾਲਾ ਰੂਟ ਲੇਆਉਟ (apple-web-app, theme-color, ਆਦਿ)
public/icon-512.png 512×512 PNG ਆਈਕਨ (Android, ਸਪਲੈਸ਼ ਸਕ੍ਰੀਨ)
public/apple-touch-icon.png 180×180 PNG ਆਈਕਨ (iOS ਹੋਮ ਸਕ੍ਰੀਨ)
public/icon-192.svg 192×192 SVG ਆਈਕਨ (Android ਐਡੈਪਟਿਵ)
public/apple-touch-icon.svg 180×180 SVG ਆਈਕਨ (Apple ਫਾਲਬੈਕ)