Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xwartz/smartbanner
smartbanner like iOS's smart app banners
https://github.com/xwartz/smartbanner
Last synced: 2 months ago
JSON representation
smartbanner like iOS's smart app banners
- Host: GitHub
- URL: https://github.com/xwartz/smartbanner
- Owner: xwartz
- Created: 2014-12-08T07:47:20.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2015-10-25T05:42:54.000Z (about 9 years ago)
- Last Synced: 2024-09-11T04:48:07.004Z (3 months ago)
- Language: JavaScript
- Homepage: http://xwartz.github.io/smartbanner/
- Size: 646 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### smartbanner
===========模拟 `iPhone` 上 `Safari` 浏览网站时显示的 `Smart App Banner`, 在各手机端浏览器打开应用, 使用 `ES6` 编写。
手机浏览器打开demo http://xwartz.github.io/smartbanner/
### Safari
在页面添加如下代码
```html
```
### 其他手机浏览器
```js
import Smartbanner form 'smartbanner'
var banner = {
icon: null, // the url of the app icon
title: null, // the title of the app
author: null, // the author of the app
appStore: null, // the url of app for iOS
marketUrl: null, // the url of app for Android
schemeIOS: null, // the scheme url for iOS
schemeAndroid: null, // the scheme url for Android
intentUrl: null, // the intent url for chrome 25+
button: 'OPEN', // the button text
rank: '★★★★★' // app rank
}
new Smartbanner(banner)
```### Screenshot
![screenshot](screenshot.png)
### 原理概述
`Android` 平台下 `chrome25+` 使用 `intent://` 方式(https://developer.chrome.com/multidevice/android/intents);
其他情况,首先使用 `iframe` 尝试打开 [scheme](http://developer.android.com/guide/topics/manifest/data-element.html) 地址的方式;如果不成功,使用 `location` 地址,跳转到应用市场。`iOS` 下首先使用 `location` 地址尝试打开 `scheme`, 不成功就跳转到应用市场。
### License
MIT