<center>https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-00th.jpg</center> <br/><p>Are you ready to start popping <em>Safari</em> push notifications like this up in the <em>Safari</em> web browser to bring users back to your website over and over again?</p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/VVQ5Q2eQzDY
</div></figure>
<h2>Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!</h2>
<p>If you will enjoy reading and contributing to the discussion for this post, will you please <a href="https://jerrybanfield.com/shop/university/">join my <em>Jerry Banfield University</em></a> and leave a comment on the <em>Forum</em> because I read and respond to most comments?</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-00th.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>If you find anything helpful in this video or funny, will you please leave a like because you will feel great helping other people find it?</p>
<p>You can take the full course named <strong><em>“My WordPress Course for a Fast Ecommerce Website with Kinsta, Astra, WooCommerce, and LearnDash”</em></strong> at <a href="https://jerrybanfield.com/courses/wordpress/"><em>https://jerrybanfield.com/courses/wordpress/</em></a></p>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background has-light-green-cyan-background-color" href="https://jerrybanfield.com/courses/wordpress/">View WordPress &amp; LearnDash Course</a></div>
<p></p>
<p>I am so excited, I've got these set up now on <em>Safari</em> on desktop. </p>
<p>When you go to my website, you will be able to see them working for real and I hope you'll hit those notifications and get the newest posts from me. </p>
<p>What we'll do here is show you everything you need to know to learn about this, get it set up and decide is it worth your time? </p>
<p><a href="https://pushalert.co/"><em>PushAlerts</em></a> or web push notifications are one of the new marketing tools for <em>2020</em> I'm really excited about. </p>
<p>They've been around technically for a little while, but they're getting popular now and they do these notifications like this to bring users back whenever you've got a new post or something you want to share, a product that was put in a cart and abandoned, these are a great way to bring people back to the website over and over again.</p>
<p>The first key question is, is it worth the additional time and money to set these up in <em>Safari</em> and <a href="https://jerrybanfield.com/pushalert-tutorial/">the last post I did</a>, I looked at setting these up in <em>Google Chrome</em> and I'll briefly show how to do that.</p>
<p>It's so quick and easy to set these up in <em>Chrome</em> and it works on both desktop and mobile making it absolutely ideal to reach users. </p>
<p>For this reason, there are a lot of websites that already have web push notifications set up for <em>Chrome</em> and <em>Firefox,</em> which collectively is about <em>70%</em> of the market on my existing <a href="https://jerrybanfield.com/"><em>Jerrybanfield.com</em></a> website.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-01.jpg" alt="Safari Browser"/>
<p>However, <em>Safari</em> is a great opportunity with <em>20%</em> of my web traffic coming from <em>Safari.</em> A significant percentage is probably mobile.</p>
<p><em>Safari</em> desktop traffic is not nearly as competitive with notifications because of the process I'm about to show you. This was a challenging process that this will make a lot easier for you to go through.</p>
<p>I decided that it's very worth it for me to go through this process to set up these <em>Safari</em> notifications because users on <em>Safari</em> on the desktop browser are not very competitive. I've only seen maybe two or three websites in all of <em>2019</em> have a little pop up on their website.</p>
<p>Meanwhile, I've seen hundreds on <em>Google Chrome.</em></p>
<p>Thus, I think this is worth the time and I'll make this easier for you. </p>
<p>How good is this working on my website?</p>
<p>I get about a thousand visitors a day for free from all the <a href="https://jerrybanfield.com/blog/">blog posts</a> I've got up, and this is one of the fastest things I've ever seen to get subscribers. </p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-02.jpg" alt="PushAlert"/>
<p>I've got within the first week of doing this, <em>140</em> total subscribers, all using notifications. </p>
<p>Now, I've only got one from Safari that wasn't me. I've only got one from <em>Safari</em> so far. However, <em>Safari,</em> you actually have to click twice.</p>
<p>You have to click first that pop up, then that second <em>Apple</em> pop up.</p>
<p>There's a custom pop up you do on the website that then triggers this pop up.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-03.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>Thus, only <em>1%</em> of my subscribers or less at this point, not counting me are <em>Safari.</em> I've only had it up for a couple of days, whereas the <em>Chrome</em> one was up a little longer. </p>
<p>While this is a minority, I think this is likely to be a very engaged minority and here's how to set it up. </p>
<p>I'm using <a href="https://pushalert.co/"><em>PushAlerts</em></a> for this on my website because it has the ability when we check the features here to send scheduled notifications and I think that's really valuable. </p>
<p>I want to be able to schedule notifications and not just automatically put out every time I have a new post.</p>
<p>I also love being able to automatically test which of my headlines are doing the best and optimize for the ones people are clicking on.</p>
<p>Thus, I've used <a href="https://pushalert.co/"><em>PushAlerts</em></a> to do this. </p>
<p>However, the process to set these <em>Safari</em> notifications up, I imagine will be very similar on other providers besides <em>PushAlerts.</em></p>
<p>To sign up for <em>PushAlerts</em> is easy. You can do a free trial, and then click on <em>"Activate your account"</em> in order to install this on <em>WordPress.</em></p>
<p>This is required for both <em>Safari</em> and <em>Chrome,</em> but you'll see how easy the <em>Chrome</em> process is here. All you need to do is go into your website dashboard when you've just started up on <em>PushAlerts</em>, grab the code that you'll need here, keep this open, then go into the plugins, click on <em>"Add new"</em> and search for <em>PushAlerts.</em></p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-04.jpg" alt="PushAlert"/>
<p>Install that, then go to settings and just put all those keys in from the dashboard. Make sure to click on whatever content management system you're using. If you're using <em>Google Chrome</em> and <em>Firefox</em> notifications, you're done.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-05.jpg" alt="PushAlert"/>
<p>That's all you have to do. </p>
<p>As you can see, this is why so many marketers use just <em>Chrome</em> and <em>Firefox,</em> and not <em>Safari.</em></p>
<p>If you want to do <em>Safari,</em> you're going to need to read the whole rest of this. </p>
<p><em>Safari</em> requires a much more detailed process, which includes signing up for <em>Apple</em> developers, which is <em>$100</em> almost a year.</p>
<p>You might as well just bail now if you don't want to pay that. I did not see that until myself signing up, until I was so far that I was not turning back.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-06.jpg" alt="Apple developers"/>
<p>I probably should've mentioned that later.</p>
<p>The first thing you need to do is make sure you've turned on your key chain for <em>iCloud.</em> You'll need to be on your desktop <em>Mac</em> or laptop to do this, go over to the <em>iCloud</em> and make sure you've turned on Keychain.</p>
<p>Search through your spotlight for key chain access.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-07.jpg" alt="Apple developers"/>
<p>Go to keychain access. </p>
<p>Then, go to <em>"Certificate Assistant."</em></p>
<p>Click on <em>"Request a certificate from a certificate authority."</em></p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-08.jpg" alt="Apple developers"/>
<p>Once you've done that, you'll get this pop up here. </p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-09.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>I just put in my common name. </p>
<p>Yes, I spelled <em>Safari</em> wrong and I can't be bothered to hide that. </p>
<p>Once you click <em>"Continue,"</em> you'll hit <em>"Save."</em></p>
<p>Just take the signing request, hit <em>"Save,"</em> then it will be created on the disk, done.</p>
<p>That's step one of many. </p>
<p>Next, go to <em><a href="https://developer.apple.com/">https://developer.apple.com/</a></em>, this is the thing that costs <em>100</em> bucks a year. </p>
<p>Sign in with your <em>Apple ID.</em></p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-10.jpg" alt="Apple developers"/>
<p>Then, you will notice if you haven't signed up for <em>Apple</em> developers already, you will notice there is something missing in here. If you looked at other tutorials as I did, I said, <em>"Hey, I sign in. There's not the stuff in mine that there is in yours."</em></p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-11.jpg" alt="Apple developers"/>
<p>That's because I needed to download the <em>Apple</em> developer mobile app on <em>iPhone</em> and pay <em>$100</em> a year.</p>
<p>Then, I get all the stuff right here. </p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-12.jpg" alt="Apple developers"/>
<p>The benefit of this is you can use this to publish apps and if you know someone who has the <em>Apple</em> developer program set up, they could hook you up and do this for you.</p>
<p>I just went ahead and set this up myself, so I can do the tutorial. </p>
<p>What you need to do from here is click on <em>"Certificates, Identifiers &amp; Profiles."</em></p>
<p>Once you click on that, then you need an identifier and a certificate.</p>
<p>You can do all this just by clicking on <em>"Create a certificate."</em></p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-13.jpg" alt="Apple developers"/>
<p>Click on <em>"Web Push ID Certificate,"</em> out of the massive menu of things it will suggest you can do.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-14.jpg" alt="Apple developers"/>
<p>Then create a new certificate.</p>
<p>I click on <em>"Create Website Push ID."</em></p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-15.jpg" alt="Apple developers"/>
<p>I do this little description and identifier.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-16.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>They all start with <em>"web."</em> something, they suggest you do your <em>URL</em> backwards.</p>
<p>So I'll use <em>web.com.jerrybanfield.</em></p>
<p>Click <em>"Continue."</em></p>
<p>The identifier is now created. </p>
<p>This is the identifier, which I need to start with. </p>
<p>Then, I actually go down and hit <em>"Create Certificate"</em> from this identifier. </p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-17.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>I then go, and again I use that identifier that I had before. </p>
<p>Don't create two like I did. Hit <em>"Register"</em> on that identifier.</p>
<p>Then, when you're in to create the new certificate, you'll hit <em>"Choose File"</em> and take that certificate request you created earlier.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-18.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>You need the file you downloaded earlier and probably just put on your desktop, and then upload it here, click <em>"Continue."</em></p>
<p>To be clear on this process, you need an identifier, which you can create separately or you can create together.</p>
<p>You need to register the identifier, then go in after you've hit <em>"Register,"</em> then put the file in for the certificate.</p>
<p>Next, once you've registered and uploaded the file, you'll get the certificate details here and it looks like these are good for a year. </p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-19.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>You'll see the certificate type <em>"Website Push,"</em> then hit, <em>"Download."</em></p>
<p>Then you get to go back to the keychain application and the first thing you may notice, it says, <em>"This certificate is not trusted."</em></p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-20.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>That means you need to click on the certificate and manage the trust and put, <em>"Always Trust"</em> on it.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-21.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>That way, it is able to then be exported. </p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-22.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>The next thing you'll need to do is right click on it and export the website push ID, which if you just try to do it like I did in the <em>"All items,"</em> it will not have the correct file format you need for push alert.</p>
<p>The way to get around that is going down to <em>"My Certificates,"</em> click the drop-down menu, which for some reason is not there in <em>"All items,"</em> then right click on the private key in here itself.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-23.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>Then export that into the personal information exchange format. </p>
<p>If you need that <em>.p12</em> you must be in the certificate. You need to export the actual private key, not the certificate itself, which is only available when you click on <em>"My Certificates"</em> and not <em>"All items."</em></p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-24.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>Then, you're able to save this into a <em>.p12</em> file or personal information exchange file. </p>
<p>Once you've got that, now you're ready to go into the <em>PushAlert</em> dashboard to put the <em>.p12</em> certificate file into here and they have their own tutorial on it, which I identified the steps that were difficult and not highlighted in there very well, and then between the two of those you will be set.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-25.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>Then up here you need the website push ID, website name, and you can put the icon in here. </p>
<p>I put in a 256 by 256 pixel image.</p>
<p>I chose my file like that and this is my final product website, push ID, website name, and then my beautiful icon.</p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-26.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>Then it gives you a preview of what your notification request will look like when you've brought that up. </p>
<p>Once you hit <em>"Enable,"</em> it will say, <em>"Saved successfully"</em> and your notification, you can immediately go check in your own <em>Safari</em> browser and verify this is working. </p>
<p>It will look like this. </p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-27.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>Unfortunately, you need to click twice to get this to work in <em>Safari.</em> It does this custom pop up first and you need to click <em>"Allow"</em> on that. </p>
<p>Then, it has a separate button to click, <em>"Allow."</em></p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-28.jpg" alt="Safari Browser Push Notifications Setup with PushAlert in WordPress via Apple Developers!"/>
<p>You have to click both of those to actually get the push notifications.</p>
<p>The big benefit of doing this is that you then know whenever I log into my website or just <em>Safari</em>, when I opened <em>Safari</em> on any computer that I'm signed in, and then it pops up the notification that I sent, which is awesome and if I'm browsing and I send it, it'll pop up in real time. </p>
<p>A great way to bring people back that's not as competitive as <em>Google Chrome.</em></p>
<p>In <a href="https://pushalert.co/"><em>PushAlert</em></a> there's the option to look through the subscriber information and see who's actually subscribing and what browser they're in. </p>
<img src="https://jerrybanfield.com/wp-content/uploads/2020/02/NBP028-29.jpg" alt="PushAlert"/>
<p>Note that when I tested this myself, I have this location in<em> St Petersburg, the United States</em> and I've verified that it was actually working.</p>
<p>This gives me the ability to see what browser people are using and almost everyone's using <em>Chrome.</em> Although, since I put this up now three days ago already, one other person joined in <em>Safari</em> and I'm seeing signups.</p>
<p>Not that this has anything to do with that, but <em>Chrome</em> and <em>Firefox</em> work out of the box, those <em>Safari</em> signups, since they had to work so hard to click on it, I think those are very valuable, especially since so many other people don't have them. </p>
<p>Therefore, this has been a complete tutorial on how to get the web push notifications set up on <em>Safari.</em></p>
<p>Unfortunately, these do not work currently on mobile devices. </p>
<p>However, if we're lucky, maybe <em>Apple</em> will start allowing these to pop on mobile devices as well as on desktop, but currently these are only on mobile devices and these are only on the <em>Safari</em> web browser. </p>
<p>Thus, if I'm on a different web browser on my website, like the <em>Brave</em> browser, this won't pop any notification up at all. </p>
<p>Every different browser I use is a different notification, which means some users that use both <em>Chrome</em> and <em>Safari</em> on <em>Mac</em> like I do, you might actually be able to get them to subscribe for notifications on both browsers instead of just on <em>Chrome,</em> which I think is a great opportunity.</p>
<p>Thank you very much for reading this and learning how to pop these notifications up on your website.  </p>
<p>You can continue learning with us in the full class today <strong><em>“My WordPress Course for a Fast Ecommerce Website with Kinsta, Astra, WooCommerce, and LearnDash”</em></strong> at <a href="https://jerrybanfield.com/courses/wordpress/"><em>https://jerrybanfield.com/courses/wordpress/</em></a></p>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background has-light-green-cyan-background-color" href="https://jerrybanfield.com/courses/wordpress/">View WordPress &amp; LearnDash Course</a></div>
<p></p>
<p>I love you. </p>
<p>You’re awesome. </p>
<p>I appreciate the chance to serve you today and I will see you again soon.</p>
<p>Love,<br>
<em>Jerry Banfield</em></p>
<p>Edits from video transcript by <em>Michel Gerard</em> at <em><a href="http://www.michelgerardonline.com">www.michelgerardonline.com</a>.</em></p>
 <br /><center><hr/><em>Posted from my blog with <a href='https://wordpress.org/plugins/steempress/'>SteemPress</a> : https://jerrybanfield.com/safari-push-notifications/ </em><hr/></center>