Start Free trial

Articles in this section

See more →

Configure Wingify Engage For Safari Notifications

Shweta Ajwani
  • Updated
Share:
close this to read article

This article covers the following:

Overview

Wingify Engage (formerly PushCrew) now supports Safari on Mac for web push notifications. This article describes the steps to configure it.

Prerequisites

  • Apple Developer Account: The fee for this is $99/year paid directly to Apple. If you do not have this already, you can create one here.
  • A computer running MacOS.

Points to Remember

  1. The Safari opt-in will only work on all pages of the domain highlighted in the image below. If it is not the correct URL, please get it updated by emailing support@pushcrew.com.

    test.png

  2. Create different CER/P12 files for different sub-accounts. Uploading the same files for different sub-accounts will show an error.
  3. Icon Requirements are as below :
    1. Must be in PNG format
    2. Should be less than 1 MB in size
    3. Dimensions must be greater than or equal to 256x256 px
    4. The DPI should be 72
  4. Delivery tracking in Safari works differently than on Chrome or Firefox. Apple only lets us track the delivery till the notification reaches APNS (Apple Push Notification Service) Servers. Post that, we do not get any delivery tracking data. APNS is based on Apple Servers, and Apple doesn't give any guarantee on successful message delivery.
  5. Safari notifications will only work on desktops. Apple does not support mobile website push notifications on iOS yet.

Configure Safari

  1. Log in to your Wingify Engage account. Go to Settings -- SmartCode.
  2. Scroll down to the ‘Browser Configuration’ section. Click on the ‘Configure’ button next to Safari.
  3. Your sub-account and URL will be pre-filled in the modal box.

Now, there are 2 ways in which Safari can be configured:

  1. using a CER file or
  2. using a P12 file If you are used to creating P12 files (these are used for iOS push notifications too), you can use the P12 option. If not, you can use the CER option.

Configure Safari Using a CER File

  1. Click on the ‘Download CSR’ button. Save the file on your computer.
  2. Log in to your Apple Developer Account.
  3. Click on ‘Website Push IDs’. Then click on the ‘continue’ button at the top right.

  4. Click Identifiers +.

    You will see a page to register your Website Push ID. Enter a description or the ID. This can be anything. We have used ‘wingify’ as an example.

    Also, enter the name of the ID. This should ideally be in the format web.com.yourdomainname. In our example, wingify is the domain name, so the ID name will be ‘web.com.wingify’

  5. Click the Continue button once you have entered the Description and ID, and click Register.

    This page will ask you to confirm if your Website Push ID information is correct. Check the information and click Register.

  6. Click on Identifiers, then click Certificates + button.
  7. Select ‘Website Push ID Certificate’. Click on the Continue button.
  8. You will now see a drop-down to select your ‘Website Push ID’. Select the one created previously. In this example, we created the ID ‘web.com.wingify’. You will have to select the one that you have created. Once selected, click the Continue button.
  9. Upload the CSR file you downloaded in Step 1 from your Wingify Engage dashboard here. Click the Continue button.
  10. Your CER file will now be generated. Click on the Download button and save it to your computer.
  11. Go back to your Wingify Engage dashboard. In the modal box that opens when you click on Configure next to Safari, click on Upload Certificate under CER. Select the certificate that you downloaded from your Apple Developer Account and upload it.

  12. Next, upload your icon. This icon will show to subscribers every time they receive a Safari notification.

    Note: This icon cannot be changed. It has to be 256 x 256 px or more. The file must be less than 1 MB.
  13. Once done, click Save.

  14. You will now see a message saying ‘Safari configured correctly’. Also, Configured will appear next to Safari in the Browser Configuration section.

    You are now set to support Safari web push notifications on Wingify Engage. Your opt-in will look like this.

    last.png

Configure Safari Using a P12 file

  1. On your Mac, search for Keychain Access and open the application. Click Keychain Access in the menu bar > Certificate Assistant > Request a Certificate from a Certificate Authority.
  2. In the modal box that opens, enter a valid email address, select the Saved to disk option, and click Continue.
  3. Save the file to your computer. Once saved, you will see a confirmation message as below. Click Done.
  4. Log in to your Apple Developer Account.
  5. Click on Certificates, IDs & Profiles on the left-hand side.

  6. On the left-hand side, under Identifiers, click on Website Push IDs. Then click on the ‘+’ button at the top right.

    You will see a page to register your Website Push ID. Enter a Description for the ID. This can be anything. We have used ‘pushcrew123’ as an example. Also, enter the name of the ID. This should ideally be in the format web.com.yourdomainname. In our example, pushcrew123 is the domain name, so the ID name will be ‘web.com.pushcrew123’.

  7. Click on the Continue button once you have entered the Description and ID.

    The page will ask you to confirm if your Website Push ID information is correct. 

  8. Check the information and click on Register. On the next page, click on Done.
  9. On the left-hand side, click All under Certificates. Click on the + button on the top right.
  10. Scroll down to the Production section. Select Website Push ID Certificate’.Scroll down and click on the Continue button.
  11. You will now see a drop-down to select your Website Push ID. Select the one created previously. In this example, we created the ID ‘web.com.pushcrew123’. You will have to select the one that you have created. Once selected, click the Continue button.
  12. Click Continue on the next page.
  13. Upload the CSR file you generated using Keychain Access previously. Click Continue.
  14. Your CER file will now be generated. Click the Download button and save it to your computer. Click Done.
  15. Double-click the downloaded CER file to open it in Keychain Access. Right-click on the file and select Export Website Push ID…
  16. Save the file on your computer.

  17. You will now see an option to enter a password. Enter a password and verify it. This is optional and you can choose to skip it.

    You will now be asked to enter your computer password. Click on Allow.

  18. The P12 file will now be saved to your computer. Go back to your Wingify Engage dashboard. In the modal box that opens when you click Configure next to Safari, click Upload Certificate under P12. Select the certificate that you just downloaded from your Apple Developer Account and upload it.
  19. If you have entered a password in Step 15, enter the same one in the Password field.

  20. Upload your icon. This icon will show to subscribers every time they receive a Safari notification.

    Note: This icon cannot be changed. It has to be 256 x 256 px or more. The file must be less than 1 MB. Once done, click Save.

    You will now see a message saying Safari configured correctly. Also, Configured will appear next to Safari in the Browser Configuration section. You are now set to support Safari web push notifications on Wingify Engage.

Need more help?

For further assistance or more information, contact Wingify Support.

Was this article helpful?

Return to top

Related articles