Jump to content

How to Have a Website send Notifications (HTML, CSS, and JS)

piemadd
Go to solution Solved by colonel_mortis,

You can't send notifications from any browsers on iOS, because Apple wants you to make a proper app instead. For other browsers, you have two options:

  • The web notification API is supported in all modern desktop browsers, but it not supported on most mobile browsers (as I understand it, you can make it work on Chrome on Android but it's not as straight forward as other platforms) and requires you to have a tab open to send the notifications. That tab is responsible for figuring out (eg by polling the server) when to send a notification. That's the method used for notifications through the forum. You can see some example code, as well as more complete docs, on MDN.
  • The Web Push API (part of the progressive web app specification) lets you send notifications from the sever, which are pushed to the user's device even if they don't have the tab open. It's a bit more complicated to implement, but it's much more powerful and is supported on desktop and mobile browsers other than iOS and Safari. The Google developer docs are good for push (but there's a lot to them).

Hey everyone!

 

Essentially, I want to use this to allow for people at swim meets to keep track of what event it is, as it is common place for school swim meets that you aren't in the pool area and can't see the scoreboard, making it a bit of a hassle to see what the event number is. To do this, I have come up with a good system, but i'm not sure how to actually code it.

 

I do have some experience with Bootstrap and Web Development, but when it comes to notifications, i get fairly lost. Basically, I want to have a user visit a website, and click a button to confirm that they want to receive notifications. Then, I want the website to send a cURL GET request to see if anything is updated, and if so, to send a notification to the user. I know on android, as long as you have the tab open in chrome (even if you aren't in the app itself) the notifications will be sent, but i wasn't sure about if it works in the safari app on ios or on ios at all.

 

If anybody knows how to implement a solution or how the notifications work on ios, that would be great. 

NOTE: I already know how to make an API, so that isnt an option.

i like trains 🙂

Link to comment
Share on other sites

Link to post
Share on other sites

This should get you started in the right direction:

 

The solution is using PWAs (Progressive Web Apps)

 

It doesn't work exactly as you describe but i'm sure you can figure something out. Support for this kind of thing on phones is still new.

Computers r fun

Link to comment
Share on other sites

Link to post
Share on other sites

You can't send notifications from any browsers on iOS, because Apple wants you to make a proper app instead. For other browsers, you have two options:

  • The web notification API is supported in all modern desktop browsers, but it not supported on most mobile browsers (as I understand it, you can make it work on Chrome on Android but it's not as straight forward as other platforms) and requires you to have a tab open to send the notifications. That tab is responsible for figuring out (eg by polling the server) when to send a notification. That's the method used for notifications through the forum. You can see some example code, as well as more complete docs, on MDN.
  • The Web Push API (part of the progressive web app specification) lets you send notifications from the sever, which are pushed to the user's device even if they don't have the tab open. It's a bit more complicated to implement, but it's much more powerful and is supported on desktop and mobile browsers other than iOS and Safari. The Google developer docs are good for push (but there's a lot to them).

HTTP/2 203

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×