ВойтиСоздать аккаунт
ВойтиСоздать аккаунт

add-to-homescreen

Из публичных источников

Легко добавьте веб-сайт на главный экран iOS, Android или компьютера.

Машинный перевод · Показать оригинал

Easily add website to your IOS/Android/Desktop homescreen.

ПриложениеКатегория: Веб-приложенияOpen sourceданные проверены 16 окт. 2026 г.
СравнитьВ коллекцию

Обзор

  • add-to-homescreen
  • desktop
  • desktop-app
  • desktop-application
  • desktop-apps
  • manifest-json
  • mobile-app
  • mobile-detect
  • mobile-detection
  • mobile-development
  • mobile-web
  • mobile-web-app

Установка

Команды только показываются, маркетплейс их не выполняет. Сверяйтесь с официальной документацией.
  • Официальный сайтИз публичных источниковиз метаданных каталога
    philfung.github.io/adhs ↗
  • Реестр пакетов языкаnodejsИз публичных источниковиз манифеста пакета — публикация в реестре не проверена
    npm install -g pwa-add-to-homescreen

    Не проверено: перед установкой убедитесь, что пакет в реестре принадлежит этому проекту.

    www.npmjs.com/package/pwa-add-to-homescreen ↗
  • Сборка из исходниковИз публичных источниковиз метаданных каталога

    Сборка из исходников: проверенного рецепта сборки нет — следуйте инструкциям репозитория.

    github.com/philfung/add-to-homescreen ↗

Совместимость

«Неизвестно» значит, что доказательств не найдено, а не что продукт несовместим.
ПлатформаСтатусАрхитектураДоказательствоУверенность
Web browserНеизвестно———
Server / self-hostedНеизвестно———
Container (OCI)Неизвестно———
Node.jsСовместимо—манифест пакета: package.json name0.60

Релизы

проверено 30 окт. 2026 г.
v4.3.0Последний9 июл. 2026 г.Официальный источник ↗

Файлы версии 4.3.0

К релизу не приложены файлы.

История релизов

Профиль качества

алгоритм quality-v1.0 · оценено 16 окт. 2026 г.
Оценка качества91
Оценка риска0
Уверенность 1.00
Оценка качества и оценка риска — разные показатели. Высокое качество не гарантирует безопасность.

Составляющие оценки

Поддержка · 2020
last activity 25 days ago
Документация · 1515
README 9928 chars, description present
Готовность к использованию · 1515
install instructions: yes; releases: yes
Метаданные · 1010
4/4 of description, homepage, license, topics
Релизы · 1010
10 release(s), latest 98 days ago
Точность категории · 105
classifier confidence 0.5
Популярность · 106
349 stars (log-dampened, 10k = max)
Ясность лицензии · 55
SPDX MIT
Сообщество · 55
issues enabled, 73 forks

Лицензия

MIT
Лицензия известнапо данным хостинга репозитория

Это статус политики каталога, а не юридическое заключение.

Источники

github.com/philfung/add-to-homescreenОсновной★ 349 звёздактивность 20 сент. 2026 г.Основной репозиторий · Уверенность 1.00

Отзывы

Войдите, чтобы написать отзыв

Отзывов пока нет.

Альтернативы

gemini-cli-desktopПохожий
Веб- и настольный интерфейс для Gemini CLI и Qwen Code. Управляйте проектами, переключайтесь между инструментами, ищите по прошлым диалогам и управляйте MCP-серверами — всё из одного многоязычного интерфейса, локально или удалённо.MIT · Веб-приложения
immichПохожий
Immich — высокопроизводительное self-hosted приложение для управления фото и видео, которое позволяет хранить медиатеку на собственном сервере.AGPL-3.0 · Веб-приложения
NeoShellПохожий
Управляй своим ПК с телефона через Wi-Fi.GPL-3.0 · Веб-приложения
mifos-mobileПохожий
Репозиторий мобильного банковского приложения Mifos для клиентов. Ветка по умолчанию для PR — Dev. Ветка Main предназначена для релизного кода и подчиняется процессу релиза.MPL-2.0 · Веб-приложения
excalidrawПохожий
Excalidraw — открытая виртуальная доска для диаграмм и набросков в рукописном стиле, с совместной работой в реальном времени и сквозным шифрованием.MIT · Веб-приложения
jellyfinПохожий
Jellyfin — бесплатный медиасервер с открытым исходным кодом для самостоятельного размещения, который стримит фильмы, сериалы и музыку на устройства через разные приложения.GPL-2.0 · Веб-приложения

README

Из philfung/add-to-homescreen · лицензия MIT · загружено 30 окт. 2026 г.

Add-to-Homescreen 📱💻

[Live Demo] [License: MIT] [Contributions] [Contributors] [Last Commit]

Easily add a website to your IOS/Android/Desktop homescreen (demo, npm package).

Motivation

Add to home screen allows websites and PWA's to work like native apps without registering in the Apple or Google App Stores. Currently, it is very difficult to get users to add web apps to their home screen, limiting the utility of such websites compared to native apps. See related Medium blog post.

This Library

This drop-in JS Library for websites effectively guides a user to add the website to their home screen on IOS, Android and Desktop. Instructions and UI in this library have been "battle-tested" and have yielded an ~85% home screen install rate on IOS and Android across all ages in past implementations.

Here is a demo (please open on your phone) of library use within a hypothetical app "Aardvark"

Language Support

Translated to 20+ languages.

Browser Support

All major browsers with > 10% market share on IOS/Android/Desktop are supported. Here are the guides shown for each platform/browser:

IOS iPhone - Safari browser (IOS 27)
IOS iPhone - Safari browser (IOS 26)
IOS iPhone - Safari browser (IOS < 26)
IOS iPhone - Chrome browser
IOS IPad - Safari browser (IOS 26/27)
IOS iPad - Safari browser (IOS < 26)
Android - Chrome browser
Android - Edge browser
Desktop Windows & Mac - Chrome & Edge browsers
Desktop Mac - Safari browser
In-App Mobile Browsers

In-App browsers on popular social apps are supported. Users are guided to open the link in the system browser, then the standard add-to-homescreen flow appears.

Apps Supported:

  • Instagram (IOS, Android)
  • Facebook (IOS, Android)
  • X / Twitter (IOS, Android - opens in system browser)

Installation

Prerequisite: Make your website a proper PWA (Progressive Web App)

Make sure your website meets the minimum requirements for installing a web app on homescreen for IOS and Android and Desktop.

  1. At https://your-website.com/apple-touch-icon.png, include a square icon of your app that is (1) at least 40 x 40 pixels and (2) specifically named apple-touch-icon.png(example).

  2. At https://your-website.com/manifest.json, include a web manifest file manifest.json (example). Reference the manifest in your index HTML file.

    index.html

    <head>
  ...
  <link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
  ..
</head>

Usage

This should be a quick drop-in library into your website.

1. Install the package via npm:

npm install pwa-add-to-homescreen

2. Include the library JavaScript and CSS files in your header from the local node_modules directory:

index.html

<head>
  ...
  <link
    rel="stylesheet"
    href="node_modules/pwa-add-to-homescreen/dist/add-to-homescreen.min.css"
  />
  <script src="node_modules/pwa-add-to-homescreen/dist/add-to-homescreen.min.js"></script>
  ...
</head>
Aside: Package Optimization

The code above will include a JavaScript file containing all the available translations for the locales this library supports. It is highly optimized to be small and quick to deliver over mobile networks. If however you want to be even more highly optimized, the library also has JavaScript files built with just a single locale of translations, which is about 60% smaller.

For example, the Spanish file add-to-homescreen_es.min.js can be included as below. If you have a dynamic server environment and know the user's preferred locale, this can be a good option. To see all the supported locales, look in the dist folder.

<head>
   <!-- This is the Spanish locale-only version of the library.  -->
  ...
  <link
    rel="stylesheet"
    href="node_modules/pwa-add-to-homescreen/dist/add-to-homescreen.min.css"
  />
  <script src="node_modules/pwa-add-to-homescreen/dist/add-to-homescreen_es.min.js"></script>
  ...
</head>

3. Call the library onload.

index.html

<script>
document.addEventListener('DOMContentLoaded', function () {
 window.AddToHomeScreenInstance = window.AddToHomeScreen({
  appName: 'Aardvark',                                   // Name of the app.
                                                         // Required.
  appNameDisplay: 'standalone',                          // If set to 'standalone' (the default), the app name will be diplayed
                                                         // on it's own, beneath the "Install App" header. If set to 'inline', the
                                                         // app name will be displayed on a single line like "Install MyApp"
                                                         // Optional. Default 'standalone'
  appIconUrl: 'apple-touch-icon.png',                    // App icon link (square, at least 40 x 40 pixels).
                                                         // Required.
  assetUrl: 'node_modules/pwa-add-to-homescreen/dist/assets/img/',  // Link to directory of library image assets.

  maxModalDisplayCount: -1,                              // If set, the modal will only show this many times.
                                                         // [Optional] Default: -1 (no limit).  (Debugging: Use this.clearModalDisplayCount() to reset the count)
  displayOptions:{ showMobile: true, showDesktop: true }, // show on mobile/desktop [Optional] Default: show everywhere
  allowClose: true, // allow the user to close the modal by tapping outside of it [Optional. Default: true]
  showArrow: true, // show the bouncing arrow on the modal [Optional. Default: true] (highly recommend leaving at true as drastically affects install rates)
});

 ret = window.AddToHomeScreenInstance.show('en');        // show "add-to-homescreen" instructions to user, or do nothing if already added to homescreen
                                                         // [optional] language.  If left blank, then language is auto-decided from (1) URL param locale='..' (e.g. /?locale=es) (2) Browser language settings
});
</script>
</body>

Here's an example implementation.

3-alternate. Special Case: calling the UI later

if you're calling the UI NOT onload, but sometime after (for example, in an onclick() handler for an "Install App" button), then you should still create your the instance onload, but call your UI later on the instance variable with .show()):

index.html

<script>
document.addEventListener('DOMContentLoaded', function () {

   window.AddToHomeScreenInstance = window.AddToHomeScreen({...
}));

document.getElementById('my_install_app_button').addEventListener('click', function () {
   window.AddToHomeScreenInstance.show('en');
});
</script>
</body>

This is because some handlers must be created onload.

Dependencies

No dependencies. This is written in raw ES6 javascript and all css is namespaced to minimize codebase conflict and bloat.

Contributors

  • Thanks to Shane O'Sullivan for a a massive refactor to improve performance and i18n.

License

[License: MIT]

Открыть репозиторий ↗