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.
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.
npm install --save a2hs.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 });
| ~ | 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> β |
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:
- Then, go to
Developer Toolson opened pagehttp://localhost:1234; - Switch to
Device toolbarand chooseiPhoneinEmulated Devicesselect; - βΊ Refresh page;
/** * 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); } }
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.
- Idea and active development by Vic ShΓ³stak (aka Koddr).
If you want to say Β«thank youΒ» or/and support active development a2hs.js:
- Add a GitHub Star to project.
- Twit about project on your Twitter.
- Donate some money to project author via PayPal: @paypal.me/koddr.
- 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.
MIT