Displaying Notifications in ReScript
Tags: bucklescript, pwa, reason, rescript
Published: 2021-03-08 14:42:23

---
title: Displaying Notifications in ReScript
published: true
date: 2021-02-26 00:00:00 UTC
tags: ["bucklescript", "pwa", "reasonml", "rescript"]
canonical_url: https://webbureaucrat.gitlab.io/posts/displaying-notifications-in-rescript/
---

This article will serve to document and demonstrate the [`rescript-notifications`](https://npmjs.org/package/rescript-notifications) npm package, a complete set of bindings for the JavaScript-compiling ReScript language ([formerly BuckleScript/ReasonML](https://rescript-lang.org/blog/bucklescript-is-rebranding)). At the close of this article, the reader should be able to enable and display notifications in an entirely type safe and functional way.

Be advised that there are some limitations to web notifications, and I encourage the reader to review the [JavaScript Notifications API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API). TL;DR: Notifications require an HTTPS connection, and they are widely but [not universally supported](https://caniuse.com/?search=notifications).

### How to use this article

This article is meant to be _both_ a tutorial _and_ a demo. While I've included the code snippets I think are important, I also want to give a tour of the source so that the reader can browse it in context.

- _NotificationsDemo.res_ is the ReScript source for the scripts on this page. You can read the whole thing in context by reading the [source on GitLab](https://gitlab.com/webbureaucrat/webbureaucrat.gitlab.io/-/blob/master/scripts/demos/src/NotificationsDemo.res)
- It compiles to [_NotificationsDemo.bs.js_](https://webbureaucrat.gitlab.io/scripts/demos/lib/es6_global/src/NotificationsDemo.bs.js), which is referenced in a script tag at the bottom of this article.
- For completeness, the [source of this article](https://gitlab.com/webbureaucrat/webbureaucrat.gitlab.io/-/blob/master/src/posts/2021/displaying-notifications-in-rescript.md) is also available on GitLab, although there's no magic here and you may not need it.

#### A word from across the web

I am adapting this article for cross-posting on sites like [Dev.to](https://dev.to/) and [Functional Works](https://functional.works-hub.com/) by stripping out the _demo-ness_ of it all. 

So feel free to read how you want! But if you'd like to see the notifications, visit [the live demo site on my blog](https://webbureaucrat.gitlab.io/posts/displaying-notifications-in-rescript).

### Setting up the project

You'll need to install the [`rescript-notifications`](https://npmjs.org/package/rescript-notifications) npm package and add it to your _bsconfig.json_ in the usual way.

I'm also using a local clone of [`bs-webapi`](https://www.npmjs.com/package/bs-webapi), although of course you can always just write your own bindings for DOM manipulation.

Lastly, I just want to flag that I'm using two `open` statements like so:

```ocaml
open Notifications;
open Webapi.Dom;
```

(I usually try to limit myself to two or three open statements per file.)

### Reading and requesting Notifications permissions

The first thing to establish is notification permissions. We do this through the [`Notification.permission`](https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission) static property and the [`Notification.requestPermission()`](https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission) static method.

For example:

_NotificationsDemo.res_

```ocaml
open Notifications;
open Webapi.Dom;

window |> Window.addEventListener("load", _ => { 
    let spanPermissions: option<Dom.element> = 
        Document.querySelector("#span-permission", document); 
    let setSpanText = (span: option<Dom.element>, text: string): unit => { 
        let _ = span -> Belt.Option.map(span => Element.setInnerText(span, text)); 
    Js.log("Permission text: " |> Js.String.concat(text)); 
}; 

let _ = spanPermissions -> setSpanText(Notification.permission); 

let onBtnRequestClick = (event: Dom.event): unit => { 
    Js.log("button-request clicked."); 

    let _ = Notification.requestPermission() 
        |> Js.Promise.then_(str => { 
           spanPermissions -> setSpanText(str) 
           |> Js.Promise.resolve 
        }); 
    }; 

    let _ = Document.querySelector("#button-request", document) 
        -> Belt.Option.map(btn => { 
           btn |> Element.addEventListener("click", onBtnRequestClick); 

           Js.log("button-request event added."); 
        });
});
```

As you can see, this demo sets the `span` text to the current notification permission state and then wires up an even to the button to ask for permission and update the `span` accordingly. You can see the result below:

> ### [Demo](https://webbureaucrat.gitlab.io/posts/displaying-notifications-in-rescript/) omitted in cross-post

Go ahead and grant permission if you'd like--I am only using notifications for the purposes of this demo. Ordinarily, I would hide the button after permission has been granted because it only works once, but as a demo this is fine.

### Constructing notifications to display them

As long as permissions are granted, notifications are displayed as soon as they're constructed.

The `rescript-notifications` binding includes [two Notification constructors](https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification), `makeWithoutOptions` and `makeWithOptions`.

Notifications are typed with a type parameter because they can include a data object of any datatype. If you don't need it, you can always just use a throwaway object of some sort.

The options object includes a lot of properties that the calling code won't necessarily need (and isn't necessarily widely supported), so the library includes an `init` function for convenience.

_NotificationsDemo.res_ continues:

```ocaml
let onBtnNotifyClick = (_: Dom.event): unit => { 
    Js.log("button-notify clicked."); 
    let _ = Notification.makeWithoutOptions("You have been notified."); 
}; 

let onBtnWithOptionsClick = (_: Dom.event): unit => { 
    Js.log("button-with-options clicked."); 
    let options: NotificationOptions.t<string> = {
        ...NotificationOptions.init(Js.Nullable.return("unused data.")), 
        icon: "https://webbureaucrat.gitlab.io/img/icons/192.png", 
        body: "with an icon and additional text." 
    }; 
    let _ = Notification.makeWithOptions("You have been thoroughly notified", options); 
}; 

let _ = Document.querySelector("#button-notify", document) 
    -> Belt.Option.map(btn => { 
       btn 
       |> Element.addEventListener("click", onBtnNotifyClick); 
}); 

let _ = Document.querySelector("#button-with-options", document) 
    -> Belt.Option.map(btn => { 
    btn 
    |> Element.addEventListener("click", onBtnWithOptionsClick); 
});
```

As you can see, the click events call the `make` methods, which, by ReScript convention, bind to the Notification object constructor. The notifications will appear as soon as they are constructed.

The feel free to play with the live demo below:


> ### [Demo](https://webbureaucrat.gitlab.io/posts/displaying-notifications-in-rescript/) omitted in cross-post

### Happy notifying!

This has been a quick demonstration of using JavaScript notifications in a type-safe way using ReScript. I hope you have found this helpful and informative, and, as always, feel free to [reach out](https://gitlab.com/webbureaucrat/webbureaucrat.gitlab.io/-/issues) with questions or comments.