📲 a2hs.js

Add progressive web application (PWA) to Home Screen on iOS

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. Designed for the latest 4 major versions of iOS Safari.

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|
|htmlContent|Content for container with HTML|Install {{brandName}} web app on your iOS device: tap share and Add to Home Screen ↓|

Demo

The content container, by default, attached to bottom of iOS device screen (used CSS property position: fixed). The container will not be displayed: If user opened website, as a progressive web app (PWA); If user clicked once on content container (used localStorage for save state);

$3

`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;

$3

Go to private mode on your iOS Safari and open True web artisans website.

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._

Developers

- Idea and active development by Vic Shóstak (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.
3. Donate some money to project author via PayPal: @paypal.me/koddr.
4. Join DigitalOcean at our referral link (your profit is $100 and we get $25).

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


License

MIT