react兼容safari9,ReactJS - FCM无法在safari浏览器中运行

最新推荐文章于 2023-11-15 20:03:03 发布

不知者不问

最新推荐文章于 2023-11-15 20:03:03 发布

阅读量249

点赞数

文章标签： react兼容safari9

I am trying to implement FCM push notification in my ReactJS application.

It is working in chrome and firefox browser perfectly but facing in an issue in safari browser.

FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser).

I also gone through the documentation of firebase also found that it only supports on only 3 browsers.

Chrome

Firefox

Safari

Is there any method to supports in safari browser as well.

解决方案

Safari 11.1 already supported serviceWorker, but it still didn't support PushAPI that is also needed by FCM Javascript API.

The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.

Here is the supported browser list: https://caniuse.com/#feat=push-api that states that Safari still not supporting Push API

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不知者不问

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react兼容safari9,ReactJS - FCM无法在safari浏览器中运行

I am trying to implement FCM push notification in my ReactJS application.It is working in chrome and firefox browser perfectly but facing in an issue in safari browser.FirebaseError: Messaging: This b...
复制链接

扫一扫

react-to-print:在浏览器中打印React组件。支持Chrome，Safari，Firefox和EDGE

04-11

ReactToPrint-在浏览器中打印React组件因此，您已经创建了一个React组件，并希望使最终用户能够打印出该组件的内容。该软件包旨在通过弹出带有复制CSS样式的打印窗口来解决此问题。演示版安装 npm install --...

react-native-dom:如何使用react-native-dom在Web浏览器中运行React Native应用程序

05-09

默认情况下为多线程：遵循与移动版React Native完全相同的架构，您所有的react组件/应用逻辑都在Web worker中运行，而主线程则完全专注于渲染。与移动版上的React Native相同的布局行为：通过对Yoga的自定义绑定...

参与评论您还未登录，请先登录后发表或查看评论

react兼容safari9_react项目兼容ie浏览器配置

weixin_39804641的博客

12-22

102

使用create-react-app生成的项目1.安装react-app-polyfill和core-jsnpm install react-app-polyfill core-js2.在index.js中引入import 'core-js/es'import 'react-app-polyfill/ie9'import 'react-app-polyfill/stable'3.修改package...

react兼容safari9_解决create-react-app在ie中打开页面空白的兼容性问题

weixin_39558521的博客

12-22

367

最近使用react官方脚手架create-react-app建立项目的时候发现在ie浏览器打开时显示空白，在主流的chrome、fireFox等浏览器显示是正常的。打开控制台显示如下既然提示了语法错误，那么猜想应该是兼容性的问题，看了下浏览器的版本号是ie11。首先我翻了下create-react-app的文档，从中看到了正好有对ie9、ie10、ie11的兼容性问题解决的一个方案。这时需要用到c...

react兼容safari9_ReactJS - FCM无法在safari浏览器中运行

weixin_39529302的博客

12-30

186

I am trying to implement FCM push notification in my ReactJS application.It is working in chrome and firefox browser perfectly but facing in an issue in safari browser.FirebaseError: Messaging: This b...

react-native-safari-view：Safari View Controller的React Native包装器

02-05

React本机Safari视图 React原住民的Safari浏览是包装的。文献资料安装 npm i --save react-native-safari-view 支持由于React Native生态系统中的快速变化，除了最新版本的React Native，我们不会正式支持此模块...

sports-event-timer:使用react-redux和react-saga在ReactJS和Golang中进行竞赛事件模拟

05-13

模拟是可以单独在客户端运行，也可以同时使用reactjs redux-sagas运行的选择，也可以完全在服务器端运行，其中reactjs确保相应地更新客户端。比赛序言每个运动员都携带带有唯一标识符的筹码。比赛中有两个设定的...

reactjs-login-form：使用ReactJS和React Bootstrap的登录表单

02-06

建立在计算机上克隆存储库$ git clone https://github.com/kapilbarad/reactjs-login-form.git$ cd reactjs-login-form.git 要安装依赖项， $ npm install 要运行项目本身， $ npm start

React入门实战：移动设备兼容性处理

热门推荐

Dreamaple

06-05

1万+

- 方案目标解决浏览器webgl支持问题 - 方案准备 浏览器不支持webgl - 方案步骤如果你使用的是Chrome 浏览器,可以开启–ignore-gpi-black-list选项。右击Chrome 浏览器的快捷方式并在弹出菜单中选择“属性” 选项,就弹出了一个窗口,如图H.2所示。将上述选项字符串添加到“目标” 栏的命令字符串后面。这样,Chrome 就会总是以上述方式启...

怎么在浏览器中运行react-native项目

05-25

要在浏览器中运行 React Native 项目，需要使用 React Native Web。这是一个使 React Native 应用程序可以在 Web 上运行的库。以下是在浏览器中运行 React Native 项目的步骤： 1. 在项目中安装 react-native-web： ``` npm install react-native-web ``` 2. 修改项目中的入口文件，将其从 index.js 改为 index.web.js，然后从 react-native 和 react-native-web 中导入 AppRegistry 和组件。 3. 创建一个名为 index.html 的新文件，并将以下内容添加到其中： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My React Native App</title> </head> <body> <div id="root"></div> <script src="./index.web.js"></script> </body> </html> ``` 这将创建一个包含一个 id 为 root 的 div 元素的 HTML 文件，并将 index.web.js 作为脚本包含在内。 4. 在项目根目录中创建一个名为 webpack.config.js 的新文件，并将以下内容添加到其中： ``` const path = require('path'); const webpack = require('webpack'); module.exports = { entry: './index.web.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], }, ], }, plugins: [ new webpack.DefinePlugin({ __DEV__: JSON.stringify(true), }), ], }; ``` 这将创建一个名为 bundle.js 的文件，其中包含打包后的 React Native 代码。 5. 安装 webpack 和 webpack-dev-server： ``` npm install webpack webpack-dev-server --save-dev ``` 6. 在 package.json 文件中添加以下内容： ``` "scripts": { "start": "webpack-dev-server --hot --open", "build": "webpack" } ``` 这将允许您使用 npm start 命令启动开发服务器，并使用 npm run build 命令构建项目。 7. 运行项目： ``` npm start ``` 运行此命令后，浏览器将自动打开，并在其中显示 React Native 应用程序。