39

Wow ? Useful JavaScript solution for add progressive web application (PWA) to Ho...

 5 years ago
source link: https://www.tuicool.com/articles/hit/QvAfQne
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

:calling: a2hs.js

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

eQVb6zU.jpg!web

A useful modern JavaScript solution for adding (install) a progressive web application (PWA) to the Home screen of your iOS mobile device. Designed for the latest 4 major versions of iOS Safari 9.x-12.2+.

Install

$ npm install --save a2hs.js

Usage

// Import a2hs.js
import AddToHomeScreen from "a2hs.js";

// Init a2hs.js
new AddToHomeScreen({
    brandName: "Demo",
    fontFamily: "Tahoma, sans-serif",
    backgroundColor: "red",
    color: "white"
});

Config

UzmYbuZ.jpg!web

~ 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

2eaeYnJ.gif

JZbMryn.png!web

The content container, by default, attached to bottom of iOS device screen. Used property position: fixed . The container will not be displayed if user: 

localStorage

> Go to private mode in iOS Safari and open True web artisans website.

License

MIT


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK