Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   HTML 5 Notifications API (https://javascript.ru/forum/misc/50520-html-5-notifications-api.html)

zoOmer 29.09.2014 21:16

HTML 5 Notifications API
 
function notifyMe() {
  // Давайте проверим, поддерживает ли браузер уведомления
  if (!("Notification" in window)) {
    alert("Ваш браузер не поддерживает HTML5 Notifications");
  }
  // Теперь давайте проверим есть ли у нас разрешение для отображения уведомления
  else if (Notification.permission === "granted") {
    // Если все в порядке, то создадим уведомление
    var notification = new Notification('Уведомление HTML5', {
    	lang: 'ru-RU', 
    	body: 'Здесь какой-то контент уведомления...', 
    	icon: 'http://lorempixel.com/output/sports-q-c-100-100-9.jpg'
    });
  }
  // В противном случае, мы должны спросить у пользователя разрешение
  else if (Notification.permission === 'default') {
    Notification.requestPermission(function (permission) {

      // Не зависимо от ответа, сохраняем его в настройках
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
      // Если разрешение получено, то создадим уведомление
      if (permission === "granted") {
        var notification = new Notification('Уведомление HTML5', {
    		lang: 'ru-RU', 
    		body: 'Здесь какой-то контент уведомления...', 
    		icon: 'http://lorempixel.com/output/sports-q-c-100-100-9.jpg'
    	});
      }
    });
  }
}


У меня несколько вопросов по данному скрипту может кто знает :)

Как сделать чексбокс который будет отвечать за показ уведомлений то есть если поставить галку то уведомления выводятся если снять то не будут.

И второй вопрос как использовать несколько уведомлений?
то есть чтоб не создавать новую функцию notifyMe2 а, иным способом можно ли?

BETEPAH 29.09.2014 22:15

Цитата:

Сообщение от zoOmer
if (!("Notification" in window)) {
alert("Ваш браузер не поддерживает HTML5 Notifications");
}

Не делайте так! Лучше так.
alert('Здесь какой-то контент уведомления...');
а то вместо сообщения пользователь будет получать бесполезный алерт. А еще лучше, наверное, вообще алерт не выводить - это раздражает. Сидишь читаешь статью, а тут тебе алерт - бах из свернутого окна!
Цитата:

Сообщение от zoOmer
Как сделать чексбокс который будет отвечать за показ уведомлений то есть если поставить галку то уведомления выводятся если снять то не будут.

В начале функции сделать проверку
if (document.getElementById('checkboxID').checked == true )

Второй вопрос не понятен. Несколько уведомлений - это как?

zoOmer 29.09.2014 23:28

BETEPAH, Спасибо большое будем разбираться)

По поводу второго вопроса - Ну чтоб выводить несколько уведомлений с разным содержимом. То есть вызываю одно уведомление в нем один
текст вызываю для другой функции там уже другой текст.

Как то так)))

BETEPAH 30.09.2014 10:33

zoOmer,
текст передавать в аргументах функции
function notifyMe(text)

zoOmer 30.09.2014 20:21

BETEPAH, хм. Не могли бы вы по подробней рассказать о передаче в функцию?

function notifyMe(text)

kostyanet 01.10.2014 05:56

ТС похоже не понял в самом начале. Весь представленный код выполняется после нажатия юзером кнопки\чекбокса "Заколебать меня". Оно отсюдо ва переписано https://developer.mozilla.org/en/doc...I/notification

kostyanet 01.10.2014 06:00

Поэтому и возник такой вот вопрос

Цитата:

Сообщение от zoOmer
То есть вызываю одно уведомление в нем один

Уведомления создаются по какому-то событию и берутся откуда-то _после_ того как все проверено и разрешение получено.

Отсюда

if (permission === "granted") {

оно и начинается - создается апликуха которая будет долбить юзера по поводу.

Скорее всего это будет таймер с запросом к серверу - нет ли чем задолбать?

zoOmer 31.10.2015 23:19

if (document.getElementById('checkboxID').checked == true )
Не работает этот вариант((

zoOmer 09.11.2015 14:52

Цитата:

Сообщение от zoOmer
if (document.getElementById('checkboxID').checked == true )
Не работает этот вариант((

Подскажите что нить

EmperioAf 09.11.2015 17:55

Цитата:

Сообщение от zoOmer
Не работает этот вариант((

Это работает. Покажите код в котором это не работает.

zoOmer 13.11.2015 14:42

EmperioAf,
/* Создаем уведомления на рабочем столе */
/* --- notify('Заголовок','Текст','Время скрытия','Ссылка на иконку') --- */
function notify(title, body, timeout,icoUrl) {
if (document.getElementById('toggle-80').checked == true ) // чекс отключения
  timeout = (timeout) ? timeout : 3000;
  
  Notification.requestPermission(function () {
    var nf = new Notification(title, {
      body: body,
      icon: icoUrl
    });
    nf.onshow = function () {
      setTimeout(function () {
        nf.close()
      }, timeout)
    };
  });
} 
$(window).blur(function() {
	windowActive0 = false;
	});
	
$(window).focus(function() {
	windowActive0 = true;
	});


И чекс.

var checked=getcookie("notifymess")==1?"checked":"";
document.write('<input type="checkbox" id="toggle-80" class="cmn-toggle cmn-toggle-yes-no" name="notifymess"  onclick="if(this.checked) {parent.setcookie(this.name,1)} else {parent.setcookie(this.name,0)}" '+checked+'><label for="toggle-80" data-on="Вкл" data-off="Выкл"></label><p >- Включить оповещения на рабочем столе</p>')

EmperioAf 13.11.2015 21:22

Ваш пример неполный - если вбить в браузер в ваш код то будет ругаться на функции getcookie и setcookie.
Вот пример показывающий, что
if (checkbox.checked == true)

работает:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
* {
  margin:0;
  padding: 0;
  outline: none;
}
</style>
</head>
<body>
  <input type="checkbox">
  <input type="text" value="Выключено">
  <script>
  var checkbox = document.querySelector('input[type="checkbox"]');
  var text = document.querySelector('input[type="text"]');

  checkbox.onchange = function(){
    if (checkbox.checked == true)
      text.value = "Включено";
    else text.value = "Выключено";
  }
  </script>
</body>
</html>

zoOmer 14.11.2015 13:20

EmperioAf, Это просто запоминание состояния чекса на куках.

/* Функции чтения Cookie */
function getcookie(key) {
    str=document.cookie;len=str.length; if(len==0) return "";
    start=str.indexOf(key + "="); if(start==-1) return "";
    start=start+key.length+1;
    end=str.indexOf(";",start); if(end==-1) end=len;
    return unescape(str.substring(start,end));
}

/* Функции записи Cookie */
function setcookie(key,str,min) {
    if(!key) return;
    if(!min) min=60*24*365;
    var date = new Date();
    date.setTime(date.getTime()+(min*60*1000));
    document.cookie = key+"="+str+"; expires="+date.toGMTString()+"; path=/";
}

zoOmer 17.11.2015 18:04

Подскажите?

Lekaoleg 30.11.2015 14:31

Подскажите пожалуйста, а как можно в Body: вставить текст с ссылкой? то есть при нажатии именно на текст, был переход по ссылке.

EmperioAf 30.11.2015 18:05

Цитата:

Сообщение от Lekaoleg (Сообщение 398106)
Подскажите пожалуйста, а как можно в Body: вставить текст с ссылкой? то есть при нажатии именно на текст, был переход по ссылке.

а чем вас не устраивает тег a ?

Lekaoleg 01.12.2015 10:39

ну если сделать так body: "<a href="google.ru">Google</a>", то он не будет парсить то что в кавычках, а просто выведет "<a href="google.ru">Задача</a>".

EmperioAf 01.12.2015 10:58

можно же использовать одинарные кавычки и обратные слэши:

"<a href='google.ru'>Задача</a>".

Lekaoleg 01.12.2015 11:49

Ужа нашел в статьях что "Уведомление HTML теги в notification не поддерживает"
Просто думал это как то обойти. И это не помогло obj.innerHTML='<a href="">'


Часовой пояс GMT +3, время: 09:05.