HTTPS Push Notifications in Wix | The Only Way

Own a Wix site and are unable to use HTTPS Push Notifications? Don't worry! Let's see how to set up HTTPS Web Push notifications on your Wix Site through any platform including OneSignal, WebPushr, and more.

While setting up your Wix Website on these platforms, you will come to know Wix Websites can only use HTTP which doesn't provide all the necessary features. This is because Wix has no FTP (File Transfer Protocol) Service which is required by these platforms to upload SDK files to the top-level root of the site directory. But here's a secret trick and the only way to set it up (you won't find this method anywhere on the web). If you want an example of a Wix website with HTTPS Push notifications, then the site you are on right now is the one! So you can trust this method.

Let's get started.

I am showing you how to do it on the OneSignal Platform but you can use it anywhere you like.

1. Integration

Sign up to OneSignal to start the setup process. If you have already set up your Website, then login to your app dashboard, select your Website, click settings on the top and select All Browsers (except Safari).

Choose Integration

Enter the name of your Website and select Web Push. Next: Configure your Platform. Choose Typical Site (Don't choose Website builder). That might look weird but trust me that's the trick!

Configure Web Push

2. Site Setup

Now it's time to enter your site details.

1. Site Name - Enter your site name as it is.

2. Site URL - Enter your site URL in the form of https://www.tuberelevant.com Make sure to include https:// and www.

3. Auto Resubscribe - It's your choice. Turn it on (recommended).

4. Icon - Upload your site's icon. It will be displayed in the prompt.

Don't turn on My site is not fully HTTPS because we are setting up HTTPS.

Customize your Permission Prompt Setup and Welcome Notification as your needs.

3. Service Workers

Now you need to turn on Service Workers in the Advanced Section. Then, fill in the details as follows:

Path to service worker files /_functions/

Main service worker filename OneSignalSDKWorkerjs

Updater service worker filename OneSignalSDKWorkerjs

Service worker registration scope /_functions/

Service Workers Customization

Note: Don't change the information while pasting the text.

Click the Save button

4. Editor (Velo Dev mode)

Now we need to add our service worker to make it accessible from https://yoursite.com/_functions/OneSignalSDKWorkerjs

To do so, we need to go to our Wix Editor. Turn on Velo Dev Mode, go to Code Files, Create a new .js File, and name it http-functions It will only work if the file name is http-functions.js, so be careful.

Paste this code (given below) in the file. Note: If you are using a platform other than OneSignal like PushEngage, WebPushr, Subscriber, etc, you need to change the value of OneSignalSDKWorkerjs. Download the SDK file provided by the platform and open it using notepad or any other text editor. If there are multiple files, open the very first file. Copy its text and paste it inside the quotation marks by replacing 'importScripts.....js');' You don't need to change the code if you are using OneSignal.

import {ok, notFound, serverError} from 'wix-http-functions';

let OneSignalSDKWorkerjs = `importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');`

export function get_OneSignalSDKWorkerjs(request) {

 let options = {

 "headers": {

 "Content-Type": "application/javascript"

        },

 "body": OneSignalSDKWorkerjs

    };

 return ok(options);

}

Watch the video below to see how to do it in the Wix Editor.

5. Pasting the HTML Codes in Tracking tools

Go to Wix Dashboard and search for tracking tools. Open it and click Add Custom Code in the top right. Paste this code and name it HTTP Header. Click All Pages or choose the pages where you want the prompt to appear. Click Save. If you don't use OneSignal, then you may need to find the HTTP Header Code of that platform and paste that and not this.

<script>
var OneSignal = OneSignal || [];
OneSignal.push(function() {
  // Be sure to call this code *before* you initialize the web SDK
  
  // This registers the workers at the root scope, which is allowed by the HTTP header "Service-Worker-Allowed: /"
  OneSignal.SERVICE_WORKER_PARAM = { scope: '/' };
});
</script>

Now, open OneSignal or your preferred platform. They give you a Code Snippet. Copy it, get back to tracking tools in Wix, click Add Custom Code, and paste the Code. You may name it Notification Prompt. Save it. Watch the video to learn how to do it.

Done! Congratulations, now you have enabled HTTPS Push Notifications on your Wix Website!

Note: It takes about 1-2 hours for this to work after you have done everything. The prompt will appear immediately but it takes time to make it fully work. I recommend you to visit your website after 2 hours and allow notifications. A good indicator of it's working is the welcome notification and your first user in the OneSignal dashboard.

Did you like this post? Having some issues? Feedback? Or just have something to say? Let me know by leaving a comment below! Also, hit the ❤ Like button if you like it.

Thank You for reading!