mirror of
https://github.com/zhigang1992/react-native-notifications.git
synced 2026-06-15 18:38:06 +08:00
86 lines
14 KiB
HTML
86 lines
14 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"/><link rel="stylesheet" href="/react-native-notifications/css/code-blocks-buttons.css"/><script type="text/javascript" src="/react-native-notifications/js/code-blocks-buttons.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><script src="/react-native-notifications/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native-notifications/css/prism.css"/><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-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>Notifications<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-notifications'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
Notifications<span class="token punctuation">.</span><span class="token function">events</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">registerRemoteNotificationsRegistered</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token operator">:</span> Registered</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// TODO: Send the token to my server so it could send back push notifications...</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Device Token Received"</span><span class="token punctuation">,</span> event<span class="token punctuation">.</span>deviceToken<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
Notifications<span class="token punctuation">.</span><span class="token function">events</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">registerRemoteNotificationsRegistrationFailed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token operator">:</span> RegistrationError</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
Notifications<span class="token punctuation">.</span><span class="token function">requestPermissions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
</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-jsx">Notifications<span class="token punctuation">.</span>ios<span class="token punctuation">.</span><span class="token function">checkPermissions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">currentPermissions</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Badges enabled: '</span> <span class="token operator">+</span> <span class="token operator">!</span><span class="token operator">!</span>currentPermissions<span class="token punctuation">.</span>badge<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Sounds enabled: '</span> <span class="token operator">+</span> <span class="token operator">!</span><span class="token operator">!</span>currentPermissions<span class="token punctuation">.</span>sound<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Alerts enabled: '</span> <span class="token operator">+</span> <span class="token operator">!</span><span class="token operator">!</span>currentPermissions<span class="token punctuation">.</span>alert<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</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> |