달고나치약
347
2020-09-23 12:45:50
0
175

웹앱으로 구현한 FCM 을 안드로이드 웹뷰로 구현


안녕하세요.

현재 구현한 건 fcm 푸시기능을 제외하고 클라이언트에서 토큰을 생성을 한 후에

생성한 토큰값을 외부에서 메세지를 푸시하여 알림을 받게 하는 단순한 기능입니다.

해당 사이트는 도메인과 https 연결을 끝낸 상태입니다.

PC와 모바일에서도 정상 작동하고요

이제 이를 안드로이드 웹뷰로 동일하게 토큰만 발급하게 하는 기능을 하려고 하는데

안드로이드 에러코드는 이 브라우저는 지원하지 않는 api라고 하네요..

그래서 advancedWebview 와 geckoWebview 를 통해 테스트를 했는데 동일한 오류가 발생하네요

몇몇 분들이 웹뷰는 push api를 지원하지 않아 사용이 불가능 하다 하시는데

다른것을 보면 웹뷰로도 구현을 했더라구요

구글에도 해당 문의를 올렸는데 답변은 안주고 개발 커뮤니티에 올려보라는 답변만 오게되고

https://caniuse.com/notifications

https://developer.mozilla.org/en-US/docs/Web/API/Notification

두개 사이트를 보면 안드로이드용 크롬은 지원한다고 해서 안드로이드 기기에서 웹뷰 설정을

크롬으로 교체를 해도 동일하게 되지않습니다.


혹시 이에 따른 해결방법을 알고 계신분이 있으실까요??

감사합니다!

안드로이드 오류 메세지와 스크립트, 안드로이드 코드 첨부하겠습니다.

I/chromium: [INFO:CONSOLE(1)] "Uncaught FirebaseError: Messaging: This browser 
doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser).", 
source: https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js (1)

webapp main.js

<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js"></script>
<script src='https://www.gstatic.com/firebasejs/7.18.0/firebase-messaging.js'></script>
<script>
//FCM User Code
const config = {
    apiKey: "xxxxxxxxxxxx",
    authDomain: "fir-yr.firebaseapp.com",
    databaseURL: "https://fir-yr.firebaseio.com",
    projectId: "fir-yr",
    storageBucket: "fir-yr.appspot.com",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "xxxxxxxxxxx",
    measurementId: "xxxxxxxxx"
};

//firebase setting
firebase.initializeApp(config);
const onMsg = firebase.messaging();

//Get Token
function clickToken(){
    onMsg.requestPermission()
        .then(function(){
            return onMsg.getToken();
        })
        .then(function(token){
            console.log(token);
            $('#token').val(token)
        })
        .catch(function(arr){
            alert(arr)
            console.log("Error Occured");
            console.log('err',arr);
        });
}
<script>


webapp serviceworker

importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-messaging.js');

const config = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxx",
    authDomain: "fir-yr.firebaseapp.com",
    databaseURL: "https://fir-yr.firebaseio.com",
    projectId: "fir-yr",
    storageBucket: "fir-yr.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxxxxxx"
};

//firebase setting
firebase.initializeApp(config);

const messaging = firebase.messaging();


messaging.setBackgroundMessageHandler(function(payload){
    console.log('Background payload :',payload);
    //title contents
    const title = payload.data.title;
    //body contents
    const options = {
        body: payload.data.message,
        icon: payload.data.icon,
        click_action : payload.data.click_action,
        data: {click_action:payload.data.click_action}
    };
    //show message
    return self.registration.showNotification(title,options);
});


//Noti Click Event
self.addEventListener('notificationclick', function(event) {
    event.notification.close();

    console.log('event',event);
    console.log('clients :', clients);

    var promise = new Promise(function(resolve) {
        setTimeout(resolve, 1000);
    }).then(function() {
        return clients.openWindow(event.notification.data.click_action);
    });
 
    console.log('promise',promise);
    event.waitUntil(promise);

});


MainActivity.java

public class MainActivity extends Activity  {
    private WebView myWebView;
    @SuppressLint("WrongViewCast")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myWebView = (WebView) findViewById(R.id.webView);

        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(false);
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setSaveFormData(false);
        webSettings.setSavePassword(false);
        webSettings.setUseWideViewPort(true);
        webSettings.setSupportMultipleWindows(true);
        webSettings.setLoadsImagesAutomatically(true);
        webSettings.setGeolocationEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        myWebView.setWebViewClient(new WebViewClient());

        myWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });

        String url = "https://car369.net/msg_test.ejs";
        myWebView.loadUrl(url);
    }
}


AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webview">
<uses-permission android:name="android.permission.INTERNET"/>

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme"
    android:hardwareAccelerated="true"
    android:usesCleartextTraffic="true"
    >

    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <meta-data android:name="android:webkit.WebView.EnableSafeBrowsing"
        android:value="true"/>
</application>

</manifest>


ActivityMain.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

</androidx.constraintlayout.widget.ConstraintLayout>


답변 감사합니다!!

0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.