{"id":3918,"date":"2021-11-29T18:12:06","date_gmt":"2021-11-29T18:12:06","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3918"},"modified":"2023-07-18T13:04:33","modified_gmt":"2023-07-18T17:04:33","slug":"adding-push-notifications-to-your-ionic-react-app","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app","title":{"rendered":"Adding Push Notifications to Your Ionic React App"},"content":{"rendered":"<blockquote><p>The following is guest blog post from Pato Vargas, Developer Advocate at OneSignal.<\/p><\/blockquote>\n<p>It\u2019s no secret that push notifications can help you engage and retain app users. This tutorial will show you how to integrate with <a href=\"https:\/\/onesignal.com\/\">OneSignal<\/a> to leverage push notifications in your ReactJS app.<\/p>\n<p><!--more--><\/p>\n<h2>OneSignal &amp; Your Browser&#8217;s Push API<\/h2>\n<p>Your browser&#8217;s Push API gives web applications the ability to receive messages from a server whether the web app is in the foreground or currently loaded on a user agent. This lets you deliver asynchronous notifications and updates to users who opt-in, resulting in better engagement with timely new content.<\/p>\n<p>This tutorial will cover how to integrate the new <a href=\"https:\/\/www.npmjs.com\/package\/react-onesignal\">React OneSignal NPM package<\/a> to add push notifications into your app using our typical setup process. Part one of this guide covers the OneSignal setup process. Part two of this guide covers how to integrate OneSignal with React using our npm package. This tutorial requires some basic knowledge of React. I&#8217;m using the <a href=\"https:\/\/ionicframework.com\/docs\/cli\">Ionic CLI<\/a> to generate my project and <strong>NodeJS version 14.16<\/strong>.<\/p>\n<p><strong>Additional Resources<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/OneSignalDevelopers\/OneSignal-Ionic-Capacitor-React-Sample\/tree\/quick-setup\">Quick Ionic React Setup<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=JHEsZLyKChU\">Push Notifications in React app with OneSignal<\/a><\/li>\n<\/ul>\n<h1>Part 1: Set Up Your OneSignal Account<\/h1>\n<p>To begin,<a href=\"https:\/\/app.onesignal.com\/login\"> log in<\/a> to your OneSignal account or<a href=\"https:\/\/app.onesignal.com\/signup\"> create a free account<\/a>. Then, click on the blue button entitled <strong>New App\/Website<\/strong> to configure your OneSignal account to fit your app or website.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/0jRp-VF_3Yor0ag00_ddQaJlTjtoOTh_d-QsWNrcSSW7Q5T1f59jGgyhdpPUkDM2Tt_DmkRdd5-Wtr20-ltu4xaSNTWyJ1mEER14xNh59CHVo4YXy8oss40RDCUVk5lFTHZU7CyeqLZ3QZjoVra5Zb2kChtFtbdsGzR3zu_ZaOE2EGF3XpDbNnPqKiDsD_ZkpUGuRfjY6XvDwl2Za-QPwqiQmw9Ou7NBSV8gsBCzd_bvPjFn-L46ZLtDVPgeRuG6G6z3BFGcDWsnC9MRFKRhhGVggkHxAd4jsbIULHcik2Gr4ZYTwbgV4qNljC19IdhnRE5eJ9ef1G1HCkVID0YlT9e7qJHY_xUb2C_Eg4kYM6JF1yJR8XQWtcFj5nqsPWMIIk0nX39zV8cCAsqWpRxSdWd6g70idcEixdUIq7HmTxYEDsVueH1wVUCFoV1jIDz0ad3frLSWjolmF3IN_Y8D_iUBMMQtB1NgBZaJe4oaAuhbC9xMR_Ggaz7p-SNEAAFSW3H3xtSBCJIFdfyjIKv2k8dpxnNAuVh6W0kUcTzv4fECOaSrYA4C0j4oo95E4QWBy6FidjJnypaVuvNsceZgosK1d8qaCxsSRvxYoFNEGRT7ZeFebK2m39LvbT06V9oiNubdw67kPYUcFa5edCfRE6smdOA5qB5O5ewekN2Xhjweo4y4NEmbBnwE4zpWgRsHCZ6WucNEPjY5Ka9S1HrVf9A=w1440-h418-no?authuser=2\" alt=\"alt create OneSignal app\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/0jRp-VF_3Yor0ag00_ddQaJlTjtoOTh_d-QsWNrcSSW7Q5T1f59jGgyhdpPUkDM2Tt_DmkRdd5-Wtr20-ltu4xaSNTWyJ1mEER14xNh59CHVo4YXy8oss40RDCUVk5lFTHZU7CyeqLZ3QZjoVra5Zb2kChtFtbdsGzR3zu_ZaOE2EGF3XpDbNnPqKiDsD_ZkpUGuRfjY6XvDwl2Za-QPwqiQmw9Ou7NBSV8gsBCzd_bvPjFn-L46ZLtDVPgeRuG6G6z3BFGcDWsnC9MRFKRhhGVggkHxAd4jsbIULHcik2Gr4ZYTwbgV4qNljC19IdhnRE5eJ9ef1G1HCkVID0YlT9e7qJHY_xUb2C_Eg4kYM6JF1yJR8XQWtcFj5nqsPWMIIk0nX39zV8cCAsqWpRxSdWd6g70idcEixdUIq7HmTxYEDsVueH1wVUCFoV1jIDz0ad3frLSWjolmF3IN_Y8D_iUBMMQtB1NgBZaJe4oaAuhbC9xMR_Ggaz7p-SNEAAFSW3H3xtSBCJIFdfyjIKv2k8dpxnNAuVh6W0kUcTzv4fECOaSrYA4C0j4oo95E4QWBy6FidjJnypaVuvNsceZgosK1d8qaCxsSRvxYoFNEGRT7ZeFebK2m39LvbT06V9oiNubdw67kPYUcFa5edCfRE6smdOA5qB5O5ewekN2Xhjweo4y4NEmbBnwE4zpWgRsHCZ6WucNEPjY5Ka9S1HrVf9A=w1440-h418-no?authuser=2\" alt=\"alt create OneSignal app\" \/><\/noscript><\/p>\n<p>Insert the name of your app or website. Select <strong><em>Web Push<\/em><\/strong> as your platform.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/8VBclXjgbMQfBX_pmCRzkt3JTwVaHSF4t5l8EcGrNMNCZsvg4HosU_GZH_P_NXWzfJgDLyhxENM6e9n0Whuk4dZRuyLHaOkgDuw7oA1dB4GI0iT75o2iqT8MwhebIFupcsi6upejQBBfiDx-QZ5C9p6LnKosiqHQFCybkYIrpbe3AuZ_GfHTDy-NdIXDhJgkBzHgW4vl-PJUd9bjMR9qdjulImnI2ex9D9edmyZg3h48Zq2OfI_jp09lM1Bulgr7qU32GoRUFFEbTDbVyA7qZxpx7OlUvhaZ_vNiBqj0q84zxFth7TNPxnju0TvmTRYzmriLY5-ILWsmrBzYadaoc2QzznlxbiIMoGkiMEoRp6kbjwHSo7yLNzcaFDdehjan6DmG74bI0yyniA3iYeFTTL1vaqplAS9sbAA5Y1mc-IaWBoWsfL70snBAlc3Ssz3v1VAu8-iFJ6m9Uvfw-1BHqOQuvm1vaQXbVBNoqmicwKK-Rb_Wc-FcEXMjA-Y6ZQouwMjfxLQRiDFmyuzUubEJPJ4L47yd8XctJSErTCqcmv73AN282I8ANOiOY2rjpq2jsLqrfyTInLDWZQhpXG5G-QJMaFsRwLCPcynYy3Tr5oQY7fKW37yRc3BDFXyz-p_jKfZHfkjLYho8CPvpJ-YWnGnLx2xqxRWAiWavMDTOeK6QxvconCkl_SSjAImxUcghKy0z6JGBxFByRxL7XHALAYA=w1440-h748-no?authuser=2\" alt=\"OneSignal Web Push setup\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/8VBclXjgbMQfBX_pmCRzkt3JTwVaHSF4t5l8EcGrNMNCZsvg4HosU_GZH_P_NXWzfJgDLyhxENM6e9n0Whuk4dZRuyLHaOkgDuw7oA1dB4GI0iT75o2iqT8MwhebIFupcsi6upejQBBfiDx-QZ5C9p6LnKosiqHQFCybkYIrpbe3AuZ_GfHTDy-NdIXDhJgkBzHgW4vl-PJUd9bjMR9qdjulImnI2ex9D9edmyZg3h48Zq2OfI_jp09lM1Bulgr7qU32GoRUFFEbTDbVyA7qZxpx7OlUvhaZ_vNiBqj0q84zxFth7TNPxnju0TvmTRYzmriLY5-ILWsmrBzYadaoc2QzznlxbiIMoGkiMEoRp6kbjwHSo7yLNzcaFDdehjan6DmG74bI0yyniA3iYeFTTL1vaqplAS9sbAA5Y1mc-IaWBoWsfL70snBAlc3Ssz3v1VAu8-iFJ6m9Uvfw-1BHqOQuvm1vaQXbVBNoqmicwKK-Rb_Wc-FcEXMjA-Y6ZQouwMjfxLQRiDFmyuzUubEJPJ4L47yd8XctJSErTCqcmv73AN282I8ANOiOY2rjpq2jsLqrfyTInLDWZQhpXG5G-QJMaFsRwLCPcynYy3Tr5oQY7fKW37yRc3BDFXyz-p_jKfZHfkjLYho8CPvpJ-YWnGnLx2xqxRWAiWavMDTOeK6QxvconCkl_SSjAImxUcghKy0z6JGBxFByRxL7XHALAYA=w1440-h748-no?authuser=2\" alt=\"OneSignal Web Push setup\" \/><\/noscript><\/p>\n<p>Click on the blue button entitled, <strong><em>Next: Configure Your Platform.<\/em><\/strong><\/p>\n<h3>Web Configuration<\/h3>\n<p>Under <strong>Choose Integration<\/strong>, select the <strong>Typical Site<\/strong> option.<\/p>\n<p>In the Site Setup section, enter your chosen web configuration. In my case, the configuration looks like this:<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/e6qiX5oFeQ8hdTlcT6EaAotKmRuDC6_ScW4OA4BtU6l5wGHXpAkCS38NsuPkpf8wv-6SY-7Am1I98IFTuF9qqEdtOFFqs7rWsm4qbEQ808QBStMG6Mt5y2CxzZP19A13Q9bvaymXK9dLpZkigftr3JQb7W-y2-2voKSp5tKw1catS4jzpZqRUo0TuYteHxOl8I6LOULeDlhRLW53Zgt1YgDeXGJEG3gs-JJjUJHJkMaYMSGgEUrz-wLDMMWzKX-mW47sT34rG1Z5ptSu-LN9yDAX-akszS3eQjS6A_rG-U_6wyTiJMvXrDSodipWjkuHGeMgizFK4lMhJ9wLNYopr9JhfBYpr8NK7AbrZ9MkYuQnuWYdZSUAo9nauXWedUKgmOb64JHnF4iPP34NXoQsE9UGVapCJns4Ic255Pn4zflnv6eFBfrsHShESm_58YM-UWNfCpX_5uDBx_GZ44oZBQUh1_hr8sjmTRy4bjdqnvm0CtcpelJMhNxMoyd6g4Hn8Wm1EkMvvA6CTO4lcOHXaf-HyktBFeOUJtnCA8R1xWcp0rXtbP9qXIBylQbrZxaizyg-kjnTcUCOHuY93kxUIcjCYWNmuc8DK5v9L6WmSbZ20kh04cdMFLQRjfPG9tXI6Mq_-oktawFXvyCbsu2-w_CK6EL6kIA4t-TQlS-EKVOerq3H9SlVKTWMIDj65kte4XNfqJccdWyI3j0rJOWJd9A=w1401-h969-no?authuser=2\" alt=\"OneSignal Typical Setup\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/e6qiX5oFeQ8hdTlcT6EaAotKmRuDC6_ScW4OA4BtU6l5wGHXpAkCS38NsuPkpf8wv-6SY-7Am1I98IFTuF9qqEdtOFFqs7rWsm4qbEQ808QBStMG6Mt5y2CxzZP19A13Q9bvaymXK9dLpZkigftr3JQb7W-y2-2voKSp5tKw1catS4jzpZqRUo0TuYteHxOl8I6LOULeDlhRLW53Zgt1YgDeXGJEG3gs-JJjUJHJkMaYMSGgEUrz-wLDMMWzKX-mW47sT34rG1Z5ptSu-LN9yDAX-akszS3eQjS6A_rG-U_6wyTiJMvXrDSodipWjkuHGeMgizFK4lMhJ9wLNYopr9JhfBYpr8NK7AbrZ9MkYuQnuWYdZSUAo9nauXWedUKgmOb64JHnF4iPP34NXoQsE9UGVapCJns4Ic255Pn4zflnv6eFBfrsHShESm_58YM-UWNfCpX_5uDBx_GZ44oZBQUh1_hr8sjmTRy4bjdqnvm0CtcpelJMhNxMoyd6g4Hn8Wm1EkMvvA6CTO4lcOHXaf-HyktBFeOUJtnCA8R1xWcp0rXtbP9qXIBylQbrZxaizyg-kjnTcUCOHuY93kxUIcjCYWNmuc8DK5v9L6WmSbZ20kh04cdMFLQRjfPG9tXI6Mq_-oktawFXvyCbsu2-w_CK6EL6kIA4t-TQlS-EKVOerq3H9SlVKTWMIDj65kte4XNfqJccdWyI3j0rJOWJd9A=w1401-h969-no?authuser=2\" alt=\"OneSignal Typical Setup\" \/><\/noscript><\/p>\n<p>Notice for testing purposes I\u2019m entering my localhost URL (http:\/\/localhost:3000). If you are doing the same, make sure you click on the <strong><em>LOCAL TESTING<\/em><\/strong> option. This will ensure to treat HTTP localhost as HTTPS for testing.<\/p>\n<p>Under <strong><em>Permission Prompt Setup<\/em><\/strong>, you will see three vertical blue dots under the <strong><em>Actions<\/em><\/strong> header on the far right side of the screen. Click on the blue dots and select <strong><em>Edit<\/em><\/strong> from the drop-down menu.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/4neoN-NxMct1-P2SwQo9x3DY-gIDxkXC30WUOBYo3S2gYVX2wAYoCZNDc3MboctrLVcFPb9JHU92p5HWFH7doWzDZtDw1XDytGFBb7hgleiRBBzzyYsbqUeAwSVH27Gpuo5rxz1bFLZACiICg2mz8wpmraOGE682j1DZzpiiPgG1pyvwxQb2hhlR2ep_9VdakvneCQf9FtMU6sAe52CiqepT3QyBuogyg9VFBR9UGEfuVEJM3o7bm39UWtW5SbwOzXFMsrij3JB6vfTRNuTjgeOsMuUq8sMfIOQf4N-O2o29jL3HDeK3-2gx6H3qUKx9zY_ChDbgJoHLqZFUhfitXRVl3iVFI1kxOsXLZpqc0tz-6BG1McJ8y3YGcIOVTtq7bgbRR7QFekNrIHx-_QsWN609RtQ_j8ZKbQWnDTtrQTJljjBX4fJxH4SFsr03SUUUq7C5syBRPYX7QAXAg24xeE8SotuuOXRlpnL_qn6haRLPrGMIFdQhsUBjv18tGQrU2UUYPiV2tAxKxG5ZyOmG4STw2AVw2kOvCVYe2oNFOrwM4KPvJtRLCrxj5UrcaG1N7wbf6ccWMy0dJfFjlc8y-_glJ5OWutlIsJuj9sKoLy6pGzMDwevBjFAao0cV4ITSAiqFv0tIdi6ack8iQCehih4On4SOjxCcgx-bfPklJel93WaFwbO_e4Bz5i5Ju5LbkdduZQ76NFSpoamke0Nn-vs=w1440-h446-no?authuser=2\" alt=\"edit OneSignal prompt \" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/4neoN-NxMct1-P2SwQo9x3DY-gIDxkXC30WUOBYo3S2gYVX2wAYoCZNDc3MboctrLVcFPb9JHU92p5HWFH7doWzDZtDw1XDytGFBb7hgleiRBBzzyYsbqUeAwSVH27Gpuo5rxz1bFLZACiICg2mz8wpmraOGE682j1DZzpiiPgG1pyvwxQb2hhlR2ep_9VdakvneCQf9FtMU6sAe52CiqepT3QyBuogyg9VFBR9UGEfuVEJM3o7bm39UWtW5SbwOzXFMsrij3JB6vfTRNuTjgeOsMuUq8sMfIOQf4N-O2o29jL3HDeK3-2gx6H3qUKx9zY_ChDbgJoHLqZFUhfitXRVl3iVFI1kxOsXLZpqc0tz-6BG1McJ8y3YGcIOVTtq7bgbRR7QFekNrIHx-_QsWN609RtQ_j8ZKbQWnDTtrQTJljjBX4fJxH4SFsr03SUUUq7C5syBRPYX7QAXAg24xeE8SotuuOXRlpnL_qn6haRLPrGMIFdQhsUBjv18tGQrU2UUYPiV2tAxKxG5ZyOmG4STw2AVw2kOvCVYe2oNFOrwM4KPvJtRLCrxj5UrcaG1N7wbf6ccWMy0dJfFjlc8y-_glJ5OWutlIsJuj9sKoLy6pGzMDwevBjFAao0cV4ITSAiqFv0tIdi6ack8iQCehih4On4SOjxCcgx-bfPklJel93WaFwbO_e4Bz5i5Ju5LbkdduZQ76NFSpoamke0Nn-vs=w1440-h446-no?authuser=2\" alt=\"edit OneSignal prompt \" \/><\/noscript><br \/>\nA window will open with the configuration of our <a href=\"https:\/\/documentation.onesignal.com\/docs\/slide-prompt\">push notification Slide Prompt<\/a>. Confirm that <strong><em>Auto-prompt<\/em><\/strong> is enabled (toggled to the right).<\/p>\n<p>Under <strong><em>Show When<\/em><\/strong>, you can change the second increment to alter how long your slide prompt will delay after a user visits your page. You can leave it as it is, or you can reduce the seconds so that your prompt appears sooner. Once you&#8217;ve input your chosen delay increment, click the grey <strong><em>Done<\/em><\/strong> button located at the bottom right corner of the window.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/Rnx6sLP7Ny2UfU3wP-8AgQEP9m_LbHT9Iqwk61BN92v4e2yeIM9UCgfvGFxoCehUbbv6TqQCMu2NkrX22BHJqXO-7UmNysM60RJhOL-IbspU5PS9nuDCZK6u5SRBW4Ve59MvrXZel79zf8g_W5e8AWmesa5Un7wftPymMT0dTxGPwWr7QkaH1jwfn7hoA9PnQGF1RSNiDzOLL0Kvry9DZzYZBPgqwPnRlEEd1MW1eq_yOME5Duy8Q6W641x7zDsgQKe8NvO02_jLTYMA_lfe5MS8dzRt8NZ8S5JXpWvNhYB6kXNIEAtuAhfmCGdugx2-3b08NeAQayjT6w2ng9_L8Y90niIN_F2e8sZYFlOAjXoTObiuhV1QBe3SjkA938iApnK_7AQYX3Chs4CHe4vshS4hUVdV6j8ioU6J25Us9v6d_e553SVSmnvAtb2wKQVYbHyMsBSCm6al1bKkQP_zB11fXdPvZlpX3qqu_tBfSAe55Qo5t6MNeJvLAW5eQZkaa7DxetDPeJJn6ZLl8o98a-F2AmlycLIkamqLckScvRO2HtPpguTlG5mx8d9pIr6hG12S1gl3UKl3OGhoT7fzdFoHkVOCsp7OR8YEMud2yo2QGtHfWZXoesm_elAzQIi-Eh4bRz2ZIOr7npqxEa630ZXtfpq9YVOEZZNc-QJbZ2VL4IlNuz5fyRYnnPZiQslwMoLmMgrJzDBaJsCB9Gch4Zk=w1440-h829-no?authuser=2\" alt=\"OneSignal Prompt Config\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Rnx6sLP7Ny2UfU3wP-8AgQEP9m_LbHT9Iqwk61BN92v4e2yeIM9UCgfvGFxoCehUbbv6TqQCMu2NkrX22BHJqXO-7UmNysM60RJhOL-IbspU5PS9nuDCZK6u5SRBW4Ve59MvrXZel79zf8g_W5e8AWmesa5Un7wftPymMT0dTxGPwWr7QkaH1jwfn7hoA9PnQGF1RSNiDzOLL0Kvry9DZzYZBPgqwPnRlEEd1MW1eq_yOME5Duy8Q6W641x7zDsgQKe8NvO02_jLTYMA_lfe5MS8dzRt8NZ8S5JXpWvNhYB6kXNIEAtuAhfmCGdugx2-3b08NeAQayjT6w2ng9_L8Y90niIN_F2e8sZYFlOAjXoTObiuhV1QBe3SjkA938iApnK_7AQYX3Chs4CHe4vshS4hUVdV6j8ioU6J25Us9v6d_e553SVSmnvAtb2wKQVYbHyMsBSCm6al1bKkQP_zB11fXdPvZlpX3qqu_tBfSAe55Qo5t6MNeJvLAW5eQZkaa7DxetDPeJJn6ZLl8o98a-F2AmlycLIkamqLckScvRO2HtPpguTlG5mx8d9pIr6hG12S1gl3UKl3OGhoT7fzdFoHkVOCsp7OR8YEMud2yo2QGtHfWZXoesm_elAzQIi-Eh4bRz2ZIOr7npqxEa630ZXtfpq9YVOEZZNc-QJbZ2VL4IlNuz5fyRYnnPZiQslwMoLmMgrJzDBaJsCB9Gch4Zk=w1440-h829-no?authuser=2\" alt=\"OneSignal Prompt Config\" \/><\/noscript><\/p>\n<p>After clicking <strong><em>Done<\/em><\/strong>, scroll down to the bottom of the page and click <strong><em>Save<\/em><\/strong> to save your auto-prompt selections.<\/p>\n<p>You will be redirected to a different page with an important step: Downloading the SDK files. Click <strong><em>DOWNLOAD ONESIGNAL SDK FILES<\/em><\/strong> and save them on your computer to retrieve later.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/x1suX9j6Eo2tIuXJ0gl4r7O36BuyJfoHsOpnlQk7I8o8s-4VVkoCAIdpYsjqVqETrSSQU7nPHCqUMfjlJULgMqtu8VxQSXegFI3HZPjallsojZ7ggSZFoJ0VeX7XgHMghHt8p0Nu4EDPBFUrKruIwMUV3BgLZTM6zbWFLt0b00HNo_Hkx4vzWdlpLSkytdtD1AB-I3qymA0EBM6W11V9q3vvwBGtZiszFP8x_xrILyDh8L0XgFDuJEiWqD7kg0aPud8J0ExX3jmHA4J1u9wr7XFVNZAQJmDdSM70N6-zjUZ2vR_aZx7UltRDlCq5vefodSO0S6OtMT47bP6qUON2CRHLCYBIznF51OGxIQvBjZOPCtSikA7VIA57X1EEcJHbxTd21mIjXLbGEqzM_Y8q1htLzyK7qxBQ6w-jEV-zSkB6yFe2sP2A9cOmgxdCGXQl-CdnHibshoCLQm7MmgFTQS9JciNQmjQrf4vKDjBgmhZdaE087NtyH4k7ezWoUALRcFi_sTayN-2-F-FjF1n0ePIXJgUNS-WUU9mzZ071-L5BZAwF0kI7DqzZuZ17RcP33PkcDxtCY-Pk1VdWWaqYhbXzk-tKogSq0ubq3iS3iQCbEqPFMfVnwGb5hjLYnrM1zRaKXLLWuEc66D6SYhX577Z2IAPuEC-rnksh-Fo6NaAoC2cxb5HSexZWtqdfDilLhV_qwqzGuZWBMs2mw7xTqRE=w713-h199-no?authuser=2\" alt=\"Download OneSignal SDKs\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/x1suX9j6Eo2tIuXJ0gl4r7O36BuyJfoHsOpnlQk7I8o8s-4VVkoCAIdpYsjqVqETrSSQU7nPHCqUMfjlJULgMqtu8VxQSXegFI3HZPjallsojZ7ggSZFoJ0VeX7XgHMghHt8p0Nu4EDPBFUrKruIwMUV3BgLZTM6zbWFLt0b00HNo_Hkx4vzWdlpLSkytdtD1AB-I3qymA0EBM6W11V9q3vvwBGtZiszFP8x_xrILyDh8L0XgFDuJEiWqD7kg0aPud8J0ExX3jmHA4J1u9wr7XFVNZAQJmDdSM70N6-zjUZ2vR_aZx7UltRDlCq5vefodSO0S6OtMT47bP6qUON2CRHLCYBIznF51OGxIQvBjZOPCtSikA7VIA57X1EEcJHbxTd21mIjXLbGEqzM_Y8q1htLzyK7qxBQ6w-jEV-zSkB6yFe2sP2A9cOmgxdCGXQl-CdnHibshoCLQm7MmgFTQS9JciNQmjQrf4vKDjBgmhZdaE087NtyH4k7ezWoUALRcFi_sTayN-2-F-FjF1n0ePIXJgUNS-WUU9mzZ071-L5BZAwF0kI7DqzZuZ17RcP33PkcDxtCY-Pk1VdWWaqYhbXzk-tKogSq0ubq3iS3iQCbEqPFMfVnwGb5hjLYnrM1zRaKXLLWuEc66D6SYhX577Z2IAPuEC-rnksh-Fo6NaAoC2cxb5HSexZWtqdfDilLhV_qwqzGuZWBMs2mw7xTqRE=w713-h199-no?authuser=2\" alt=\"Download OneSignal SDKs\" \/><\/noscript><\/p>\n<p>Under the section entitled <strong><em>Add Code to Site<\/em><\/strong>, you will see an <strong><em>APP ID<\/em><\/strong>, copy that <strong><em>APP ID<\/em><\/strong> and save it somewhere in your computer.<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/XOqwhCWlMTckQ_BFfwbWfHk3erRDZW2AGWTCZeOovoTuHsebKBWUcVf8KmrksSjkV5998NJf4j1zKR6iR4bQdwau5KSjG7-RbcyrQ1pL_3EL1U3xVtTiuU5rY1444ty2VclZOX7L1MQwYNcddY6N7vPPJ9_iUl0t-LD5-Y2BhMV1YJtVZrgjW0RkVfLrw2UVsXY_wqlAs0kJnXZ2Yj1xxrx3t-5qIlk4QH1oPjzPXCPfXbozt9o9DAiwzZ5AhJrLmIGDI2D1ROLyHsOXjZhh48JBGaKqPex6gruMBgseOQL6oG4yOx2qJrWc2bm7qd_IAWwNY4wA_sfzPWPajUBW8rGYQYQErhh8kqHjFDmmDA8ZJwQUkiMZkaA7I259EWHF0Uz2pxnpak1Tn5d8MBj2WwkHuG2rZ2tnQzESfdbHwMzDl-Dxk5ME6vpY5xs_K5wLvZa8NqRahSeyk_M3d3oS5VW6CBvJ31hc6sjSzyv8mWGqMUeXu5hrcoJnN3cQRQHgJCQS6hUS3VN_1wKj7z6ctN21bczm7SFBl4TsitEbKUIVBygFb8YtcrHYw8qdpLioaDsMPe-e1prdovzWEWb3oVMIDrx3ilh33C5fIupmLugCseDkwXql1ufQ5TasxzRJKFZv5X09qOTAxAtSlFXUnw2get8qV7TUdV3PH87GsXQI1q3fmUBEpvBv4VglLRHQGttCPwki6e7lhuXZ6szzXbA=w701-h513-no?authuser=2\" alt=\"Download OneSignal SDK\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/XOqwhCWlMTckQ_BFfwbWfHk3erRDZW2AGWTCZeOovoTuHsebKBWUcVf8KmrksSjkV5998NJf4j1zKR6iR4bQdwau5KSjG7-RbcyrQ1pL_3EL1U3xVtTiuU5rY1444ty2VclZOX7L1MQwYNcddY6N7vPPJ9_iUl0t-LD5-Y2BhMV1YJtVZrgjW0RkVfLrw2UVsXY_wqlAs0kJnXZ2Yj1xxrx3t-5qIlk4QH1oPjzPXCPfXbozt9o9DAiwzZ5AhJrLmIGDI2D1ROLyHsOXjZhh48JBGaKqPex6gruMBgseOQL6oG4yOx2qJrWc2bm7qd_IAWwNY4wA_sfzPWPajUBW8rGYQYQErhh8kqHjFDmmDA8ZJwQUkiMZkaA7I259EWHF0Uz2pxnpak1Tn5d8MBj2WwkHuG2rZ2tnQzESfdbHwMzDl-Dxk5ME6vpY5xs_K5wLvZa8NqRahSeyk_M3d3oS5VW6CBvJ31hc6sjSzyv8mWGqMUeXu5hrcoJnN3cQRQHgJCQS6hUS3VN_1wKj7z6ctN21bczm7SFBl4TsitEbKUIVBygFb8YtcrHYw8qdpLioaDsMPe-e1prdovzWEWb3oVMIDrx3ilh33C5fIupmLugCseDkwXql1ufQ5TasxzRJKFZv5X09qOTAxAtSlFXUnw2get8qV7TUdV3PH87GsXQI1q3fmUBEpvBv4VglLRHQGttCPwki6e7lhuXZ6szzXbA=w701-h513-no?authuser=2\" alt=\"Download OneSignal SDK\" \/><\/noscript><\/p>\n<h1>Part 2: Quick Push Notification Setup In Ionic React<\/h1>\n<h3>Creating Your Ionic App<\/h3>\n<p>Inside your terminal, you will have to run the following command to add the Ionic project globally in your machine to use Ionic in your command line.<\/p>\n<p><code>npm install -g @ionic\/cli<\/code><\/p>\n<p>Inside your terminal, run the following command to create a new Ionic React project using the Ionic CLI. You will be asked to select a framework. Select <strong>React<\/strong>.<\/p>\n<p><code>ionic start<\/code><\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/mrxlMpTN551F2YhhRRIBzEA1Jk_uIywIpK9XdW9DUTNHHYK4Xj6UaaWnTW4qT4qW6elivWiTi2UW7wWZ38EAQpwLL004soGfyuLic6C_oqAYqpmr6QSAm1pBM816zkzgPKP7KRtJYJFP66Miq60rFtltcfRi7mSOSEpC_-e9s4JLyX-1MLTbb6tuTJLI9f6vXaEdjethG6QxHUDGDoiopuUahZBB0dLQNnGsapkHNJ3jDuUjY6b4IN9jCgdITEac4VkYRGkj8os9Y9QW4iiC8i2k7VdTloNRiRtRijCbnzypQcmvIJ2CCZF7X7OvTfRY7ll0jwRqFRbC4wic9JCqciK7ShJpLUhGuHJ_io7zF72M1qbXDIl0UosoDbha6QSi4zj3HjbE6u9Fy8a8GGMzWFkVSgjUdV44b3z4Zb2ebYX70No77wyxDpQxiwpWh4AKSGt4lGDi1TFHro3sIxcFm278SdDgJl5Jwg8l9zEtNkp_WbbK-q76vh7G508aw3HOM7l2RXjMEA4LM20yWTFioweMvFug7KjdKWFwbt-2LczEHi98pP6vn7LYIDiwdKU7eHKXsVe0Gm-tDUo1JKO4-XQluRWYwA1bp4v9djmAxDUGaH53aBcpaiaGv3yhlmeWzzCBUC8I_f7VU5ACfdM80m_FNnS5rL1bJ_OLKGxk0Ozr81THzRmz8hPMYjgdP3M7Liv10vd3MRaDPYbT8mvzmUw=w1055-h274-no?authuser=2\" alt=\"Ionic start pick a framework\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/mrxlMpTN551F2YhhRRIBzEA1Jk_uIywIpK9XdW9DUTNHHYK4Xj6UaaWnTW4qT4qW6elivWiTi2UW7wWZ38EAQpwLL004soGfyuLic6C_oqAYqpmr6QSAm1pBM816zkzgPKP7KRtJYJFP66Miq60rFtltcfRi7mSOSEpC_-e9s4JLyX-1MLTbb6tuTJLI9f6vXaEdjethG6QxHUDGDoiopuUahZBB0dLQNnGsapkHNJ3jDuUjY6b4IN9jCgdITEac4VkYRGkj8os9Y9QW4iiC8i2k7VdTloNRiRtRijCbnzypQcmvIJ2CCZF7X7OvTfRY7ll0jwRqFRbC4wic9JCqciK7ShJpLUhGuHJ_io7zF72M1qbXDIl0UosoDbha6QSi4zj3HjbE6u9Fy8a8GGMzWFkVSgjUdV44b3z4Zb2ebYX70No77wyxDpQxiwpWh4AKSGt4lGDi1TFHro3sIxcFm278SdDgJl5Jwg8l9zEtNkp_WbbK-q76vh7G508aw3HOM7l2RXjMEA4LM20yWTFioweMvFug7KjdKWFwbt-2LczEHi98pP6vn7LYIDiwdKU7eHKXsVe0Gm-tDUo1JKO4-XQluRWYwA1bp4v9djmAxDUGaH53aBcpaiaGv3yhlmeWzzCBUC8I_f7VU5ACfdM80m_FNnS5rL1bJ_OLKGxk0Ozr81THzRmz8hPMYjgdP3M7Liv10vd3MRaDPYbT8mvzmUw=w1055-h274-no?authuser=2\" alt=\"Ionic start pick a framework\" \/><\/noscript><\/p>\n<p>When asked to enter a project name, you can enter whatever name you\u2019d like. In my example, I named the project \u200b\u200b<strong>OneSignal-Ionic<\/strong>.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/8GF5MUlRNtYZEaKg-lQZhLBwBjj7W9ffgJUzzyX2gNZ-5MBA3PIWJoIs0WxeNfITfnOFts3UvExFLCXtYCqUSfOvKa75t9Q80Fp8whduGLomz1txACD-vLigeO9Ap64NxSm6ndhOIxITCyED6e7gQ8ozL8Yjr2KjG2rjoDkyzr5tWAFNfOCDeBetQWTfxQY8_y5YqQCw82P7ij8tBEVSKUZALAbsN-rU0eyaQqeYFUBZPkrpGid7uHV6H3ph5c3Nutf-DvL0nXD0U1oDMyTnf7IKsmKWEX-tBIejx9nyw6y61slHfWSNu0F5LRW72Lk4OqaAv02QXzGDuyrYkQBUEKsYb44y2Uu_f3i-VP15FQ-GaDDYjE38iOAGRA2qnbnSBH2sEgLgQvuPcWLg0xEKjVrPi3Rr3HqMaST38bhLW8u2PkTfwV09X6ANcY_pa_9eDv6ZTo36vvSOmQlLwIAb14TrE3bHCHsoYFPlrgnlZEWkc7a82tRfOIl1krUauLJJMqacxCBnzmoRw7aMR1KBr6TG84QVLuwmJxYX65-BDesXtIgfUruhXzCTQejnVSU3rmbVQf1vzTzDKWjDb-YdEs8B9CXLbWXkGAmX9Ld1CS69o459stvODHhxqpuhgBNB2ieosisaRCJSKxOIdITEpSzD6nzGi17eXXG_-dqlr1fDkBklpssSVACXZEzVjAHf68xd0m3TcWsgK3cAxrQ1C9U=w1051-h178-no?authuser=2\" alt=\"Ionic start, enter project name\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/8GF5MUlRNtYZEaKg-lQZhLBwBjj7W9ffgJUzzyX2gNZ-5MBA3PIWJoIs0WxeNfITfnOFts3UvExFLCXtYCqUSfOvKa75t9Q80Fp8whduGLomz1txACD-vLigeO9Ap64NxSm6ndhOIxITCyED6e7gQ8ozL8Yjr2KjG2rjoDkyzr5tWAFNfOCDeBetQWTfxQY8_y5YqQCw82P7ij8tBEVSKUZALAbsN-rU0eyaQqeYFUBZPkrpGid7uHV6H3ph5c3Nutf-DvL0nXD0U1oDMyTnf7IKsmKWEX-tBIejx9nyw6y61slHfWSNu0F5LRW72Lk4OqaAv02QXzGDuyrYkQBUEKsYb44y2Uu_f3i-VP15FQ-GaDDYjE38iOAGRA2qnbnSBH2sEgLgQvuPcWLg0xEKjVrPi3Rr3HqMaST38bhLW8u2PkTfwV09X6ANcY_pa_9eDv6ZTo36vvSOmQlLwIAb14TrE3bHCHsoYFPlrgnlZEWkc7a82tRfOIl1krUauLJJMqacxCBnzmoRw7aMR1KBr6TG84QVLuwmJxYX65-BDesXtIgfUruhXzCTQejnVSU3rmbVQf1vzTzDKWjDb-YdEs8B9CXLbWXkGAmX9Ld1CS69o459stvODHhxqpuhgBNB2ieosisaRCJSKxOIdITEpSzD6nzGi17eXXG_-dqlr1fDkBklpssSVACXZEzVjAHf68xd0m3TcWsgK3cAxrQ1C9U=w1051-h178-no?authuser=2\" alt=\"Ionic start, enter project name\" \/><\/noscript><\/p>\n<p>Later you will be asked to select a template, feel free to select the template that you want. In my example, I selected <strong>tabs<\/strong>.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/nySArFm-d1eu779FhDL49UQsiREHaxPD9uMFKAhKgC7_QNfZ3rpWB-IlOsgn-ig0vpO5HGnnjBbvHHdhVljFGuxQ783ln72RA_goQvussoH32zUpkogi1QJ8Q9IAGP-_q1ayEg0xNuuWLBpIYAe-b7fnt3fSUjqBWlyil7v5OuW0Voo7_3Sz7FqU77HsXkpnOG3FRHlBmiHkMG09FbWN-253zjavdeuPD0F0ciJlAyXPCPKy84MFMGto8LJkuZ-vBWBjWdxjs-Jf7U-ICNomNDmZoyFZay-_k9bMpT0R5dParpgI21cDQO2KFriuKg0EjS70DHCk6hHQ40KKk6q7HVavCQN6S6GjJQym-EubPaa5ghr_wPh1nZi7PSBumLlzpoVOSMQJmSMCuZkdSmgjT5qSJJ0t80hMJZEoNB9QSDpK1J-_0JUmnDBJw0EPI2sJi9AEA86g_jenYiLZ82ZRHdsrsh_rNXC04u4NHuLE92GZPAff0ykCAgEw-BIu3myWN9IE5hoFCz4vjeRQu_QD7bGZcFUrgAsF3mAm-KfUJjMkbuknJeOXMn2mvQcNGc42r4Nyn_dpHuuV-Dbq_qG0iQigY2rRXrIBR3gHBbu-xSje6qHv4UAFUtoBBkoUnWUOclRN34WyOXHFFRw44wTBqOxcPOfjd6eFQYSBciKqDilt0kUzIFXiYihA0UYAvePbdzFG4mSeuQppLstV3mY5Kr8=w1051-h178-no?authuser=2\" alt=\"Ionic start select template\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/nySArFm-d1eu779FhDL49UQsiREHaxPD9uMFKAhKgC7_QNfZ3rpWB-IlOsgn-ig0vpO5HGnnjBbvHHdhVljFGuxQ783ln72RA_goQvussoH32zUpkogi1QJ8Q9IAGP-_q1ayEg0xNuuWLBpIYAe-b7fnt3fSUjqBWlyil7v5OuW0Voo7_3Sz7FqU77HsXkpnOG3FRHlBmiHkMG09FbWN-253zjavdeuPD0F0ciJlAyXPCPKy84MFMGto8LJkuZ-vBWBjWdxjs-Jf7U-ICNomNDmZoyFZay-_k9bMpT0R5dParpgI21cDQO2KFriuKg0EjS70DHCk6hHQ40KKk6q7HVavCQN6S6GjJQym-EubPaa5ghr_wPh1nZi7PSBumLlzpoVOSMQJmSMCuZkdSmgjT5qSJJ0t80hMJZEoNB9QSDpK1J-_0JUmnDBJw0EPI2sJi9AEA86g_jenYiLZ82ZRHdsrsh_rNXC04u4NHuLE92GZPAff0ykCAgEw-BIu3myWN9IE5hoFCz4vjeRQu_QD7bGZcFUrgAsF3mAm-KfUJjMkbuknJeOXMn2mvQcNGc42r4Nyn_dpHuuV-Dbq_qG0iQigY2rRXrIBR3gHBbu-xSje6qHv4UAFUtoBBkoUnWUOclRN34WyOXHFFRw44wTBqOxcPOfjd6eFQYSBciKqDilt0kUzIFXiYihA0UYAvePbdzFG4mSeuQppLstV3mY5Kr8=w1051-h178-no?authuser=2\" alt=\"Ionic start select template\" \/><\/noscript><\/p>\n<h3>Adding OneSignal To Your Ionic Application<\/h3>\n<p>In your Ionic project folder, navigate to the public folder and locate the <strong>SDK files you downloaded<\/strong> on your computer and <strong>insert<\/strong> them inside your Ionic app\u2019s <strong>public<\/strong> folder.<\/p>\n<p>If you need to, you can re-download the <a href=\"https:\/\/www.google.com\/url?q=https:\/\/www.google.com\/url?q%3Dhttps:\/\/github.com\/OneSignal\/OneSignal-Website-SDK\/releases\/download\/https-integration-files\/OneSignal-Web-SDK-HTTPS-Integration-Files.zip%26sa%3DD%26source%3Deditors%26ust%3D1628702959272016%26usg%3DAOvVaw20AWvJUAnZOK45U66QbMzI&amp;sa=D&amp;source=editors&amp;ust=1628797158235000&amp;usg=AOvVaw297U7nxBGRFEMWyullCqd5\">OneSignal SDK files<\/a>.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh6.googleusercontent.com\/k2BoFHAeerxCWiMuXotSISlVC_ztUaUj2_PDGwRpdsSTSkz3PB3fpE79wcWMWLusvRhihDnZvQVU-DbTcoIsPXB68UUcY1Vto3QasIAShwv2CXS66_3fY_kUNHH-BLrji3qMd90X=s0\" alt=\"ionic project structure\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/k2BoFHAeerxCWiMuXotSISlVC_ztUaUj2_PDGwRpdsSTSkz3PB3fpE79wcWMWLusvRhihDnZvQVU-DbTcoIsPXB68UUcY1Vto3QasIAShwv2CXS66_3fY_kUNHH-BLrji3qMd90X=s0\" alt=\"ionic project structure\" \/><\/noscript><\/p>\n<h4>Install React-OneSignal NPM package<\/h4>\n<p>Inside your project folder, open your terminal and run the following command to install the <a href=\"https:\/\/www.npmjs.com\/package\/react-onesignal\">React OneSignal NPM<\/a> package.<\/p>\n<pre><code class=\"language-javascript\">npm i react-onesignal\n<\/code><\/pre>\n<p>After you have successfully installed the npm package, open your <strong>App.tsx<\/strong> file, you will enter the following line of code at the top of the file:<\/p>\n<pre><code class=\"language-javascript\">import OneSignal from &quot;react-onesignal&quot;;\n<\/code><\/pre>\n<p>The code above will make the OneSignal object accessible and will allow you to have access to the OneSignal SDK properties.<br \/>\nIn the same file, we will create a <code>useEffect<\/code> hook. This hook will have the initialization code needed to trigger OneSignal. Remember to add the dependency array <code>[]<\/code> to your <code>useEffect<\/code> hook. The <a href=\"https:\/\/www.npmjs.com\/package\/react-onesignal\">init()<\/a> method from OneSignal can only be called once and the dependency array will help us to avoid that the <code>useEffect<\/code> gets triggered multiple times firing the <code>init()<\/code> method.<\/p>\n<pre><code class=\"language-javascript\">useEffect(() =&gt; {\n   OneSignal.init({\n     appId: &quot;YOUR-APP-ID-HERE&quot;\n   });\n }, []);\n<\/code><\/pre>\n<p>In the <strong>appId propety<\/strong> insert the OneSignal <strong>App ID<\/strong> you saved somewhere in your computer.<\/p>\n<h3>Allowing Web Push Notifications<\/h3>\n<p>Run the Ionic app and visit your website. You should see the following prompt appear after your chosen time delay interval:<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/7n5PUtIEHtufQTpmNyD69T5tNkch88yVK2YLNcXwx7-iRUEgO0_eiEGbM7rrC-PG0EzhUi8xHk5LOLVzAz4aW2GZGL_xCiCF2M0IhsgNmMITGn1DKD981czqlHqyg1grjKi0TOYw3ZIfv0qjH8qqIrrbuSh_WLUtyNysszYq2bSxgwkedQZexFwrAL5qDHlMVTSM51iS9RM5PlKQfv1_SGGZHdKmSy38TvCpMaOFVNpWZREGgQAz9-ZU4NolWVHjrKyqQAf7Yn0MnNWYRMbHNRaCvofd5wcnN4RxH9wPyf0zrQgh6hEsUonMZJH-JdEMWNIvTaKWVLqi49cDBLSHGw-Q2Ovs4e1jt7zRlsWqaAaOYqiWpW42ARwinLea6T4u7dNNt_WdJelZiHp7UjpR1p7ukHFs32zgGjKG8Bxs3uOq2C7sGDeKw_uP8LBafmtjl4ZC0VXkJ3bp8tN3F6cU7osKvWXRlmPuPyrNJiOg5i-Gt5n7rN4oMT7jlz-GE4bZChAAsl4LrQ9cJwqui7v8_E52QI9K8zvdQdvobSqjDjmuuLXqVOFepaeFDpFK9anhP4kkUTFYlubH-cczAyKWOL7T0WrE7f8EfejzW8qB3I48lh9hin5rICLEA1M729Zv0t1Qzab1CLjfj6oGEZOHZa2v-V7Djf8Byc76DYxXplWZwp0l2mwdIKr3etQ5KZqgWuF_QmxDsa1HXHOftw_hRwU=w667-h260-no?authuser=2\" alt=\"OneSingal Subscribe prompt\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/7n5PUtIEHtufQTpmNyD69T5tNkch88yVK2YLNcXwx7-iRUEgO0_eiEGbM7rrC-PG0EzhUi8xHk5LOLVzAz4aW2GZGL_xCiCF2M0IhsgNmMITGn1DKD981czqlHqyg1grjKi0TOYw3ZIfv0qjH8qqIrrbuSh_WLUtyNysszYq2bSxgwkedQZexFwrAL5qDHlMVTSM51iS9RM5PlKQfv1_SGGZHdKmSy38TvCpMaOFVNpWZREGgQAz9-ZU4NolWVHjrKyqQAf7Yn0MnNWYRMbHNRaCvofd5wcnN4RxH9wPyf0zrQgh6hEsUonMZJH-JdEMWNIvTaKWVLqi49cDBLSHGw-Q2Ovs4e1jt7zRlsWqaAaOYqiWpW42ARwinLea6T4u7dNNt_WdJelZiHp7UjpR1p7ukHFs32zgGjKG8Bxs3uOq2C7sGDeKw_uP8LBafmtjl4ZC0VXkJ3bp8tN3F6cU7osKvWXRlmPuPyrNJiOg5i-Gt5n7rN4oMT7jlz-GE4bZChAAsl4LrQ9cJwqui7v8_E52QI9K8zvdQdvobSqjDjmuuLXqVOFepaeFDpFK9anhP4kkUTFYlubH-cczAyKWOL7T0WrE7f8EfejzW8qB3I48lh9hin5rICLEA1M729Zv0t1Qzab1CLjfj6oGEZOHZa2v-V7Djf8Byc76DYxXplWZwp0l2mwdIKr3etQ5KZqgWuF_QmxDsa1HXHOftw_hRwU=w667-h260-no?authuser=2\" alt=\"OneSingal Subscribe prompt\" \/><\/noscript><\/p>\n<p>Click on the blue Subscribe button and click Allow in the following native prompt that appears to enable web push notifications on your browser.<\/p>\n<p><strong>Note: Refresh the Ionic app in your browser, if you don\u2019t see the service worker registered after doing these steps.<\/strong><\/p>\n<h3>Sending Web Push Notifications<\/h3>\n<p>It\u2019s time to send your first web push notification! To do so, log in to your OneSignal account and navigate to the <strong><em>Dashboard<\/em><\/strong> tab. On the dashboard page, click on the blue button that says <strong><em>New Push<\/em><\/strong>.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh4.googleusercontent.com\/wq-Y9uZ2v1EH9JR9qHyNHOFHZO9Cc_s3EtV1qqmKDpbOc32P7SgDcZkPYWzss0B1dMr8YaqG4z1Nyn2t-BngUOJzQ7WEeU3VCH1VDjLBlpU890_u2_UyZrQO9qZidW0qCpKtye62=s0\" alt=\"OneSignal Dashboard\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/wq-Y9uZ2v1EH9JR9qHyNHOFHZO9Cc_s3EtV1qqmKDpbOc32P7SgDcZkPYWzss0B1dMr8YaqG4z1Nyn2t-BngUOJzQ7WEeU3VCH1VDjLBlpU890_u2_UyZrQO9qZidW0qCpKtye62=s0\" alt=\"OneSignal Dashboard\" \/><\/noscript><\/p>\n<p>You will be redirected to a new window that will allow you to customize your push notification. Under <strong><em>Audience<\/em><\/strong>, make sure that <strong><em>Send to Subscribed Users<\/em><\/strong> is selected. Then, create your message by adding your message title, content, and image. Because this is the first notification your subscribers will receive, you may choose to craft a simple welcome message to confirm that they&#8217;ve been subscribed and reinforce the value that notifications will provide.<\/p>\n<p>Under the <strong><em>Delivery Schedule<\/em><\/strong> section, select <strong><em>Immediately<\/em><\/strong> and <strong><em>Send to<\/em><\/strong> everyone at the same time to send to all your current web push subscribers. If you have just finished setting up your OneSignal account, chances are you&#8217;re the first and only subscriber. If your app or website is heavily trafficked and other users have already opted in to receive push notifications, you may want to select Send to a particular segment(s) to test your message out on a specific audience. When you&#8217;re ready to send your message, click on the blue <strong><em>Review and Send button<\/em><\/strong> at the bottom of the screen.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/8lreV8cC6jLllgnd6U55hIRwMAp99aM_tbQl3n5owqzw6iEecQwJIJN6D__1dxd74HyCdu4Ai4wfgcRpkKe69wEALoVbTw7Dpv6EPfKRodU--EvvlX54Upg9W_rI1eyykgS0NOkL7e3QfUqIO7fFzAUSQ2jAiSt6C--zskUngsbLkNsSUuSwfw8yjrMWql0g1ceeZ9BxYFvNniUZm7KUMFDttvogoujhtb5hZgppn9VCAyBEwW5HQNYoU5r7TaY6p8hlYRlIMve9INhmuPJxEEvmsZssGrvoH7rgAWwUiS99H1OuFZK4PS9c5gb24QgmIxVFwUUwUfeodDnwC_BYFVrj_Lmo6lO7W9VBBnNugpcx5h3KKvTN9lvE1sq_XDhPUgWN6UuvZe6mflbfPgiim4w6Vcs2LBt_MH8AB4IPwJpUJ5N_8yYLlQwLf6cvOD3-6-0dlPTn8oJcQI3-X8U4dCir-_hyn0unP8PEP5stSV5sMlYE-rGwtdEJLO0pkmEwtyeuKbToqJ-WrSBV4Vj5pDpT7LJgHtCYF5feW-8C2NuQMx4mL47ndPwVRhYlmFgAXB7gMhNYRDb_WGY-NPJI0Bo1Xy5ldbXLoIaqS0M9_01o3o8ETEVzWg4TtlDtiCN4-jEmLm7BduuRy_quGfHdMatex-0r3lOMGPmco5wV0tsM_rUr5EzXC8DyHmiSGukJao_6LbfKOuUGNuHe-tjY-zA=w686-h969-no?authuser=2\" alt=\"Send OneSignal Push Notification\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/8lreV8cC6jLllgnd6U55hIRwMAp99aM_tbQl3n5owqzw6iEecQwJIJN6D__1dxd74HyCdu4Ai4wfgcRpkKe69wEALoVbTw7Dpv6EPfKRodU--EvvlX54Upg9W_rI1eyykgS0NOkL7e3QfUqIO7fFzAUSQ2jAiSt6C--zskUngsbLkNsSUuSwfw8yjrMWql0g1ceeZ9BxYFvNniUZm7KUMFDttvogoujhtb5hZgppn9VCAyBEwW5HQNYoU5r7TaY6p8hlYRlIMve9INhmuPJxEEvmsZssGrvoH7rgAWwUiS99H1OuFZK4PS9c5gb24QgmIxVFwUUwUfeodDnwC_BYFVrj_Lmo6lO7W9VBBnNugpcx5h3KKvTN9lvE1sq_XDhPUgWN6UuvZe6mflbfPgiim4w6Vcs2LBt_MH8AB4IPwJpUJ5N_8yYLlQwLf6cvOD3-6-0dlPTn8oJcQI3-X8U4dCir-_hyn0unP8PEP5stSV5sMlYE-rGwtdEJLO0pkmEwtyeuKbToqJ-WrSBV4Vj5pDpT7LJgHtCYF5feW-8C2NuQMx4mL47ndPwVRhYlmFgAXB7gMhNYRDb_WGY-NPJI0Bo1Xy5ldbXLoIaqS0M9_01o3o8ETEVzWg4TtlDtiCN4-jEmLm7BduuRy_quGfHdMatex-0r3lOMGPmco5wV0tsM_rUr5EzXC8DyHmiSGukJao_6LbfKOuUGNuHe-tjY-zA=w686-h969-no?authuser=2\" alt=\"Send OneSignal Push Notification\" \/><\/noscript><\/p>\n<p>A small pop-up will appear for you to review your message. Once you are satisfied, click on the blue <strong><em>Send Message<\/em><\/strong> button. You should receive a web push notification on your device! \ud83d\ude80<\/p>\n<p>Now, you can keep expanding your code to make use of different features of the OneSignal NPM across your React app by passing the <code>OneSignal<\/code> variable to different components. You can also use the <a href=\"https:\/\/documentation.onesignal.com\/docs\/web-push-custom-code-setup\">custom code setup<\/a> to modify the configurations of the prompt inside your React application without using the OneSignal dashboard. To learn more about the Web Push SDK visit our web push <a href=\"https:\/\/documentation.onesignal.com\/docs\/web-push-sdk\">SDK documentation<\/a>.<\/p>\n<p>To learn more about the Web Push SDK visit our web push <a href=\"https:\/\/www.google.com\/url?q=https:\/\/documentation.onesignal.com\/docs\/web-push-sdk&amp;sa=D&amp;source=editors&amp;ust=1628797158242000&amp;usg=AOvVaw2NYdIfZ-OR2n7wSD3n6oM3\">SDK documentation<\/a>. Still, have questions? <a href=\"https:\/\/www.google.com\/url?q=https:\/\/github.com\/OneSignal\/&amp;sa=D&amp;source=editors&amp;ust=1628797158242000&amp;usg=AOvVaw2xgGsUidXzlxknQEXio4yC\">Connect with us<\/a> on GitHub or email us at <a href=\"mailto:support@onesignal.com\">support@onesignal.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is guest blog post from Pato Vargas, Developer Advocate at OneSignal. It\u2019s no secret that push notifications can help you engage and retain app users. This tutorial will show you how to integrate with OneSignal to leverage push notifications in your ReactJS app.<\/p>\n","protected":false},"author":5,"featured_media":3942,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"28","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"537584","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/adding-push-notifications-to-your-ionic-react-app\/217836","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,124],"tags":[234,233,232,136],"class_list":["post-3918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-tutorials","tag-notifications","tag-onesignal","tag-push-notifications","tag-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Push Notifications to Your Ionic React App - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Push notifications can help you engage and retain users. This tutorial will show you how to integrate with OneSignal to leverage push notifications in your ReactJS app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Push Notifications to Your Ionic React App\" \/>\n<meta property=\"og:description\" content=\"Push notifications can help you engage and retain users. This tutorial will show you how to integrate with OneSignal to leverage push notifications in your ReactJS app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-29T18:12:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T17:04:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"Adding Push Notifications to Your Ionic React App\",\"datePublished\":\"2021-11-29T18:12:06+00:00\",\"dateModified\":\"2023-07-18T17:04:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app\"},\"wordCount\":1244,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png\",\"keywords\":[\"Notifications\",\"OneSignal\",\"Push Notifications\",\"react\"],\"articleSection\":[\"All\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app\",\"url\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app\",\"name\":\"Adding Push Notifications to Your Ionic React App - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png\",\"datePublished\":\"2021-11-29T18:12:06+00:00\",\"dateModified\":\"2023-07-18T17:04:33+00:00\",\"description\":\"Push notifications can help you engage and retain users. This tutorial will show you how to integrate with OneSignal to leverage push notifications in your ReactJS app.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Push Notifications to Your Ionic React App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Adding Push Notifications to Your Ionic React App - Ionic Blog","description":"Push notifications can help you engage and retain users. This tutorial will show you how to integrate with OneSignal to leverage push notifications in your ReactJS app.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app","og_locale":"en_US","og_type":"article","og_title":"Adding Push Notifications to Your Ionic React App","og_description":"Push notifications can help you engage and retain users. This tutorial will show you how to integrate with OneSignal to leverage push notifications in your ReactJS app.","og_url":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app","og_site_name":"Ionic Blog","article_published_time":"2021-11-29T18:12:06+00:00","article_modified_time":"2023-07-18T17:04:33+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png","type":"image\/png"}],"author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"Adding Push Notifications to Your Ionic React App","datePublished":"2021-11-29T18:12:06+00:00","dateModified":"2023-07-18T17:04:33+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app"},"wordCount":1244,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png","keywords":["Notifications","OneSignal","Push Notifications","react"],"articleSection":["All","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app","url":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app","name":"Adding Push Notifications to Your Ionic React App - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png","datePublished":"2021-11-29T18:12:06+00:00","dateModified":"2023-07-18T17:04:33+00:00","description":"Push notifications can help you engage and retain users. This tutorial will show you how to integrate with OneSignal to leverage push notifications in your ReactJS app.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/adding-push-notifications-to-your-ionic-react-app#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Adding Push Notifications to Your Ionic React App"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/ionic-onesignal-notifications-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3918"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3918\/revisions"}],"predecessor-version":[{"id":5178,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3918\/revisions\/5178"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3942"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}