Hybird推送通知然後跳轉app

zhuyuansj發表於2017-11-14

最近公司有個專案,前端使用的是react+node.js,需要增加一個推送功能,我選用了goeast作為本次推送後臺,原來的友盟我嘗試過,只能推送原生,混合不支援。後臺推送前端,前端能接收到訊息,這功能已經完成。前端我採用的是H5plus,開發工具hbuilder,H5+的優勢是支援了原生40萬+的api(官方號稱),寫法和原生基本差不多,只要你原生寫出來沒問題,代入js模式即可。然後我傻傻的寫了套原生android,測試OK沒問題,再代入前端,把物件改成var,把匯入的類改成plus.android.importClass.實現了安卓的推送,彈出通知,點選跳轉到指定app,沒有app跳轉到指定網頁。
下圖是我要實現的功能。

DF2A9CF42BB21C4F5B94BE2E1E0AE0F8.jpg

下圖是原生的程式碼

image.png

以下是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寫的,問題不知道在哪裡,請各位幫忙看看,找下問題,想了好久了,沒找出原因。

image.png

2.這個channel值如何獲取,如何設定呢。因為需要個推,這個也是我在想的問題,希望知情小夥伴一起看看。

image.png

以下的連線是為了實現這功能所看的相關資料,雖然IOS還沒搞出來,但是感覺學到了很多新東西,對於H5+大開眼界,以下學習資料和大家一起分享。

H5+官方api
東翌程式設計
HTML5+ API 模組整理
HTML5+ App開發Native.js入門指南
Native.js,讓js像原生一樣強大+++江樹源(數字天堂CTO)
HTML5+安卓api
HTML5+培訓資源視訊教程彙總
Hybird安卓的除錯方式
Hybird蘋果的除錯方式
IOS推送
關注我的公眾號,都是滿滿的乾貨!

孫堅.gif


相關文章