Step by Step Guide on Safari (MacOS) Push Notification Certificate Update for Website with Troubleshooting

Are you using push notification in your website & you have support for Safari as well on macOS? Then to keep it running you got to update the certificate annually, as the validity of each certificate is only one year.

via GIPHY

That's exactly my situation every year. :D

Remembering exact steps to update the certificate every year is difficult until unless you have had it documented somewhere or have an eidetic memory like Mr. Sheldon Cooper here.

via GIPHY

This where this article will help you out. I'll put together a step by step guide following which you'll be able to generate APN certificate & a push package in no time. So let's get on with the ride:

Login to your apple developer account. Go to Certificates, Identifiers & Profiles
Under Certificate create a new certificate by clicking on plus icon. If you are not seeing plus icon, you don’t have privilege to add a new certificate, talk to an admin to give you that access.
Select the Website Push ID Certificate
Select one of the pushIds from the dropdown. If you don't have a pushId, you got to create that in Identifier first. But considering that you are doing an update, the identifier should be there
Now you are needed to upload a certificate
Open Keychain Access on your mac, go to Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority
Fill in your email address in the email field. Common name can be anything, but to safely distinguish I use the certificate name itself here. Choose Saved to disk & Click on Continue.
Now upload the same file, which you have created in #7 via file upload option shown in #5
Your certificate is ready now. Download it.
Go back to Keychain Access now, go to login > My Certificates section
Drag & drop the certificate that you download in #9 in to Keychain Access
Now it’ll look something like this:
If you get an error like certificate is not trusted, double click on the certificate & change trust setting like I did here 14.Next step is export the file as a .p12 file
Now certificate generation part is done, we just have to convert the .pem file. Run following command to generate .pem file out of .p12 openssl pkcs12 -in Certificates.p12 -out certificate.pem -nodes
Coming to last step now, generating the push package. Phew!!
We’ll be using a php file to generate that, which you can download from here
Change the certificate path to point to where your .p12 file is, change the output directory as you deem fit, also change the password to if you have given anything, otherwise leave it empty
Now the pushpackage would have been generated in the output folder
Replace the push package zip file with the newly generated one & you are done

Debugging if push notification doesn't work

Please ensure that you have the right files in the package. No other extra files, not even any hidden file such as .DS_Store etc..
When a user allows permission to receive push notifications, a POST request is sent to the following URL: webServiceURL/version/pushPackages/websitePushID So you can check your access log & see if you have incoming request for these or not
If you are seeing request, all good. Next is to see if there’s any error being reported by APN. If there’s any issue with the push-package then a POST request is sent to webServiceURL/version/log to report the error. In my case, I have exposed a POST route via which error can get logged in to a file & with a GET request, I can download & see
Make a GET webServiceURL/version/log to download the file & see if there’s any latest errors there, something like below:
For any error in your file, check troubleshooting link, you'll get reference to what might be causing it.

Well that's it then. Hope the certificate update doesn't seem like a herculean task anymore. Do connect with me on Linkedin if you like the article & want to see more.

Adios for now friends!~