index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>WebPushDemo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="image/WP.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <script>
	var agConnectConfig = 
	{
		"agcgw":{
			"backurl":"connect-drru.dbankcloud.cn",
			"url":"connect-drru.hispace.hicloud.com",
			"websocketbackurl":"connect-ws-drru.hispace.dbankcloud.cn",
			"websocketurl":"connect-ws-drru.hispace.dbankcloud.com"
		},
		"agcgw_all":{
			"CN":"connect-drcn.hispace.hicloud.com",
			"CN_back":"connect-drcn.dbankcloud.cn",
			"DE":"connect-dre.hispace.hicloud.com",
			"DE_back":"connect-dre.dbankcloud.cn",
			"RU":"connect-drru.hispace.hicloud.com",
			"RU_back":"connect-drru.dbankcloud.cn",
			"SG":"connect-dra.hispace.hicloud.com",
			"SG_back":"connect-dra.dbankcloud.cn"
		},
		"client":{
			"cp_id":"1340007000015026539",
			"product_id":"736430079244885653",
			"client_id":"605048632223216000",
			"client_secret":"6D26AD46CE8220DDA8FE26F2DD3E8FFE2DCF14888916DC0D9FB4929273E7E3B8",
			"project_id":"736430079244885653",
			"app_id":"322385623854869008",
			"api_key":"CgB6e3x9Ns8uyhEUbgLB3tfru4wPtDzUUx9yGgP9p8S0w0GkoA5nLe8qRVp0KMO+Yu/GKFz1Lhmsr5WZF6NCKvsk"
		},
		"service":{
			"analytics":{
				"collector_url":"datacollector-drru.dt.hicloud.com,datacollector-drru.dt.dbankcloud.cn",
				"resource_id":"p1",
				"channel_id":""
			},
			"search":{
				"url":"https://search-drru.cloud.huawei.com"
			},
			"cloudstorage":{
				"storage_url":"https://ops-drru.agcstorage.link"
			},
			"ml":{
				"mlservice_url":"ml-api-drru.ai.dbankcloud.com,ml-api-drru.ai.dbankcloud.cn"
			}
		},
		"region":"RU",
		"configuration_version":"2.0"
	};
    </script>
        <div class="back-botron text-center" style="margin-bottom:0">
            <h1>Web Notifications Test</h1>
            <p>This is a page to help you to test your browser's sopport for HTML5 Web Notifications. </p>
        </div>
    
        <nav class="navbar navbar-background">
            <span class="navbar-brand-color">WEB PUSH</span>
            <span class="navbar-brand-color">获取设备Token</span>
        </nav>
        
        <div class="container" style="margin-top:30px">
            <h2>输入token申请参数</h2>
            <div class="form">
                <div class="form-inline for_margin">
                        <label for="msgtytle">*&nbsp;&nbsp;ApiKey：</label>
                        <input type="text" class="form-control" style="margin-left:50px; width:500px;" id="inputApiKey">
                </div>
                <div class="form-inline for_margin">
                    <label for="msgtytle">*&nbsp;&nbsp;ProjectId：</label>
                    <input type="text" class="form-control" style="margin-left:38px; width:500px;" id="inputProjectId">
                </div>
                <div class="form-inline for_margin">
                    <label for="msgtytle">*&nbsp;&nbsp;AppId：</label>
                    <input type="text" class="form-control" style="margin-left:58px; width:500px;" id="inputAppId">
                </div>
                <div class="form-inline for_margin">
                    <label for="msgcontent">*&nbsp;&nbsp;CountryCode：</label>
                    <input class="form-control" style="margin-left:8px; width:500px;" id="inputCountryCode">
                </div>
                <div class="form-inline for_margin">
                    <label for="msgcontent">*&nbsp;&nbsp;PublicKey：</label>
                    <textarea class="form-control" style="margin-left:30px; width:500px;" rows="3" id="inputPublicKey"></textarea>
                </div>
            </div>
        </div>
        <div class="container" style="margin-top:30px" >
            <button type="button" class="btn btn-color" onclick="init()">参数初始化</button>
            <button type="button" class="btn btn-color" onclick="onBtnGetToken()">Get Token</button>
            <button type="button" class="btn btn-color" onclick="onBtnDeleteToken()">Delete Token</button>
            <button type="button" class="btn btn-color" onclick="clearParam()">重置</button>
            <p id="token" style="margin-top:30px">Message here</p>
        </div>
        <div class="back-botron text-center" style="margin-bottom: 0px;margin-top: 30px;padding-top: 40px;padding-bottom: 40px;">
            <p>At the time writing,they are supported by the latest versions of Firefox(v22).Chrome(v27) and Safari(v6.05). </p>
        </div>
    <script src="https://push-static.dbankcdn.com/hms-messaging.js"></script>
    <script>
    	document.addEventListener('DOMContentLoaded', function(event) { 
		document.getElementById('inputApiKey').value = 'qiUeKB1sTlQej9Vxb_wxxDicjZytH3hgrBUpC7BK';
		document.getElementById('inputProjectId').value = '736430079244885653';
		document.getElementById('inputAppId').value = '322385623854869008';
		document.getElementById('inputCountryCode').value = 'RU';
		document.getElementById('inputPublicKey').value = 'BO-8MO6jen3y7wkCL1RuAShYVQpJ5CidHnkMMsjN0RqLn6TwWJY5_e3ZChUkHwerF70cHOWKdy3DFxARePfoUb0';
	});

        var messaging;

        function init() {
            if(!document.getElementById("inputApiKey").value) {
				alert('请输入apiKey.');
            }
            if(!document.getElementById("inputProjectId").value) {
				alert('请输入ProjectId.');
            }
            if(!document.getElementById("inputAppId").value) {
				alert('请输入AppId.');
            }
            if(!document.getElementById("inputCountryCode").value) {
				alert('请输入CountryCode.');
            }
            if(!document.getElementById("inputPublicKey").value) {
				alert('请输入PublicKey.');
            }
            var hmsConfig = {
                apiKey: document.getElementById("inputApiKey").value,
                projectId: document.getElementById("inputProjectId").value,
                appId: document.getElementById("inputAppId").value,
                countryCode: document.getElementById("inputCountryCode").value
            };
            hms.initializeApp(hmsConfig);
            messaging = hms.messaging();
            messaging.usePublicVapidKey(document.getElementById("inputPublicKey").value);
            messaging.onMessage((payload) => {
                console.log('Message received. ', payload);
                alert('Message received. ', payload);
                // ...
            });
            navigator.serviceWorker.register("hms-messaging-sw.js", {
            scope: "./hms-cloud-messaging-push-scope"
            }).then((registration) => {
                alert('registration')
                messaging.useServiceWorker(registration);
            })
        }

        function onBtnGetToken() {
            Notification.requestPermission().then((permission) => {
                if (permission === 'granted') {
                    console.log('Notification permission granted.');
					alert('Notification permission granted.');
                    getToken();
                } else {
                    console.log('Unable to get permission to notify.');
					alert('Unable to get permission to notify.');
                }
            }).catch((err) => {
                console.log('An error occurred while onBtnGetToken . ', err);
				alert('An error occurred while onBtnGetToken . ', err);
            });
			
        }

        function onBtnDeleteToken() {
            messaging.getToken().then((currentToken) => {
			    console.log('Current token: ', currentToken);
                document.getElementById("token").innerText = currentToken;
                return messaging.deleteToken(currentToken);
            }).then((success) => {
                console.log('Delete token result: ', success);
                document.getElementById("token").innerText = '';
            });
        }

        function getToken() {
            messaging.getToken().then((currentToken) => {
                if (currentToken) {
                    console.log('Current token: ', currentToken);
                    document.getElementById("token").innerText = currentToken;
                    alert('getToken Success.');
                } else {
                    console.log('No Instance ID token available. Request permission to generate one.');
					alert('No Instance ID token available. Request permission to generate one.');
                }
            }).catch((err) => {
                console.log('An error occurred while retrieving token. ', err);
				alert('An error occurred while retrieving token. err is '+ err);
            });
        }

        function clearParam() {
            document.getElementById("inputApiKey").value = '';
            document.getElementById("inputProjectId").value = '';
            document.getElementById("inputAppId").value = '';
            document.getElementById("inputCountryCode").value = '';
            document.getElementById("inputPublicKey").value = '';
            alert('clear Success.');
        }
    </script>
    <style>
            .label {
                margin-left:10px;
                width:150px;
            }
            .for_margin {
                margin-top:10px;
            }
            .back-botron {
                padding-top: 20px;
                padding-bottom: 20px;
                color: inherit;
                background-color: #ccc;
            }
            .btn-color {
                color: #fff;
                background-color: #007dff;
            }
            .btn-color:hover{
                color: #fff;
                background-color: #22a1fa;
            }
            .navbar-background {
                background-color: #343f47;
            }
            .navbar-brand-color {
                color: #fff;
                float: left;
                height: 50px;
                padding: 15px 15px;
                font-size: 18px;
                line-height: 20px;
            }
            #gettokendiv {
                display: none;
            }
    </style>
</body>

</html>