mirror of
https://github.com/zhigang1992/react-native-notifications.git
synced 2026-06-11 00:08:50 +08:00
86 lines
10 KiB
HTML
86 lines
10 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Push Notifications Subscription · React native notifications</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The typical flow for subscribing a device for receiving push notification in real time is to first register the device at the vendor's servers (e.g. FCM), then publishing the received token to your own push management servers."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Push Notifications Subscription · React native notifications"/><meta property="og:type" content="website"/><meta property="og:url" content="https://wix.github.io/react-native-notifications/"/><meta property="og:description" content="The typical flow for subscribing a device for receiving push notification in real time is to first register the device at the vendor's servers (e.g. FCM), then publishing the received token to your own push management servers."/><meta property="og:image" content="https://wix.github.io/react-native-notifications/img/undraw_online.svg"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://wix.github.io/react-native-notifications/img/undraw_tweetstorm.svg"/><link rel="shortcut icon" href="/react-native-notifications/undefined"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script src="/react-native-notifications/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native-notifications/css/main.css"/><script src="/react-native-notifications/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native-notifications/"><h2 class="headerTitle">React native notifications</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/react-native-notifications/docs/installation-ios" target="_self">Docs</a></li><li class=""><a href="/react-native-notifications/docs/general-api" target="_self">API</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Guides</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Guides</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-notifications/docs/getting-started">Getting Started</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-notifications/docs/subscription">Subscription</a></li><li class="navListItem"><a class="navItem" href="/react-native-notifications/docs/notifications-events">Events</a></li><li class="navListItem"><a class="navItem" href="/react-native-notifications/docs/localNotifications">Local Notifications</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Installation</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-notifications/docs/installation-ios">iOS Installation</a></li><li class="navListItem"><a class="navItem" href="/react-native-notifications/docs/installation-android">Android Installation</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Advanced</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-notifications/docs/advanced-ios">iOS</a></li></ul></div></div></section></div><script>
|
||
var coll = document.getElementsByClassName('collapsible');
|
||
var checkActiveCategory = true;
|
||
for (var i = 0; i < coll.length; i++) {
|
||
var links = coll[i].nextElementSibling.getElementsByTagName('*');
|
||
if (checkActiveCategory){
|
||
for (var j = 0; j < links.length; j++) {
|
||
if (links[j].classList.contains('navListItemActive')){
|
||
coll[i].nextElementSibling.classList.toggle('hide');
|
||
coll[i].childNodes[1].classList.toggle('rotate');
|
||
checkActiveCategory = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
coll[i].addEventListener('click', function() {
|
||
var arrow = this.childNodes[1];
|
||
arrow.classList.toggle('rotate');
|
||
var content = this.nextElementSibling;
|
||
content.classList.toggle('hide');
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
var headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
var el = event.target;
|
||
while(el !== headings){
|
||
if (el.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
break;
|
||
} else{
|
||
el = el.parentNode;
|
||
}
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 id="__docusaurus" class="postHeaderTitle">Push Notifications Subscription</h1></header><article><div><span><p>The typical flow for subscribing a device for receiving push notification in real time is to first register the device at the vendor's servers (e.g. FCM), then publishing the received token to your own push management servers.</p>
|
||
<p>This section is about the first part of the flow.</p>
|
||
<p>In order to handle notifications, you must register the <code>remoteNotificationsRegistered</code> event beforehand.</p>
|
||
<p>In your React Native app:</p>
|
||
<pre><code class="hljs css language-javascript"><span class="hljs-keyword">import</span> {Notifications} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native-notifications'</span>;
|
||
|
||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||
<span class="hljs-keyword">constructor</span>() {
|
||
Notifications.events().registerRemoteNotificationsRegistered(<span class="hljs-function">(<span class="hljs-params">event: Registered</span>) =></span> {
|
||
<span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> Send the token to my server so it could send back push notifications...</span>
|
||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Device Token Received"</span>, event.deviceToken);
|
||
});
|
||
Notifications.events().registerRemoteNotificationsRegistrationFailed(<span class="hljs-function">(<span class="hljs-params">event: RegistrationError</span>) =></span> {
|
||
<span class="hljs-built_in">console</span>.error(event);
|
||
});
|
||
|
||
Notifications.requestPermissions();
|
||
}
|
||
}
|
||
|
||
</code></pre>
|
||
<p>When you have the device token, POST it to your server and register the device in your notifications provider (Amazon SNS, Azure, etc.).</p>
|
||
<p>You can check if the user granted permissions on iOS by calling <code>checkPermissions()</code>:</p>
|
||
<pre><code class="hljs css language-javascript">Notifications.ios.checkPermissions().then(<span class="hljs-function">(<span class="hljs-params">currentPermissions</span>) =></span> {
|
||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Badges enabled: '</span> + !!currentPermissions.badge);
|
||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Sounds enabled: '</span> + !!currentPermissions.sound);
|
||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Alerts enabled: '</span> + !!currentPermissions.alert);
|
||
});
|
||
</code></pre>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native-notifications/docs/getting-started"><span class="arrow-prev">← </span><span>Getting Started</span></a><a class="docs-next button" href="/react-native-notifications/docs/notifications-events"><span>Events</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native-notifications/" class="nav-home"></a><div><h5>Docs</h5><a href="/react-native-notifications/docs/getting-started">Getting Started (or other categories)</a><a href="/react-native-notifications/docs/installation-ios">Guides</a><a href="/react-native-notifications/docs/general-api">API Reference</a></div><div></div><div><h5>More</h5><a href="/react-native-notifications/blog">Blog</a><a href="https://github.com/wix/react-native-notifications">GitHub</a><a class="github-button" href="https://github.com/wix/react-native-notifications" data-icon="octicon-star" data-count-href="/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2020 Wix</section></footer></div></body></html> |