尝试从 android 上的网络应用程序推送通知

时间:2021-04-16 18:51:02

标签: javascript android reactjs push-notification notifications

我有一个 Web 应用程序,它每 x 秒发送一次通知(这将在未来更改)。从计算机上它可以完美运行,但是当我从我的 Android 设备访问显示的页面时,它们不会出现。我拥有所有必要的权限。

import Push from 'push.js';

function spawnNotification() {

// Comprobamos si el navegador soporta las notificaciones
if (!("Notification" in window)) {
    alert("Este navegador no soporta las notificaciones del sistema");
}

// Comprobamos si ya nos habían dado permiso
else if (Notification.permission === "granted") {
    notificacion();
}

// Si no, tendremos que pedir permiso al usuario
else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
    // Si el usuario acepta, lanzamos la notificación
    if (permission === "granted") {
        notificacion();
    }
    });
  }
}

function notificacion(){
Push.create("Posible amgio a tu alrededor",{
    body: "Añadir amigo",
    icon: "../img/logoNotificacion.png",
    onClick : function(){ 
        //TODO Añadir funcionalidad añadir amigo
        this.close();
    }
  }).catch(err=>console.log(err));
}

并将组件导入 App.js

import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import CssBaseline from '@material-ui/core/CssBaseline';
import React, { useEffect } from 'react';
import Contaniner from './components/utils/Contenedor';
import { useWebId } from '@solid/react';
import { saveUser } from './api/api';
import push from './components/utils/Notificacion';

function App() {

   const webId = useWebId();

   function saveLocateUser() {
   if (webId) {
       // pedimos la pocalización actual
       navigator.geolocation.getCurrentPosition((pos) => {
    
       //prueba push
       push();
    
       //salvamos al usuario
       saveUser(webId, pos.coords.latitude, pos.coords.longitude).catch(err => console.log(err));
    });
  }
};


useEffect(() => {
   // Guardamos la localización cada 20 segundos
   setInterval(saveLocateUser, 20000);
});


return (
   <div className="App">
      <React.Fragment>
       <CssBaseline />
       <Contaniner />
      </React.Fragment>
 </div>
);
}

export default App;

有没有人知道一种可能的解决方案或另一种发送通知的方式,它可以在两个平台上运行?

0 个答案:

没有答案