Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2023-03-29

Channels

#shadow-cljs
<
2023-03-29
>
Tomáš Baránek07:03:48

I am creating a simple app with PWA functionality (cljs/reagent/firebase following @jacek.schae's incredible course). As iOS 16.4 enables native push notifications in PWAs, I would like to implement it. Asking gpt does not help;), it has no update on the news. As I am still a beginner (clj is my first language, and my job is entirely different), I ask you guys if there is some tutorial or experience I could use. Thanks!

❤️ 1
danbunea13:03:29

My chatGPT response: To use Safari notifications from JavaScript in iOS 16.4, you can follow these steps: 1. Request permission: First, you need to request permission from the user to display notifications. You can do this using the Notification.requestPermission() method. This will prompt the user to allow or deny permission to display notifications. 

javascript

if ('Notification' in window) { Notification.requestPermission().then(function (permission) { if (permission === 'granted') { console.log('Notification permission granted.'); } }); }
1. Check permission status: You can also check the permission status using the Notification.permission property. 
javascript

if (Notification.permission === 'granted') { console.log('Notification permission already granted.'); }
1. Create a notification: To create a notification, you can use the Notification constructor. You can pass in the title, options, and icon for the notification. 
javascript

if (Notification.permission === 'granted') { var notification = new Notification('Hello, world!', { body: 'This is a notification from JavaScript.', icon: 'path/to/icon.png' }); }
1. Handle click events: You can also handle click events on the notification using the onclick property. This will allow you to perform an action when the user clicks on the notification. 
javascript

if (Notification.permission === 'granted') { var notification = new Notification('Hello, world!', { body: 'This is a notification from JavaScript.', icon: 'path/to/icon.png' }); notification.onclick = function () { console.log('Notification clicked.'); }; }
Note that Safari notifications may not work on all devices or may be blocked by the user's browser settings. It's also important to be respectful of the user's privacy and only display notifications that are relevant and useful.

🙏 2
danbunea13:03:14

Now, I also need to mention that to request permissions, it needs to happen as a user event (an on click on a button for example)

danbunea13:03:37

I am playing with it, and eventually I'll post what I find here

Tomáš Baránek14:03:15

Thanks! Looking into it!

danbunea11:03:10

I am using re-frame, so to ask for permissions, I made an effect: (defn- can-notify? [] (= "granted" (-> (.-permission (.-Notification js/window))))) (defn enable-notifications [x] (prn ::enable-notifications x) (if (.-Notification js/window) (if (can-notify?) (prn 1887488 "Notification permission already granted.") (-> (.requestPermission (.-Notification js/window)) (.then (fn [permission] (if (= "granted" permission) (prn 1887483 "Notification permission granted.") (prn 1887484 "Notification permission denied")))))) ;;else (prn "No way to use notifications"))) (re-frame/reg-fx :enable-notifications enable-notifications)

danbunea11:03:16

to send one: (defn send-notification [title body] (when (can-notify?) (js/Notification. title (clj->js {:body body}))))

👍 2
Tomáš Baránek15:03:17

Is there a way to initiate notification on some content in subscribed (firebase realtime) database changes?

danbunea15:03:59

well, I do sort of a similar thing, to what firebase does: I receive events also on a websocket and I use the send-notification function. This means the websocket is open. When the application (thus the websocket) is not open, I have no idea how you can send notifications from the server (yet)

👍 2
thheller07:03:07

you need server side support for that. I don't know any public libs tackling that

thheller07:03:14

the client side is somewhat straightforward, not trivial though. I can't point you to anything specific, other than the reference JS docs

👍 2
Tomáš Baránek14:03:05

Thanks, Thomas, I will try and share my experience if I succeed. 🙂