Skip to content
📲 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.
Branch: master
Clone or download
Latest commit 89ab1a5 May 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml May 23, 2019
img Update README.md May 10, 2019
test Add first Jest test May 11, 2019
.editorconfig Initial commit May 8, 2019
.gitignore Add first Jest test May 11, 2019
.prettierignore Add Parcel bundler, switch to ES5 (remove Babel) May 10, 2019
LICENSE.md Initial commit May 8, 2019
README.md Fix index.js May 13, 2019
index.js Fix index.js May 13, 2019
package-lock.json Add first Jest test May 11, 2019
package.json

README.md

📲 a2hs.js

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

iPhone X mockup a2hs.js

npm version bundle size code style: prettier license twit link

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 9.x-12.2+.

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

foo@bar:~$ npm install --save a2hs.js

Usage

/**
 * 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

config example

~ 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 <strong>{{brandName}} web app</strong> on your iOS device: tap share and <strong>Add to Home Screen</strong> ↓

Demo

demo

PWA logo

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

Demo on localhost

foo@bar:~$ git clone https://github.com/koddr/a2hs.js.git && cd a2hs.js
foo@bar:a2hs.js$ npm install
foo@bar:a2hs.js$ 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;

Live demo

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

Animation

/**
 * 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

foo@bar:~$ 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

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. Help project with some money, become a Patron:
Become a Patron!

License

MIT

You can’t perform that action at this time.