📲 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 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 */; /** * Simple (with default config) init */; /** * Advanced (with your config) init */;
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 <strong>{{brandName}} web app</strong> on your iOS device: tap share and <strong>Add to Home Screen</strong> ↓ |
Demo
The content container, by default, attached to bottom of iOS device screen (used CSS property
|
localhost
Demo on foo@bar:~$ git clone https://github.com/koddr/a2hs.js.git && cd a2hs.jsfoo@bar:a2hs.js$ npm installfoo@bar:a2hs.js$ npm start Server running at http://localhost:1234 ✨ Built in 18ms.
🖥 Desktop Google Chrome:
- Then, go to
Developer Tools
on opened pagehttp://localhost:1234
; - Switch to
Device toolbar
and chooseiPhone
inEmulated Devices
select; - ↺ 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) */ @ 100% } @ 100% } @ 100% } @ 100% }
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
- 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
:
- Add a GitHub Star to project.
- Twit about project on your Twitter.
- Help project with some money, become a Patron:
License
MIT