Отображение динамических сообщений с помощью API веб-уведомлений

Здесь мы используем синтаксис на основе requestPermission() метода requestPermission() для отображения уведомления после предоставления разрешения. Мы отображаем уведомление с помощью конструктора уведомлений . Этот конструктор принимает два параметра: один для заголовка уведомления и один для параметров. Перейдите по ссылке на документацию, чтобы найти полный список опций, которые можно пропустить.

Хранение версий фреймворка

Ранее в этой статье я упоминал, что мы будем использовать localStorage для отображения уведомлений. Использование localStorage является предпочтительным методом хранения постоянной клиентской информации в JavaScript. Мы будем создавать ключ localStorage с именем conciseVersion который будет содержать текущую версию платформы (например, 1.0.0). Затем мы можем использовать этот ключ для проверки новых версий фреймворка.

Как обновить значение нашего ключа conciseVersion последней версией фреймворка? Нам нужен способ установки текущей версии, когда кто-то посещает веб-сайт. Мы также должны обновлять это значение всякий раз, когда выпускается новая версия. Каждый раз, когда conciseVersion значение conciseVersion , нам нужно отобразить уведомление для посетителя, анонсирующего новую версию фреймворка.

Мы собираемся решить эту проблему, добавив скрытый элемент на страницу. Этот элемент будет иметь класс с именем js-currentVersion и будет содержать только текущую версию фреймворка. Поскольку этот элемент существует в DOM, мы можем легко взаимодействовать с ним, используя JavaScript.

Этот скрытый элемент будет использоваться для хранения версии фреймворка в нашем ключе conciseVersion . Мы также будем использовать этот элемент для обновления этого ключа каждый раз, когда будет выпущена новая версия платформы.

 <span class="js-currentVersion" aria-hidden="true">3.4.0</span> 

Мы можем использовать немного CSS, чтобы скрыть этот элемент:

 [aria-hidden="true"] { display: none; visibility: hidden; } 

Примечание. Поскольку этот элемент не содержит значимого содержимого, для программ чтения с экрана нет необходимости обращаться к этому элементу. Вот почему я установил атрибут aria-hidden в true и использовал display: none в качестве средства скрытия элемента. Пожалуйста, обратитесь к этой статье WebAIM для получения дополнительной информации о сокрытии контента.

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

 function checkVersion() { var latestVersion = document.querySelector(".js-currentVersion").textContent; } 

Эта функция хранит содержимое элемента .js-currentVersion с помощью свойства textContent . Давайте добавим еще одну переменную, которая будет хранить содержимое нашего ключа conciseVersion localStorage .

 function checkVersion() { var latestVersion = document.querySelector(".js-currentVersion").textContent; var currentVersion = localStorage.getItem("conciseVersion"); } 

Теперь у нас есть последняя версия нашего фреймворка в переменной, и мы localStorage наш ключ localStorage в переменной. Пришло время добавить логику, которая определяет, доступна ли новая версия фреймворка.

Сначала мы проверим, существует conciseVersion ключ conciseVersion . Если этого не произойдет, мы отобразим уведомление для пользователя, так как это, скорее всего, его первое посещение. Если ключ существует, мы проверяем, что его значение (хранится в переменной currentVersion ) больше, чем значение текущей версии (хранится в переменной latestVersion ). Если последняя версия фреймворка больше той, которую посетитель видел в последний раз, мы знаем, что выпущена новая версия.

Примечание . Мы используем библиотеку semver-Compare для сравнения двух версий версий.

Зная это, мы показываем уведомление посетителю и соответствующим образом обновляем наш ключ conciseVersion .

 function checkVersion() { var latestVersion = document.querySelector(".js-currentVersion").textContent; var currentVersion = localStorage.getItem("conciseVersion"); if (currentVersion === null || semverCompare(currentVersion, latestVersion) === -1) { var notification = new Notification("Hello, world!"); localStorage.setItem("conciseVersion", latestVersion); } } 

 (function() { if ("Notification" in window) { var permission = Notification.permission; if (permission === "denied") { return; } else if (permission === "granted") { return checkVersion(); } Notification.requestPermission().then(function() { checkVersion(); }); } })(); 

 function displayNotification(body, icon, title, link, duration) { link = link || null; // Link is optional duration = duration || 5000; // Default duration is 5 seconds var options = { body: body, icon: icon }; var n = new Notification(title, options); if (link) { n.onclick = function () { window.open(link); }; } setTimeout(n.close.bind(n), duration); } 

 function checkVersion() { var latestVersion = document.querySelector(".js-currentVersion").textContent; var currentVersion = localStorage.getItem("conciseVersion"); if (currentVersion === null || semverCompare(currentVersion, latestVersion) === -1) { displayNotification( `Click to see what's new in v${latestVersion}`, "http://concisecss.com/images/logo.png", "A new version of Concise is available", `https://github.com/ConciseCSS/concise.css/releases/v${latestVersion}` ); localStorage.setItem("conciseVersion", latestVersion); } }