How to upload the service-worker.js file to your website

In this article we'll explain common methods to upload the service-worker.js file to your website in order to provide a seamless experience to your website visitors for push notifications.

Attention Shopify, Magento, and Wordpress Stores: If you have installed Justuno's Shopify App from Shopify's App Store. Then you already have this file on your store and there are no further actions to take.

If your Justuno Subscribe button is initiating a new window with a large arrow pointing to the top, it means you do not have the service-worker.js file properly uploaded to your website. That window with the arrow is our fallback method.

BigCommerce users
Click here for specific instructions that differ from the below generic instructions.

Step one - Establish how you will be connecting to your store's web server to upload our service-worker.js file. Methods available usually include sftp, ftp, ssh, webdav or through your platforms admin panel.

Step two - If necessary, download a program that lets you connect via one of the establish connection methods in step one. Common free downloadable apps available are cyberduck and fileZilla

Step three - Install and open the chosen program and create a connection to your website. You will generally need a address, username and password for this. The actual info needed will be based on the connection method you chose and what your website platform supplies.

Step four - Download this service-worker.js file to your computer.

Step five - From the root/homepage of your site files, please create a folder called apps and then a folder called justuno inside that newly created apps folder. The structure should be yoursite.com/apps/justuno/

Step six (final step) - Upload the service-worker.js file you downloaded in step four to the new justuno folder you created in step five.

You should be all done at this point. To confirm that you correctly uploaded the service-worker.js file to the appropriate spot, please try going to www.yourwebsite.com/apps/justuno/service-worker.js in the web browser of your choice. You should see the following displayed:

self.addEventListener('push', function (event) {
    console.log('Push message!', event.data.text());
    const payload = JSON.parse(event.data.text());

    event.waitUntil(
        self.registration.showNotification(payload.title, {
            body: payload.body,
            requireInteraction: payload.requireInteraction,
            icon: payload.icon,
            image: payload.image,
            data: {
                link: payload.link
            }
        }));
});

self.addEventListener('notificationclick', function (event) {
    console.log('Notification click: tag', event.notification.tag);
    event.notification.close();
    if (event.notification.data.link) event.waitUntil(clients.openWindow(event.notification.data.link));
});

If you see a 404 page or other page, then please check to make sure the files was correctly uploaded to that /apps/justuno/ directory structure.

tags: service-worker.js, service-worker, service worker, push notifications,