 What's the best way to display pop-up notifications on mobile and desktop? Now, wouldn't it be great if users could interact with your site without even having to open a web page, for example, to acknowledge a booking or a delivery confirmation? You might want to show users offers and updates or prompt them to action, and you need that to feel trustworthy. Well, there's now a really simple way to do that on the web. The Notification API enables you to display pop-up notifications using JavaScript built into the browser. Before you can create a notification, you need to get permission from the user. This code will prompt the user for permission to show notifications. You can try this out from the browser console. As you'll see later, permission is requested automatically when subscribing to a push service. So there's no need to call this function when using just push notifications. Let's take a look at some examples for configuring and displaying a notification from a service worker. You first check that permission has been granted, and then you call show notification on the service worker registration object and pass in the notification title. You can also try this out from the browser console. Try it on the new tab page. For push notifications, you call show notification in the service worker in response to a push event when a message arrives. You can specify an optional options object to configure the notification. This is passed in as the second argument in the show notification function. Body is the body text displayed below the title. Icon is the image displayed at the top of the notification, and Vibrate is the vibration pattern for phones. In this case, 100 milliseconds on, 50 milliseconds off, 100 milliseconds on again. Data is the arbitrary data you can retrieve via the service worker when the user interacts with the notification. In this example, primary key allows you to identify which notification was clicked when handling the interaction in the service worker. So let's try that out. You can add action buttons to the notification and handle each one in a different way. Here's what that looks like. Notification interaction events are handled in the service worker, tapping, clicking, or closing the notification. There are two notification interactions you can listen for in the service worker. The notification close event only triggers when the notification is dismissed via a direct action on the notification. If the user dismisses all notifications, the event will not trigger. If the user clicks the notification or an action button in the notification, the notification click event is triggered. If the user clicks on an action, the action is attached to the event object of the notification click handler. You can check which action was triggered and handle each one separately. Let's see how the two handlers work in a service worker. First, notification close. You can access the notification object from the event object and then get data from that. You might use the primary key property from the data to identify which notification was clicked. In a notification click handler, you can determine which action button the user pressed by inspecting the action property on the event object. Now note that each browser displays notification actions differently and some don't display them at all. So to compensate, we put a default experience in this example in an else block after checking which action was clicked so that something will happen on a simple click of the notification. Next in this series, you'll learn how to send messages from your server and how to handle incoming messages with a service worker.