KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

a2hs.js

★ 185 Open GitHub ↗

📲 A useful modern JavaScript solution that helps your website users to add (install) a progressive web application (PWA) to the Home Screen of their mobile iOS devices.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">📲 a2hs.js</h1>
<h4 align="center"><i>Add progressive web application (PWA) to Home Screen on iOS</i></h4>

<p align="center">
    A useful modern JavaScript solution that helps your website users to add (install) a <b>progressive web application</b> (PWA) to the <b>Home Screen</b> of their mobile <b>iOS</b> devices. Designed for the <b>latest 4 major versions</b> of iOS Safari.
</p>

## The Why?

As you probably know, iOS Safari doesn't have a built-in pop-up window with a suggestion to install a progressive web app on an iPhone/iPad (like Google Chrome). The `a2hs.js` project easily solves this problem!

Also, it's **lightweight**, **production-ready**, **zero-configuration**, has **no dependencies** and **perfectly works** with all of popular JavaScript frontend frameworks.

## Install

```console
npm install --save a2hs.js
```

## Usage

```js
/**
 * Import a2hs.js
 */
import AddToHomeScreen from "a2hs.js";

/**
 * Simple (with default config) init
 */
AddToHomeScreen();

/**
 * Advanced (with your config) init
 */
AddToHomeScreen({
  brandName: "Demo",
  fontFamily: "Tahoma, sans-serif",
  backgroundColor: "red",
  color: "white",
  // ... see full list of config options below
});
```

## Config

|~|Description|Default|
|---|---|---|
|`backgroundColor`|Background color for container|`#f9f9f9`|
|`padding`|Padding for container|`10px`|
|`shadowColor`|Shadow color for top of container|`#e9e9e9`|
|`shadowSize`|Shadow size for top of container|`10px`|
|`fontFamily`|Font family for content in container|`-apple-system, sans-serif`|
|`color`|Font color for content in container|`#5d5d5d`|
|`fontSize`|Font size for content in container|`0.9rem`|
|`brandName`|Brand for default `htmlContent`|`""`|
|`logoImage`|Logo for container|[`inline SVG`](https://github.com/koddr/a2hs.js/blob/master/img/pwa_logo.svg)|
|`htmlContent`|Content for container with HTML|`Install <strong>{{brandName}} web app</strong> on your iOS device: tap share and <strong>Add to Home Screen</strong> ↓`|

## Demo

<table border="0">
 <tr border="0">
   <td width="300px" border="0">
     <img width="100%" src="https://user-images.githubusercontent.com/11155743/57539303-e2bc1400-7352-11e9-951c-07bb63b4cb61.gif" alt="demo"/>
   </td>
   <td border="0">
     <p>
       <img src="https://user-images.githubusercontent.com/3104648/28352004-a055292c-6c4b-11e7-9c6b-a94cdc2a5458.png" alt="PWA logo"/>
     </p>
     <p>The content container, by default, <strong>attached to bottom</strong> of iOS device screen (used CSS property <code>position: fixed</code>). The container will not be displayed:</p>
     <ul>
       <li>If user opened website, as a progressive web app (PWA);</li>
       <li>If user clicked once on content container (used <code>localStorage</code> for save state);</li>
     </ul>
   </td>
 </tr>
</table>

### Demo on `localhost`

```console
git clone https://github.com/koddr/a2hs.js.git
cd a2hs.js

npm install
npm start

Server running at http://localhost:1234 
  ✨  Built in 18ms.
```

**🖥 Desktop Google Chrome:**

1. Then, go to `Developer Tools` on opened page `http://localhost:1234`;
2. Switch to `Device toolbar` and choose `iPhone` in `Emulated Devices` select;
3. **↺ Refresh page**;

## Animation

```css
/**
 * Add slide animation when loading a2hs.js container:
 * slideUp, slideDown, slideLeft, slideRight
 *
 * Params: 
 *  animation speed (example: 0.7s)
 */

.a2hs__container {
  animation: slideUp 0.7s ease;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(240px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-240px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(240px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-240px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
```
## Size limit report

```console
npm run size

✨ Built in 234ms.

dist/index.js.map    5.68 KB     5ms
  dist/index.js        3.72 KB    13ms

Time limit:   50 ms
  Package size: 1.29 KB with all dependencies, minified and gzipped
  Loading time: 26 ms   on slow 3G
  Running time: 21 ms   on Snapdragon 410
  Total time:   47 ms
```
_Thanks to Andrey Sitnik [@ai/size-limit](https://github.com/ai/size-limit)._

## Developers

- Idea and active development by [Vic Shóstak](https://github.com/koddr) (aka Koddr).

## Project assistance

If you want to say «thank you» or/and support active development `a2hs.js`:

1. Add a GitHub Star to project.
2. Twit about project [on your Twitter](https://twitter.com/intent/tweet?text=Wow%20%F0%9F%91%8D%20Useful%20%23js%20solution%20for%20add%20progressive%20web%20application%20%23PWA%20to%20Home%20Screen%20on%20%23iOS:%20&url=https%3A%2F%2Fgithub.com%2Fkoddr%2Fa2hs.js).
3. Donate some money to project author via PayPal: [@paypal.me/koddr](https://paypal.me/koddr?locale.x=en_EN).
4. Join DigitalOcean at our [referral link](https://m.do.co/c/b41859fa9b6e) (your profit is **$100** and we get $25).

Thanks for your support! 😘 Together, we make this project better every day.

[![DigitalOcean Referral Badge](https://web-platforms.sfo2.digitaloceanspaces.com/WWW/Badge%202.svg)](https://www.digitalocean.com/?refcode=b41859fa9b6e&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)

## License

MIT

a2hs.js

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README