Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/koddr/a2hs.js
📲 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.
https://github.com/koddr/a2hs.js
css-animation css3 homescreen ios ipad iphone ipodtouch javascript js progressive-web-app pwa
Last synced: 3 months ago
JSON representation
📲 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.
- Host: GitHub
- URL: https://github.com/koddr/a2hs.js
- Owner: koddr
- License: mit
- Created: 2019-05-08T14:10:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T06:32:38.000Z (4 months ago)
- Last Synced: 2024-07-25T07:46:06.757Z (4 months ago)
- Topics: css-animation, css3, homescreen, ios, ipad, iphone, ipodtouch, javascript, js, progressive-web-app, pwa
- Language: JavaScript
- Homepage: https://github.com/koddr/a2hs.js
- Size: 2.16 MB
- Stars: 170
- Watchers: 6
- Forks: 23
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-pwa - `a2hs.js`
README
📲 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`](https://github.com/koddr/a2hs.js/blob/master/img/pwa_logo.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
localStoragefor save state);
### Demo on `localhost`
```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**;
## 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](https://github.com/ai/size-limit)._
## Developers
- Idea and active development by [Vic Shóstak](https://github.com/koddr) (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](https://twitter.com/intent/tweet?text=Wow%20%F0%9F%91%8D%20Useful%20%23js%20solution%20for%20add%20progressive%20web%20application%20%23PWA%20to%20Home%20Screen%20on%20%23iOS:%20&url=https%3A%2F%2Fgithub.com%2Fkoddr%2Fa2hs.js).
3. Donate some money to project author via PayPal: [@paypal.me/koddr](https://paypal.me/koddr?locale.x=en_EN).
4. Join DigitalOcean at our [referral link](https://m.do.co/c/b41859fa9b6e) (your profit is **$100** and we get $25).
Thanks for your support! 😘 Together, we make this project better every day.
[](https://www.digitalocean.com/?refcode=b41859fa9b6e&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
## License
MIT