harvis
web app

Встанови harvis.dev як застосунок

harvis.dev має вебманіфест, тож браузер може встановити його як будь-який інший застосунок — власне вікно, власна іконка в доку або на головному екрані. Без магазину застосунків, без інсталятора, без дозволів.

why bother

Що змінює встановлення

  • Власне вікно

    Ні вкладок, ні адресного рядка. Завантажувач і панель відкриваються в чистому окремому вікні, яке має власне місце в перемикачі застосунків.

  • Одне натискання — і опубліковано

    Іконка в доку, на панелі задач або на головному екрані. Відкрий, кинь папку — і сайт уже онлайн, поки вікно ще влаштовується.

  • Нічого завантажувати

    Це той самий сайт, який ти зараз читаєш — встановлення додає лише іконку й вікно. Ні пакета, ні акаунта в магазині, ні фонових оновлень, які треба схвалювати.

Як встановити

Обери браузер, у якому це читаєш. Усі шляхи закінчуються однаково: harvis.dev поруч із твоїми рідними застосунками.

Chrome, Edge або Brave на комп'ютері

  1. 01Подивись на правий край адресного рядка — там значок встановлення, невеликий монітор зі стрілкою вниз.
  2. 02Немає значка? Відкрий меню браузера й вибери «Установити сторінку як застосунок» (в Edge: Застосунки → Установити цей сайт як застосунок).
  3. 03Підтверди — і harvis.dev відкриється у власному вікні та з'явиться в списку застосунків.

Chrome на Android

  1. 01Торкнись меню ⋮ у верхньому правому куті.
  2. 02Вибери «Додати на головний екран», потім «Установити».
  3. 03Іконка з'явиться на головному екрані й відкриватиметься без жодних елементів браузера.

Safari на iPhone та iPad

  1. 01Торкнись кнопки «Поділитися» — квадрата зі стрілкою вгору.
  2. 02Прогорни панель, торкнись «На екран «Домівка»», а тоді «Додати».
  3. 03iOS читає той самий маніфест, але ніколи не показує запит, тож це єдиний шлях.

Safari на Mac

  1. 01Відкрий harvis.dev у звичайній вкладці.
  2. 02У рядку меню вибери Файл → Додати в Dock, дай назву й натисни «Додати».
  3. 03Потрібна macOS Sonoma або новіша — давніші версії Safari не встановлюють вебзастосунки.

Firefox на комп'ютері прибрав встановлення вебзастосунків, тож закладка — найближчий варіант. У Firefox на Android у меню досі є «Додати на головний екран».

Що всередині маніфесту

Усе встановлення тримається на одному файлі за адресою /site.webmanifest. Браузери читають із нього назву застосунку, які іконки брати й як має відкриватися вікно.

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

«standalone» — це поле, яке прибирає елементи браузера; іконка maskable — та, яку Android обрізає під власну форму.

Зроби свій сайт встановлюваним

Усе, що ти публікуєш на harvis.dev, встановлюється так само. Поклади manifest.json поруч з index.html, познач його в head і додай іконки 192px та 512px — це всі вимоги.

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

Браузери також вимагають HTTPS, перш ніж запропонувати встановлення. Кожна адреса harvis.dev уже працює через HTTPS, тож налаштовувати нічого.

Опублікувати сайтУсі завантаження