harvis
web app

I-install ang harvis.dev bilang app

May web manifest ang harvis.dev, kaya kaya itong i-install ng browser mo tulad ng ibang app — sariling window, sariling icon sa dock o home screen. Walang app store, walang installer, walang hinihinging permiso.

why bother

Ano ang nagbabago kapag na-install

  • Sariling window

    Walang tab, walang address bar. Bubukas ang uploader at ang dashboard mo sa malinis na hiwalay na window, may sariling puwesto sa app switcher.

  • Isang tap para mag-publish

    Isang icon sa dock, taskbar, o home screen. Buksan, i-drop ang folder, at live na ang site bago pa mag-settle ang window.

  • Walang ida-download

    Ito rin ang site na binabasa mo ngayon — ang pag-install ay nagdaragdag lang ng icon at window. Walang bundle, walang store account, walang background update na aaprubahan.

Paano mag-install

Piliin ang browser na ginagamit mo ngayon. Pare-pareho ang bagsak ng lahat ng ruta: katabi na ng mga native app mo ang harvis.dev.

Chrome, Edge, o Brave sa desktop

  1. 01Tingnan ang kanang dulo ng address bar — ang install icon, maliit na monitor na may pababang arrow.
  2. 02Walang icon? Buksan ang menu ng browser at piliin ang “Install page as app” (sa Edge: Apps → Install this site as an app).
  3. 03Kumpirmahin, at bubukas ang harvis.dev sa sarili nitong window at lalabas sa app launcher mo.

Chrome sa Android

  1. 01I-tap ang ⋮ na menu sa kanang itaas.
  2. 02Piliin ang “Add to Home screen”, tapos i-tap ang “Install”.
  3. 03Mapupunta ang icon sa home screen mo at bubukas nang walang anumang bahagi ng browser.

Safari sa iPhone at iPad

  1. 01I-tap ang Share button — ang parisukat na may pataas na arrow.
  2. 02I-scroll ang sheet, i-tap ang “Add to Home Screen”, tapos “Add”.
  3. 03Binabasa ng iOS ang parehong manifest pero hindi ito nagpapakita ng prompt, kaya ito lang ang daan.

Safari sa Mac

  1. 01Buksan ang harvis.dev sa normal na tab.
  2. 02Piliin ang File → Add to Dock sa menu bar, pangalanan ito, at i-click ang Add.
  3. 03Kailangan ng macOS Sonoma pataas — hindi makapag-install ng web app ang mga naunang Safari.

Inalis na ng Firefox sa desktop ang pag-install ng web app, kaya bookmark na lang ang pinakamalapit. May “Add to Home screen” pa rin sa menu ng Firefox sa Android.

Ano ang laman ng manifest

Isang file lang ang nagpapatakbo ng buong pag-install, inihahain sa /site.webmanifest. Doon binabasa ng browser ang pangalan ng app, kung aling icon ang gagamitin, at kung paano dapat bumukas ang window.

site.webmanifest
{
  "name": "harvis.dev",
  "short_name": "harvis.dev",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#13161a",
  "theme_color": "#13161a",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Ang “standalone” ang field na nag-aalis ng browser chrome; ang maskable icon naman ang kinukrop ng Android sa sarili nitong hugis.

Gawing installable ang sarili mong site

Puwedeng i-install nang eksaktong ganito ang kahit anong ide-deploy mo sa harvis.dev. Maglagay ng manifest.json katabi ng index.html mo, ituro ito mula sa head, at magsama ng 192px at 512px na icon — iyon lang ang kailangan.

html
<!-- index.html -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#13161a">

Hinihingi rin ng mga browser ang HTTPS bago mag-alok ng install. HTTPS na ang bawat address ng harvis.dev, kaya wala kang kailangang i-configure.

Mag-deploy ng siteLahat ng download