Skip to content
/ a2hs.js Public

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

License

Notifications You must be signed in to change notification settings

koddr/a2hs.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

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

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

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

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

DigitalOcean Referral Badge

License

MIT

About

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

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Sponsor this project