Hybird推送通知然後跳轉app
最近公司有個專案,前端使用的是react+node.js,需要增加一個推送功能,我選用了goeast作為本次推送後臺,原來的友盟我嘗試過,只能推送原生,混合不支援。後臺推送前端,前端能接收到訊息,這功能已經完成。前端我採用的是H5plus,開發工具hbuilder,H5+的優勢是支援了原生40萬+的api(官方號稱),寫法和原生基本差不多,只要你原生寫出來沒問題,代入js模式即可。然後我傻傻的寫了套原生android,測試OK沒問題,再代入前端,把物件改成var,把匯入的類改成plus.android.importClass.實現了安卓的推送,彈出通知,點選跳轉到指定app,沒有app跳轉到指定網頁。
下圖是我要實現的功能。
下圖是原生的程式碼
以下是js開啟推送的彈出通知跳轉的程式碼
<script type="text/javascript">
var mainActivity = null,
name = null,
Context = null,
Notification = null,
NotificationManager = null,
PendingIntent = null,
Intent = null,
PackageManager = null,
Uri = null,
appkeyGoEasy = null;
document.addEventListener("plusready", function() {
//判斷是ios還是安卓
judgePlatform(); //安卓呼叫安卓的方法,ios呼叫ios的方法
}, false);
var goEasy = new GoEasy({
appkey: `XXXXXXXXXXXXXX`
});
goEasy.subscribe({
channel: `XXXXXXXXXXXX`,
onMessage: function(message) {
alert(appkeyGoEasy);
alert(message.content);
//根據當前手機是安卓還是ios做判斷
if(name == "Android") {
njsNotifactionForAndroid(message);
} else if(name == "iOS") {
createLocalMessageForIOS(message.content, message.content, 17301620);
}
}
});
//mainActivity就相當於this,Context是上下文
function njsNotifactionForAndroid(message) {
var builder = new Notification.Builder(mainActivity);
var manager = mainActivity.getSystemService(Context.NOTIFICATION_SERVICE);
builder.setSmallIcon(17301620);
builder.setContentText(message.content);
builder.setContentTitle(message.content);
builder.setAutoCancel(true); // 點選跳轉後自動銷燬
builder.setDefaults(Notification.DEFAULT_VIBRATE); //向通知新增聲音、閃燈和振動效果的最簡單、最一致的方式是使用當前的使用者預設設定,使用defaults屬性,可以組合:
var pManager = mainActivity.getPackageManager();
var intent = plus.android.invoke(pManager, "getLaunchIntentForPackage", "io.dcloud.H53302ED8");
//intent如果為null就說明沒有安裝。這個時候給使用者跳轉到一個webview進行下載
if(null == intent) {
// 當前Webview物件的例項
var uri = Uri.parse("http://www.baidu.com/");
intent = new Intent(Intent.ACTION_VIEW, uri);
//var wv = plus.android.currentWebview();
// 跳轉頁面,實際應該是下載地址,放在這裡即可
//plus.android.invoke(wv, "loadUrl", "http://www.baidu.com/");
var pendingIntent = PendingIntent.getActivity(mainActivity, 0X0002, intent, PendingIntent.FLAG_UPDATE_CURRENT);
builder.setContentIntent(pendingIntent); //點選開啟
manager.notify(0X0001, builder.getNotification());
} else {
var pendingIntent = PendingIntent.getActivity(mainActivity, 0X0002, intent, PendingIntent.FLAG_UPDATE_CURRENT);
builder.setContentIntent(pendingIntent); //點選開啟
manager.notify(0X0001, builder.getNotification());
}
}
//判斷是IOS還是安卓
function judgePlatform() {
switch(plus.os.name) {
case "Android":
// Android平臺: plus.android.* 程式全域性環境物件,內部自動匯入Activity類
alert("安卓==>" + plus.os.name);
initAndroid(); //對安卓的類進行初始化
break;
case "iOS":
name = "iOS";
// iOS平臺: plus.ios.*
alert("蘋果==>" + plus.os.name);
break;
default:
// 其它平臺
break;
}
}
function initAndroid() {
name = "Android";
mainActivity = plus.android.runtimeMainActivity();
Context = plus.android.importClass("android.content.Context");
Notification = plus.android.importClass("android.app.Notification");
NotificationManager = plus.android.importClass("android.app.NotificationManager");
PendingIntent = plus.android.importClass("android.app.PendingIntent");
Intent = plus.android.importClass("android.content.Intent");
PackageManager = plus.android.importClass("android.content.pm.PackageManager");
Uri = plus.android.importClass("android.net.Uri");
}
/**
* IOS原生方法
* @param {Object} contentTitle
* @param {Object} contentText
* @param {Object} smallIcon
*/
function createLocalMessageForIOS(contentTitle, contentText, smallIcon) {
console.log(`ios begin.`);
var UILocalNotification = plus.ios.importClass("UILocalNotification");
// 建立UILocalNotification類的例項物件
var localNotification = new UILocalNotification();
//設定呼叫時間
var NSDate = plus.ios.importClass(`NSDate`);
var myNSDate = new NSDate();
myNSDate.dateWithTimeIntervalSinceNow = 1; //1秒後觸發
localNotification.fireDate = myNSDate;
localNotification.alertBody = contentText;
localNotification.applicationIconBadgeNumber = 3;
localNotification.alertAction = `開啟應用!`;
localNotification.alertLaunchImage = `Default`;
localNotification.soundName = UILocalNotification.DefaultSoundName;
var UIApplication = plus.ios.importClass("UIApplication");
var myUIApplication = new UIApplication();
myUIApplication.scheduleLocalNotification = localNotification;
//銷燬物件例項
plus.ios.deleteObject(localNotification);
plus.ios.deleteObject(myUIApplication);
plus.ios.deleteObject(myNSDate);
console.log(`ios end.`);
}
</script>
</head>
<body>
<a href="index.html">重新整理</a>
</body>
上述程式碼安卓實現了推送,通知等功能,使用之後給我的感覺H5+確實強大,而且打包之後效能不輸原生,但是開發當中也發現H5+有很多改進的地方,官方引入了安卓四大元件之一activity,可是broadCastReceiver,service,ContentProvide呢?舉個簡單例子,安卓中訊息推送,即使關閉app,還是有辦法開啟service,註冊靜態廣播,寫一個fork的c函式,讓他在後臺執行不被殺死。可是H5+要實現貌似還不行,或者是我還沒看到,但是html5+的跨平臺確實對於原生有極大的衝擊力。
丟擲問題:1.以上的IOS這串程式碼我測試下來通知出不來,根據官方api寫的,問題不知道在哪裡,請各位幫忙看看,找下問題,想了好久了,沒找出原因。
2.這個channel值如何獲取,如何設定呢。因為需要個推,這個也是我在想的問題,希望知情小夥伴一起看看。
以下的連線是為了實現這功能所看的相關資料,雖然IOS還沒搞出來,但是感覺學到了很多新東西,對於H5+大開眼界,以下學習資料和大家一起分享。
H5+官方api
東翌程式設計
HTML5+ API 模組整理
HTML5+ App開發Native.js入門指南
Native.js,讓js像原生一樣強大+++江樹源(數字天堂CTO)
HTML5+安卓api
HTML5+培訓資源視訊教程彙總
Hybird安卓的除錯方式
Hybird蘋果的除錯方式
IOS推送
關注我的公眾號,都是滿滿的乾貨!
相關文章
- React Native 跳轉到 APP 推送頁面並獲取推送狀態React NativeAPP
- HyBird App(混合應用)核心原理JSBridgeAPPJS
- iOS 推送通知及推送擴充套件iOS套件
- Webview之常用App跳轉URL Schemes整理WebViewAPPScheme
- Android 外部URL跳轉到APP的操作AndroidAPP
- STM32 IAP - Boot跳轉到APPbootAPP
- C# 介面跳轉-登陸之後跳轉至主視窗C#
- 記錄小程式跳轉h5,然後h5涉及下載檔案的問題H5
- iOS 點選推送訊息跳轉指定介面 —總結篇iOS
- vscode 跳轉到函式之後怎麼跳轉回之前的位置VSCode函式
- h5 喚起app或跳轉appStoreH5APP
- 直播app原始碼,跳轉站外連結或平臺內部跳轉頁面APP原始碼
- 微信跳轉支付寶app、跳轉淘寶app新方案(領紅包、領淘寶優惠券示例)APP
- iOS12中推送通知新特性iOS
- React Native推送通知:完整的操作指南React Native
- Android 跳轉過後關閉本介面Android
- shiro攔截後地址跳轉跨域跨域
- uni-APP 新增頁面實現路由跳轉APP路由
- 推送服務本地通知頻次及分類管控通知
- 《Web 推送通知》系列翻譯 | 第七篇:推送事件 && 第八篇:顯示一個通知Web事件
- 打怪、升級、然後重新來過:陷入無限loop的位元組跳動OOP
- 《Web 推送通知》系列翻譯 | 引言&概覽Web
- FioriLaunchpadTile點選後跳轉的除錯技巧除錯
- Hybird介面的理解
- PDF 轉換圖片然後識別圖片內容
- 轉跳
- 試試哈然後
- 微信跳轉外部瀏覽器下載app詳解瀏覽器APP
- app直播原始碼,RecycleView頁面的點選跳轉設計APP原始碼View
- 教你如何在快應用中跳轉到Android的appAndroidAPP
- 用 Swift 實現通知推送的新手指南Swift
- [譯] 由 Node.js 傳送 Web 推送通知Node.jsWeb
- 做re不小心噶瞭然後轉生成為pwn高手
- iOS 12 通知新特性 —— 自定義 App 通知的外觀iOSAPP
- 《Web 推送通知》系列翻譯 | 第九篇:通知行為 && 第十篇:常用的通知模式Web模式
- APP訊息推送 極光推送 示例程式碼APP
- JS 跳轉JS
- Fiori Launchpad Tile點選後跳轉的除錯技巧除錯
- WebSecurityConfigurerAdapter 關於成功之後頁面跳轉的配置WebAPT