Android 如何在react native webview中实现web共享api和推送通知?
我正在尝试使用react native的webview为我的PWA创建一个应用程序外壳。但网络共享API和推送通知在android应用程序中不起作用 我已经使用reactjs创建了一个PWA,并使用了Web共享API和推送通知服务。现在,我在我的react native(版本“0.59.8”)应用程序中使用“react native WebView”(版本“6.9.0”)库中的WebView为我的PWA创建应用程序外壳Android 如何在react native webview中实现web共享api和推送通知?,android,react-native,webview,react-native-android,progressive-web-apps,Android,React Native,Webview,React Native Android,Progressive Web Apps,我正在尝试使用react native的webview为我的PWA创建一个应用程序外壳。但网络共享API和推送通知在android应用程序中不起作用 我已经使用reactjs创建了一个PWA,并使用了Web共享API和推送通知服务。现在,我在我的react native(版本“0.59.8”)应用程序中使用“react native WebView”(版本“6.9.0”)库中的WebView为我的PWA创建应用程序外壳 <View style={{ flex: 1, backgroundC
<View style={{ flex: 1, backgroundColor: "red" }}>
<WebView
source={{ uri: "https://mypwa.firebaseapp.com" }}
/>
</View>
PWA在chrome浏览器上运行良好,但在react native的android应用程序中没有
更新1:
对于那些正在寻找Web共享API解决方案的人,我找到了出路:
#In react-native app:
import { WebView } from 'react-native-webview';
import Share from 'react-native-share';
nativeShare = async (data) => {
const shareOptions = {
title: 'Share via',
subject: data.subject,
message: data.message,
url: data.url
}
await Share.open(shareOptions)
}
render() {
return (
<View style={{ flex: 1, backgroundColor: "red" }}>
<WebView
source={{ uri: "https://examplepwa.firebaseapp.com" }}
onMessage={event => { this.nativeShare(JSON.parse(event.nativeEvent.data)) }}
/>
</View>
);
}
#In PWA share service:
const webShare = (data) => {
let { title, text, url } = data
if (!url) {
url = document.location.href;
}
if (navigator.share) {
navigator.share({ title, text, url })
.then(() => console.log('Successful share'))
.catch((error) => console.error('Error sharing ' + error));
} else if (window.ReactNativeWebView) {
const shareObject = { subject: title, message: text, url }
window.ReactNativeWebView.postMessage(JSON.stringify(shareObject))
} else {
console.warn('web share not supported');
}
}
#在react原生应用程序中:
从“react native WebView”导入{WebView};
从“反应本地共享”导入共享;
nativeShare=异步(数据)=>{
常量共享选项={
标题:“通过共享”,
主题:data.subject,
message:data.message,
url:data.url
}
等待共享。打开(共享选项)
}
render(){
返回(
{this.nativeShare(JSON.parse(event.nativeEvent.data))}
/>
);
}
#在PWA共享服务中:
const webShare=(数据)=>{
设{title,text,url}=data
如果(!url){
url=document.location.href;
}
if(navigator.share){
navigator.share({title,text,url})
。然后(()=>console.log('Successful share'))
.catch((错误)=>console.error('error sharing'+error));
}else if(window.ReactNativeWebView){
constShareObject={subject:title,message:text,url}
window.ReactNativeWebView.postMessage(JSON.stringify(shareObject))
}否则{
console.warn(“不支持web共享”);
}
}
但我仍然在寻找推送通知解决方案