Last active
December 30, 2017 15:26
-
-
Save AndreaBarghigiani/8d18be23d29df67c78cc5e50a227d0a2 to your computer and use it in GitHub Desktop.
Questo codice descrive come sia possibile lanciare delle notifiche push dal proprio sito. Trovi tutti i dettagli all'interno dell'articolo: https://skillsandmore.org/notifiche-push-sito/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="main.js"></script> | |
| <title>Lancia notifiche push dal tuo sito!</title> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <h1>Come sfruttare le Notification API</h1> | |
| <p>In questa pagina è presente del codice che permette di sfruttare le | |
| <em>Page Visibility API</em> per attivare le | |
| <em>Notification API</em> che ci consentono di | |
| <strong>inviare notifiche push.</strong> | |
| </p> | |
| <p>Se non sai bene di cosa sto parlando, puoi trovare tutte le informazioni che desideri nell'articolo pubblicato su SkillsAndMore</a>.</p> | |
| </div> | |
| <div class="cta-sam"> | |
| <a href="https://skillsandmore.org/notifiche-push-sito/" target="_blank">Scopri l'articolo completo</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Veriabili di controllo | |
| var hidden, visibilityChange; | |
| // Controllo tipo di evento | |
| if (typeof document.hidden !== "undefined") { //Per tutti i browser moderni | |
| hidden = "hidden"; | |
| visibilityChange = "visibilitychange"; | |
| } else if (typeof document.mozHidden !== "undefined") { // Firefox fino v17 | |
| hidden = "mozHidden"; | |
| visibilityChange = "mozvisibilitychange"; | |
| } else if (typeof document.webkitHidden !== "undefined") { // Chrome fino v32, Android fino v4.4, Blackberry fino v10 | |
| hidden = "webkitHidden"; | |
| visibilityChange = "webkitvisibilitychange"; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") { | |
| // Lascio un messaggio se il browser non supporta le Page Visibility API | |
| alert("Hai bisogno di un browser moderno per utilizzare le Page Visibility API."); | |
| } else { | |
| // Se tutto va bene mi metto in ascolto dell'evento visibilityChange | |
| document.addEventListener(visibilityChange, handleVisibilityChange, false); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function notify(message) { | |
| // Controlliamo se il browser supporta le notifiche | |
| if (!("Notification" in window)) { | |
| alert("Questo browser non supporta le Notification API, usa un browser moderno"); | |
| } | |
| // Controlliamo se l'utente accetta le nostre notifiche | |
| else if (Notification.permission === "granted") { | |
| // Se è tutto a posto, creiamo una notifica | |
| var notification = new Notification(message); | |
| } | |
| // Se l'utente non ha accettato le notifiche, chiediamo il permesso | |
| else if (Notification.permission !== 'denied') { | |
| Notification.requestPermission(function (permission) { | |
| // Se è tutto a posto, creiamo una notifica | |
| if (permission === "granted") { | |
| var notification = new Notification(message); | |
| } | |
| }); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function handleVisibilityChange() { | |
| if (document.hidden) { | |
| // Messaggio se la pagina è nascosta | |
| notify('Sei andato via! :\('); | |
| } else { | |
| // Messaggio se la pagina è visibile | |
| notify('Grande! Sei tornato :\)'); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Based on the tutorial at https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API | |
| (function() { | |
| 'use strict'; | |
| // Veriabili di controllo | |
| var hidden, visibilityChange; | |
| // Controllo tipo di evento | |
| if (typeof document.hidden !== "undefined") { //Per tutti i browser moderni | |
| hidden = "hidden"; | |
| visibilityChange = "visibilitychange"; | |
| } else if (typeof document.mozHidden !== "undefined") { // Firefox fino v17 | |
| hidden = "mozHidden"; | |
| visibilityChange = "mozvisibilitychange"; | |
| } else if (typeof document.webkitHidden !== "undefined") { // Chrome fino v32, Android fino v4.4, Blackberry fino v10 | |
| hidden = "webkitHidden"; | |
| visibilityChange = "webkitvisibilitychange"; | |
| } | |
| if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") { | |
| // Lascio un messaggio se il browser non supporta le Page Visibility API | |
| alert("Hai bisogno di un browser moderno per utilizzare le Page Visibility API."); | |
| } else { | |
| // Se tutto va bene mi metto in ascolto dell'evento visibilityChange | |
| document.addEventListener(visibilityChange, handleVisibilityChange, false); | |
| } | |
| function handleVisibilityChange() { | |
| if (document.hidden) { | |
| // Messaggio se la pagina è nascosta | |
| notify('Sei andato via! :\('); | |
| } else { | |
| // Messaggio se la pagina è visibile | |
| notify('Grande! Sei tornato :\)'); | |
| } | |
| } | |
| function notify(message) { | |
| // Controlliamo se il browser supporta le notifiche | |
| if (!("Notification" in window)) { | |
| alert("Questo browser non supporta le Notification API, usa un browser moderno"); | |
| } | |
| // Controlliamo se l'utente accetta le nostre notifiche | |
| else if (Notification.permission === "granted") { | |
| // Se è tutto a posto, creiamo una notifica | |
| var notification = new Notification(message); | |
| } | |
| // Se l'utente non ha accettato le notifiche, chiediamo il permesso | |
| else if (Notification.permission !== 'denied') { | |
| Notification.requestPermission(function (permission) { | |
| // Se è tutto a posto, creiamo una notifica | |
| if (permission === "granted") { | |
| var notification = new Notification(message); | |
| } | |
| }); | |
| } | |
| } | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background-color: #f5f5f5; | |
| font-family: "Open Sans"; | |
| text-align: center; | |
| } | |
| .wrapper{ | |
| max-width: 900px; | |
| margin: 100px auto 50px; | |
| } | |
| h1{ | |
| font-family: "Bree Serif"; | |
| font-size: 40px; | |
| } | |
| .cta-sam{ | |
| margin: 30px auto; | |
| text-align: center; | |
| } | |
| .cta-sam a{ | |
| background-color: #EF6C00; | |
| display: inline-block; | |
| padding: 20px; | |
| margin: 10px auto; | |
| border-radius: 6px; | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .cta-sam a:hover{ | |
| background-color: #333; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment