Klient chce otrzymywać powiadomienia push wtedy, gdy na ważnych dla niego listach/bibliotekach dokumentów dojdzie do zmian (np. dodanie aktualności, dodanie nowego zadania, etc.). Powiadomienie ma się wyświetlić nawet jeśli użytkownik ma schowaną przeglądarkę lub jest na innej karcie. Zakładamy, że użytkownicy korzystają z jednej z przeglądarek: Google Chrome, Opery, Firefox, lub Microsoft Edge. Niestety Internet Explorer nie wspiera notyfikacji push. Będziemy potrzebowali trzech kluczowych składników, są to: Mechanizm będzie działał w bardzo prosty sposób. Co pewien czas będzie sprawdzał ostatnią datę modyfikacji na monitorowanej liście. Następnie porówna tą datę z datą zapisaną w ciasteczku. Jeżeli okaże się, że jest to nowa modyfikacja listy – zapisujemy w ciasteczku nową datę i wypychamy powiadomienie. Funkcja sendNotification przyjmie jako argumenty tekst do wyświetlenia w powiadomieniu, następnie adres URL, do którego przekieruje kliknięcie w powiadomienie, oraz adres obrazka, który będzie ikoną w powiadomieniu. Dodatkowo mamy tu także fragment Notification.requestPermission, który poprosi użytkownika o umożliwienie wyświetlania notyfikacji. W naszym rozwiązaniu wykorzystamy kontekst SharePointa aby wyciągnąć z listy datę ostatniej modyfikacji. Taką informację znajdziemy za pomocą funkcji get_lastItemModifiedDate(). Do modyfikacji ciasteczek skorzystamy z poniższych metod. Można to oczywiście zrobić prościej, za pomocą biblioteki jquery-cookies, jednak pracując nad projektem postanowiłem, że będziemy unikać angażowania dodatkowych bibliotek. Dodatkowo, w widoku, który ma wysyłać notyfikacje (w moim wypadku default.aspx) musimy dodać kilka dodatkowych referencji. Ostatecznie opakujemy to w pojedynczy obiekt i dodamy nieco sterowania. Finalna wersja skryptu znajduje się tutaj. Jak widać, na samym końcu następuje rejestracja list, które będą monitorowane. Jako argumenty przekazujemy kolejno: nazwę listy, adres do którego ma przenosić powiadomienie oraz tekst powiadomienia. W dalszej kolejności następuje uruchomienie całego rozwiązania, gdzie argumenty to kolejno: czas odświeżania, adres site’a na którym uruchamiamy skrypt i adres obrazka, który będzie wyświetlany razem z powiadomieniem.
Push Notifications w SharePoint
Notyfikacje podbijają nasze urządzenia – aplikacje na telefony zasypują nas nimi codziennie, a strony internetowe coraz częściej proszą o umożliwienie im wypychania aktualizacji w formie notyfikacji. Chcąc iść z duchem czasu, można podobne rozwiązanie zaproponować klientom korzystającym z SharePoint. W tym celu posłużymy się językiem JavaScript.
Case study
Obostrzenia
Realizacja
Mechanizm notyfikacji
sendNotification: function (info, url, icon) {
var notify = function (listName, url, icon) {
var options = { icon: icon };
var notification = new Notification(info, options);
notification.onclick = function (event) {
event.preventDefault();
window.open(url, '_blank');
};
};
// Sprawdzamy czy przeglądarka obsługuje powiadomienia.
if (!("Notification" in window)) {
alert("Ta przeglądarka nie obsługuje powiadomień, wypróbuj Google Chrome!");
}
// Sprawdźmy czy uprawnienia dla powiadomienia zostały nadane
else if (Notification.permission === "granted") {
// jeżeli są tworzymy powiadomienie
notify(info, url, icon);
}
// W innym przypadku tworzymy zapytanie o uprawnienia
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
//Jeżeli użytkownik zaakceptuje tworzymy powiadomienie
if (permission === "granted") {
notify(info, url, icon);
}
});
}
}
SharePoint ClientContext
var clientContext = new SP.ClientContext(siteUrl);
setInterval(function () {
for (var i = 0; i < mcNotification.observedLists.length; i++) {
let item = mcNotification.observedLists[i];
let oList = clientContext.get_web().get_lists().getByTitle(item.listName);
let x = clientContext.load(oList);
clientContext.executeQueryAsync(function () {
let lastmodified = oList.get_lastItemModifiedDate();
item.lastDate = new Date(mcNotification.readCookie(item.listName));
if (lastmodified > item.lastDate) {
item.lastDate = lastmodified;
mcNotification.eraseCookie(item.listName);
mcNotification.createCookie(item.listName, item.lastDate, 3);
mcNotification.sendNotification(item.textInfo, item.linkUrl, logo);
}
}, function (sender, args) {
console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
});
}
}, refreshTime);
Ciasteczka
createCookie: function (name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
},
readCookie: function (name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
},
eraseCookie: function (name) {
mcNotification.createCookie(name, "", -1);
}
/_layouts/15/MicrosoftAjax.js
/_layouts/15/sp.runtime.js
/_layouts/15/sp.js
/_Layouts/15/SP.RequestExecutor.js
$(document).ready(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext');
currentContext = new SP.ClientContext.get_current();
});
</script>
Ostateczna wersja
mcNotification.registerList('Lista aktualności', "http://sp-matcho/SitePages/NewsArchive.aspx", "Zmiany w aktualnościach!");
mcNotification.registerList('Galeria', "http://sp-matcho/SitePages/Galeria.aspx", "Hura działa!");
mcNotification.run(1000, '/', "someicon.png");
Efekt końcowy
Programista .NET i SharePoint, twórca aplikacji front-end i projektant procesów WEBCON BPS. Fascynatem programowania w .NET oraz JavaScript, projektant i entuzjasta cyfryzacji “papierowych” procesów biznesowych, a prywatnie miłośnik historii oraz rysunku.
Autor:
Mateusz Chodkowski
Mateusz Chodkowski
Ostatnie artykuły autora