How to send PWA Push Notifications in Safari IOS 16

Keep an eye out for Web Push on iOS and iPadOS in 2023.

After long delays IOS 16 is finally adding push notifications for PWA's. But how do you actually implement it and make it work with JavaScript?

Starting September 2022 you can add native Push Notifications to your PWA. Until then...

First...you need to turn on Push API in experimental mode on your IOS 15

The Push Notification API is already available in IOS 15, but only in "experimental mode".

While Push API already exists by default it is turned off. So you need to turn it under Settings.

How to enable Push API While waiting for IOS 16 you can turn on Push API on your iPhone by going to Settings, typing Safari in search, click on Safari, scroll all the way down and go to Advanced and tap on Experimental Features. Now scroll down to where it says "Push API", and enable it by tapping on green switch button to turn it on.

Some preliminary setup is required. Here's step-by-step JavaScript tutorial.

Step 1: How To Create and Register a Service Worker (serviceworker.js)

First, create your service worker JavaScript file and place it in root directory of your PWA. I named my service worker serviceworker.js but the name can be anything.

Then, we will need to register this JavaScript file as your service worker.

The serviceWorker object and its method register() reside on the built-in navigator object.

In the next example, let's use JavaScript to check if a service worker is already registered. If not this code will register a service worker. Additionally, you might want to run this code from your DOMContentLoaded event.

if (navigator&&navigator.serviceWorker.controller) {
    console.log("Active service worker found");
} else {
    navigator.serviceWorker.register("serviceworker.js", { scope: "./"}).then(
        function (reg) {
            console.log("Service worker registered");
        }
    );
}

More coming soon...

Why was this tutorial written?

When team here at Ghost Messenger heard of this news we got excited and decided to implement it on our PWA. In this tutorial we will explain how we got it to work in our app and hopefully others can follow in our footsteps to install Push API in their own PWA.

The rest of this article is coming soon.

HTML comments above are special tags, they will be replaced with H1 title and your author info. If you don't want to include that in your article delete or modify comment.

Place additional scripts or CSS above tag.

You can create bold text and lists as follows:

Example of an UL list

• item 1
• item 2
• item 2

Example of an OL list

1. item 1
2. item 2
3. item 2

You can create source code tags by wrapping text in back-tick quotes.

You don't have to use p tags to create paragraphs, but you still can.

It's recommended to keep author tag so that readers who come from search engine traffic can also discover your social network links and bio.

Note: You can use regular HTML in this article but be careful not to break anything.