{\r\n "endpoint": "https:\/\/fcm.googleapis.com\/fcm\/send\/c1KrmpTuRm…",\r\n "expirationTime": null,\r\n "keys": {\r\n "p256dh": "BGyyVt9FFV…",\r\n "auth": "R9sidzkcdf…"\r\n }\r\n}<\/code><\/pre>Далі ми берем цей обʼєкт і відправляємо на наш сервер, де кладемо його у базу даних або зберігаємо іншим способом щоб використовувати його в подальшому.<\/p>\n
Якщо придивитися до структури PushSubscription, можна помітити адрес ендпоінта. Суть в тому, що наш сервер не відправляє сповіщення напряму в браузер. Для цього використовується спеціальний push service, який у кожного розробника браузера свій.<\/p>\n
\n![\"\"](\"https:\/\/stefaniuk.website\/pictures\/push-notifications-structure.png\")
\n<\/div>\n<\/div>Нам повезло, що браузери змогли домовитись і стандартизувати протокол push сервіса, тому нам можна не паритись за формат даних для кожного вендора. Усі вони приймають один формат даних, який містить:<\/p>\n
\n- Контент повідомлення<\/li>\n
- Кому його відправити<\/li>\n
- Як саме його відправити, з яким пріорітетом, в який топік та з яким таймаутом.<\/li>\n<\/ul>\n
Кожне повідомлення шифрується за допомогою ключів, що були створені при генерації підписки. Крім цього, потрібно також підписувати повідомлення за допомогою приватного ключа, щоб підтвердити, що це саме наш сервер відправляє повідомлення. Виглядає це ось так:<\/p>\n
\n- Генеруємо пару публічного та приватного ключа, які ще називають VAPID ключами. Цей крок треба зробити всього один раз. В інтернеті купа онлайн сервісів де можна згенерувати ключі.<\/li>\n
- Публічний ключ використовуємо при створенні підписки на стороні браузера. Дальше цей ключ асоціюється з ендпоінтом для конкретної підписки.<\/li>\n
- Приватний ключ використовуємо для підписки повідомлення на стороні нашого сервера.<\/li>\n
- Дальше за допомогою публічного ключа ми можемо перевірити що повідомлення було відправлено саме нашим сервером а не кимось іншим.<\/li>\n<\/ol>\n
Структура VAPID ключа:<\/p>\n
{\r\n "sub": "mailto:bohdan@stefaniuk.io",\r\n "public_key": "sdgdklsnvi2f0m-12dgsg...",\r\n "private_key": "1fn0ASFfnaksf..."\r\n }<\/code><\/pre>Але, як в тому жарті, є нюанс. Subject в VAPID ключі є опціональним і його не обовʼязково відправляти разом з запитом на push сервіс. Проте Сафарі так не вважає, ще й вимагає специфічний формат. Коли я генерував ключі, то мав ось такий sub mailto: <bohdan@stefaniuk.io><\/i>.<\/p>\n
В хромі все працювало чудово, а сафарі кидав помилку, що запит невалідний. Виявилось, що вони не підтримують пробіли та кутові лапки, замінив sub на mailto:bohdan@stefaniuk.io<\/i> і все запрацювало.<\/p>\nРеалізація бекенду<\/b><\/h2>\n
Якщо у вас macOS, то ви не зможете локально протестувати сповіщення. Проблема в тому що .NET не підтримує шифрування AesGcm на маках, тому при відправці вилетить ексепшен. Поки я не знайшов як це обійти.<\/p>\n
На стороні сервера будемо використовувати бібліотеку Lib.Net.Http.WebPush<\/i> яка під капотом буде шифрувати, підписувати та відправляти наші сповіщення. Для цього вона дає декілька базових модельок та один клас для відправки пушів.<\/p>\n
Почнемо з реалізації створення та видалення підписок та зберігання їх в БД. Для цього добавимо клас ApplicationPushSubscription, який описує структуру таблиці та підключимо його в Entity Framework контекст:<\/p>\n
public class ApplicationPushSubscription\r\n{\r\n [Key]\r\n public string P256Dh { get; set; }\r\n public string Endpoint { get; set; }\r\n public string Auth { get; set; }\r\n public Guid UserId { get; set } \/\/ Id користувача в нашій системі\r\n}\r\n\r\npublic class DatabaseContext : DbContext\r\n{\r\n public DbSet<ApplicationPushSubscription> PushSubscriptions { get; set; }\r\n}<\/code><\/pre>Тепер створимо клас PushNotificationsService в який добавимо методи для створення та видалення підписок. Метод створення буде приймати екземпляр класу PushSubscription з бібліотеки Lib.Net.Http.WebPush.<\/p>\n
Його можна було б змінити на свій клас, щоб логіка бібліотеки не просочувалась в інші модулі але задля простоти залишимо так як є.<\/p>\n
public class PushNotificationsService\r\n{\r\n private readonly DatabaseContext _context;\r\n private readonly PushServiceClient _pushClient;\r\n \r\n public PushNotificationsService (DatabaseContext context, PushServiceClient pushClient)\r\n {\r\n _context = context;\r\n _pushClient = pushClient;\r\n }\r\n \r\n public async Task CreateSubscription(Guid userId, PushSubscription pushSubscription)\r\n {\r\n var subscription = new ApplicationPushSubscription()\r\n {\r\n UserId = userId,\r\n AccountId = currentUser.AccountId,\r\n Endpoint = subscription.Endpoint,\r\n P256Dh = subscription.GetKey(PushEncryptionKeyName.P256DH),\r\n Auth = subscription.GetKey(PushEncryptionKeyName.Auth)\r\n };\r\n \r\n if (await _context.PushSubscriptions.AnyAsync(x => x.P256Dh == subscription.P256Dh))\r\n {\r\n return;\r\n }\r\n \r\n _context.PushSubscriptions.Add(subscription);\r\n \r\n try\r\n {\r\n await _context.SaveChangesAsync();\r\n }\r\n catch (DbUpdateException)\r\n {\r\n var alreadyExists = await _context.PushSubscriptions.AnyAsync(x => x.P256Dh == subscription.P256Dh);\r\n if (!alreadyExists)\r\n {\r\n throw;\r\n }\r\n }\r\n }\r\n \r\n public async Task DeleteSubscription(Guid userId, string endpoint)\r\n {\r\n var subscription = await _context.PushSubscriptions\r\n .FirstOrDefaultAsync(x => x.UserId == userId && x.Endpoint == endpoint);\r\n \r\n if (subscription == null)\r\n {\r\n return;\r\n }\r\n \r\n _context.PushSubscriptions.Remove(subscription);\r\n await _context.SaveChangesAsync();\r\n }\r\n}<\/code><\/pre>Реалізовуємо метод для відправки сповіщень нашим користувачам. Він буде приймати Id користувача якому ми відправляємо повідомлення і модель з даними.<\/p>\n
Нам залишається отримати підписку з БД, серіалізувати повідомлення в JSON і скормити це все бібліотеці.<\/p>\n
public async Task SendNotificationAsync(Guid userId, PushNotificationModel model)\r\n{\r\n try\r\n {\r\n var applicationPushSubscriptions = await _context.PushNotifications\r\n .Where(x => x.UserId == userId)\r\n .ToList();\r\n \r\n foreach(var applicationPushSubscription in applicationPushSubscriptions)\r\n {\r\n var pushSubscription = new PushSubscription();\r\n pushSubscription.Endpoint = applicationPushSubscription.Endpoint;\r\n pushSubscription.SetKey(PushEncryptionKeyName.P256DH, applicationPushSubscription.P256Dh);\r\n pushSubscription.SetKey(PushEncryptionKeyName.Auth, applicationPushSubscription.Auth);\r\n \r\n var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };\r\n var payload = JsonConvert.SerializeObject(model, settings);\r\n \r\n var pushMessage = new PushMessage(payload);\r\n await _pushClient.RequestPushMessageDeliveryAsync(\r\n pushSubscription,\r\n pushMessage,\r\n _pushClient.DefaultAuthentication,\r\n VapidAuthenticationScheme.WebPush);\r\n }\r\n }\r\n catch (PushServiceClientException exception)\r\n {\r\n if (exception.StatusCode is HttpStatusCode.NotFound or HttpStatusCode.Gone)\r\n {\r\n _context.PushSubscriptions.Remove(subscription);\r\n await _context.SaveChangesAsync();\r\n }\r\n else\r\n {\r\n \/\/ Re-Throw exception or log\r\n }\r\n }\r\n catch (Exception exception)\r\n {\r\n \/\/ Re-Throw exception or log\r\n }\r\n}<\/code><\/pre>Структура класу PushNotificationModel<\/i> досить проста та універсальна. Я передаю заголовок сповіщення, текст та додаткові дані:<\/p>\npublic class PushNotificationModel\r\n{\r\n public string Title { get; set; }\r\n public string Body { get; set; }\r\n public object AdditionalData { get; set; }\r\n}<\/code><\/pre>Підключаємо наш сервіс в ендопінт:<\/p>\n
[Route("api\/push-notifications")]\r\n[Authorize]\r\n[ApiController]\r\npublic class PushNotificationsController : ControllerBase\r\n{\r\n private readonly PushNotificationService _pushNotificationService;\r\n\r\n public PushNotificationsController(PushNotificationService pushNotificationService)\r\n {\r\n _pushNotificationService = pushNotificationService;\r\n }\r\n \r\n [HttpPost("subscriptions")]\r\n public async Task<IActionResult> CreateSubscription([FromBody] PushSubscription subscription)\r\n {\r\n var user = HttpContext.GetCurrentUser(); \/\/ Our custom method to get current logged-in user\r\n await _pushNotificationService.CreateSubscription(user.Id, subscription);\r\n return Ok();\r\n }\r\n\r\n [HttpDelete("subscriptions")]\r\n public async Task<IActionResult> DeleteSubscription([FromQuery] string endpoint)\r\n {\r\n var user = HttpContext.GetCurrentUser();\r\n await _pushNotificationService.DeleteSubscription(user.Id, endpoint);\r\n return Ok();\r\n }\r\n}<\/code><\/pre>Все що залишається — підключити наші класи в DI і все готово. Для простоти підключення можемо добавити ще один пакет Lib.AspNetCore.WebPush<\/i>.<\/p>\nservices.AddTransient<PushNotificationService>();\r\nservices.AddMemoryVapidTokenCache();\r\nservices.AddPushServiceClient(options =>\r\n{\r\n var clientOptions = configuration.GetSection(nameof(PushServiceClient));\r\n options.Subject = clientOptions.GetValue<string>(nameof(options.Subject));\r\n options.PublicKey = clientOptions.GetValue<string>(nameof(options.PublicKey));\r\n options.PrivateKey = clientOptions.GetValue<string>(nameof(options.PrivateKey));\r\n});<\/code><\/pre>Реалізація фронтенда<\/b><\/h2>\n
Підтримка технології Web Push була додана в Сафарі тільки в версії MacOS 13 та вище.<\/p>\n
Перше, що потрібно реалізувати на стороні клієнта — це запит прав на отримання сповіщень. Для цього використовуємо обʼєкт Notification<\/i>:<\/p>\n\/\/ Запит у браузера прав на підключення пушей\r\nasync function askPermission() {\r\n const permissionPromiseResult = await new Promise(function (resolve, reject) {\r\n const permissionResult = Notification.requestPermission(function (result) {\r\n resolve(result);\r\n });\r\n\r\n if (permissionResult) {\r\n permissionResult.then(resolve, reject);\r\n }\r\n });\r\n \r\n if (permissionPromiseResult !== 'granted') {\r\n alert("We weren't granted permission.");\r\n } else {\r\n await subscribeUserToPush();\r\n }\r\n}<\/code><\/pre>Після того, як отримали права, нам потрібно зареєструвати service worker в якому буде логіка відображення сповіщень, створити підписку та відправити її на наш сервер.<\/p>\n
При створенні підписки необхідно передати наш публічний ключ. Але він повинен бути в форматі масиву байтів, тому треба спочатку його декодувати і вже тоді передавати.<\/p>\n
В результаті отримуємо обʼєкт pushSubscription<\/i>, який ми відправляємо на створений раніше ендпоінт. Крім цього, ще відправляємо Bearer<\/i> токен, щоб розуміти до якого користувача привʼязати підписку.<\/p>\nconst publicKey = "vapid-public-key";\r\n\r\nasync function subscribeUserToPush() {\r\n const registration = await navigator.serviceWorker.register('\/service-worker.js');\r\n const subscribeOptions = {\r\n userVisibleOnly: true,\r\n applicationServerKey: urlBase64ToUint8Array(publicKey),\r\n };\r\n\r\n var pushSubscription = await registration.pushManager.subscribe(subscribeOptions);\r\n \r\n fetch('http:\/\/localhost:5000\/api\/push-notifications\/subscriptions', {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'Authorization': 'Bearer 1245'\r\n },\r\n body: JSON.stringify(pushSubscription)\r\n }).then(function (response) {\r\n if (response.ok) {\r\n alert('Successfully subscribed for Push Notifications');\r\n } else {\r\n alert('Failed to store the Push Notifications subscription on server');\r\n }\r\n }).catch(function (error) {\r\n console.log('Failed to store the Push Notifications subscription on server: ' + error);\r\n });\r\n \r\n return pushSubscription;\r\n}\r\n\r\nfunction urlBase64ToUint8Array(base64String) {\r\n var padding = '='.repeat((4 - (base64String.length % 4)) % 4);\r\n var base64 = (base64String + padding).replace(\/\\-\/g, '+').replace(\/_\/g, '\/');\r\n\r\n var rawData = window.atob(base64);\r\n var outputArray = new Uint8Array(rawData.length);\r\n\r\n for (var i = 0; i < rawData.length; ++i) {\r\n outputArray[i] = rawData.charCodeAt(i);\r\n }\r\n return outputArray;\r\n};<\/code><\/pre>Наш сервіс воркер буде максимально простим. Для початку додамо логіку відображення пушей та передачі в них додаткових даних з сервера.<\/p>\n
Також необхідно додати логіку обробки кліку по сповіщенню. Ми будемо перевіряти чи відкритий сайт в браузері. Якщо ні, то відкривати його в новій вкладці. А якщо у нас вже є вкладка з сайтом, то переключаємось на неї і робимо редірект на потрібну сторінку.<\/p>\n
self.addEventListener('push', function (event) {\r\n var data = event.data.json();\r\n \/\/ {\r\n \/\/ "title": "New Notification",\r\n \/\/ "body": "This is the body of the notification"\r\n \/\/ "additionalData": {\r\n \/\/ "pageId": "12512515"\r\n \/\/ }\r\n \/\/ }\r\n\r\n event.waitUntil(self.registration.showNotification(data.title, {\r\n body: data.body,\r\n icon: '\/logo.png',\r\n data: {\r\n pageId: data.additionalData?.pageId,\r\n },\r\n }));\r\n});\r\n\r\nself.addEventListener('notificationclick', function (event) {\r\n var notification = event.notification;\r\n\r\n event.waitUntil(\r\n self.clients.matchAll().then(function (allClients) {\r\n if (allClients.length === 0) {\r\n self.clients.openWindow(\r\n `${self.location.origin}\/page\/${notification?.data?.pageId}`,\r\n );\r\n notification.close();\r\n return;\r\n }\r\n\r\n allClients[0]?.navigate(`\/page\/${notification?.data?.pageId}`);\r\n allClients[0]?.focus();\r\n notification.close();\r\n }),\r\n );\r\n});<\/code><\/pre>В результаті всіх цих маніпуляцій у нас є сервер, який вміє відправляти сповіщення та клієнт, який вміє створювати підписки, відображати сповіщення та обробляти кліки.<\/p>\n
Окремо ще можна поговорити про топіки та пріоритети сповіщень, але це виходить за рамки цієї статті. Можливо, розкажу про це пізніше :)<\/p>\n
Ресурси<\/b><\/h2>\n\n- Оглад того як працюють пуші<\/a><\/li>\n
- Стаття з прикладом реалізації пушів за допомогою ASP.NET<\/a><\/li>\n
- Репозиторій з прикладами використання бібліотеки<\/a><\/li>\n<\/ul>\n",
"date_published": "2023-06-09T05:43:17+05:00",
"date_modified": "2023-06-09T05:42:47+05:00",
"tags": [
"asp.net core",
"код",
"програмування"
],
"author": {
"name": "Bohdan Stefaniuk",
"url": "https:\/\/stefaniuk.website\/",
"avatar": "https:\/\/stefaniuk.website\/pictures\/userpic\/userpic@2x.jpg?1565716580"
},
"_date_published_rfc2822": "Fri, 09 Jun 2023 05:43:17 +0500",
"_rss_guid_is_permalink": "false",
"_rss_guid": "120298",
"_rss_enclosures": [],
"_e2_data": {
"is_favourite": false,
"links_required": null,
"og_images": []
}
},
{
"id": "119847",
"url": "https:\/\/stefaniuk.website\/all\/repository-pattern\/",
"title": "Паттерн «Репозиторий»",
"content_html": "
Репозиторий один из самых популярных паттернов для доступа к данным. Он используется для абстрагирования от конкретной реализации и нюансов работы с источником данных, внешних сервисов, файловой системой и т. д.<\/p>\n
С одной стороны, это очень простой паттерн, который позволяет скрыть сложность работы с БД. Но с другой стороны, спросите 10 программистов описать этот шаблон и вы получите 10 разных реализаций.<\/p>\n
Самая большая проблема этого шаблона — множество вопросов, которые возникают при его реализации и дальнейшей поддержки.<\/p>\n
Изначально хотел сам расписать проблемы, но за меня это уже сделали, поэтому настоятельно советую прочитать статью: «Проблемы паттерна Репозиторий».<\/a><\/p>\nЕсли кратно, то:<\/p>\n
\n- Что делать если репозиториям нужно использовать закрытые методы друг друга?<\/li>\n
- Можно ли использовать один репозиторий на весь проект или делать репозиторий на каждую сущность?<\/li>\n
- Нужно ли дублировать методы репозитория в сервис или мы можем напрямую использовать репозиторий в контроллерах?<\/li>\n
- Нужно ли возвращать IQueryable и как это повлияет на дизайн системы в случае с .NET кодом? Если нет, то как правильно изменять сущности без использования Change Tracking?<\/li>\n
- Как правильно объединить репозиторий и UoW?<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/stefaniuk.website\/pictures\/repository-pattern-orm-db.png\")
\n<\/div>\n<\/div>