Tích hợp API Thông báo Web với Stream Chat
- Tram Ho
Hiện nay, có nhiều ứng dụng thông báo cho người dùng những tin nhắn quan trọng liên quan đến ứng dụng của họ bằng cách gửi đi những thông báo – điều này có thể thông qua thông báo đẩy hoặc web. Với một thông báo web, một người dùng có thể click vào thông báo và ngay lập tức đi đến ứng dụng để tiếp tục hoạt động trên phần nội dung đó.
Với các ứng dụng Stream Chat, một trường hợp có thể gửi thông báo khi có tin nhắn mới đến, như là Slack, WhatsApp, tin nhắn Facebook, v.v…
Trong bài này, bạn sẽ học cách sử dụng API thông báo Web – một đặc điểm của web – để hiện thông báo khi có tin nhắn đến ứng dụng của bạn.
Chuẩn bị cho dự án
Chúng ta sẽ làm ví dụ với dự án React. Để làm được, bạn sẽ phải clone một Project React đơn giản từ Github. Dự án này đồng hành với một bài hướng dẫn dựng giao diện ứng dụng trò chuyện với React và Stream Chat. Mở ứng dụng command-line và parse dòng sau vào terminal của bạn:
1 2 | git clone https://github.com/pmbanugo/react-conversational-ui-tutorial.git && cd react-conversational-ui-tutorial && yarn install |
Dùng API Thông báo
Câu lệnh bạn vừa chạy tải về project và cài đặt các phụ thuộc được yêu cầu để run app. Chúng tôi sẽ thêm các chỉnh sửa với app để người dùng được thông báo khi có tin nhắn mới đến.
Điều đầu tiên chúng ta cần làm để dùng API đúng cách là yêu cầu sự chấp nhận từ người dùng để cho phép ứng dụng của chúng ta gửi các thông báo hệ thống từ trình duyệt.
Bằng cách đề nghị sự chấp thuận, API Thông báo sẽ cho phép người dùng điều khiển cái mà ứng dụng được cho phép để hiển thị thông báo, cũng như cái nào không được. Khi đã thực hiện một lựa chọn, các cài đặt nói chung vẫn tồn tại cho phiên hiện tại và cả tương lai.
Yêu cầu sự chấp nhận
API Thông báo hiển thị một phương thức requestPermission() được yêu cầu để yêu cầu sự chấp nhận để hiển thị thông báo đến người dùng. Chúng tối sẽ yêu cầu sự chấp thuận khi ứng dụng được load.
Mở project trong IDE mà bạn ưa thích và mở file src/App.js.
Sau đó, thêm code dưới đây vào lớp:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">askNotificationPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function-variable function">askNotificationPermission</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// check if the browser supports notifications</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">"Notification"</span> <span class="token keyword">in</span> window<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">checkNotificationPromise</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> permission <span class="token operator">=</span> <span class="token keyword">await</span> Notification<span class="token punctuation">.</span><span class="token function">requestPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handlePermission</span><span class="token punctuation">(</span>permission<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> Notification<span class="token punctuation">.</span><span class="token function">requestPermission</span><span class="token punctuation">(</span><span class="token parameter">permission</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handlePermission</span><span class="token punctuation">(</span>permission<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This browser does not support notifications."</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token function-variable function">handlePermission</span> <span class="token operator">=</span> <span class="token parameter">permission</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token string">"permission"</span> <span class="token keyword">in</span> Notification<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> Notification<span class="token punctuation">.</span>permission <span class="token operator">=</span> permission<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Trong đoạn code trên, chúng ta đã thêm một phương thức tên là askNotificationPermission() cái mà được gọi khi component được mounted.
Phương thức askNotificationPermission() đầu tiên kiểm tra xem trình duyệt có hỗ trợ API Thông báo hay không. Nếu có, nó gọi checkNotificationPromise() để kiểm tra xem trình duyệt có hỗ trợ phiên bản promise-based của Notification.requestPermission() hay không, và dựa trên kết quả này, nó sẽ gọi một trong hai: promised-based API version hoặc callback-based version.
Khi một người dùng đáp lại yêu cầu chấp thuận, chúng ta sẽ gọi phương thức handlePermission(permission) cái mà sẽ cài đặt một cách rõ ràng giá trị của Notification.permission bởi vì phiên bản cũ của Chrome không tự động làm điều này.
Chúng ta đã nhắc đến là ta phải kiểm tra xem liệu trình duyệt có hỗ trợ promise-based version hay không của Notification.requestPermission(). Chúng ta đã làm điều này với một lần gọi đến phương thức `this.checkNotificationPromission(). Hãy thêm định nghĩa cho phương thức này:
1 2 3 4 5 6 7 8 9 10 | <span class="token function">checkNotificationPromise</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> Notification<span class="token punctuation">.</span><span class="token function">requestPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Điều mà phương thức này làm là gọi phương thức .then() trong Notification.requestPermission() và sau đó trả về true nếu nó không ném ra lỗi, hoặc trả về false nếu nó có.
Hiện thông báo
Một thông báo được hiển thị khi ta gọi instance Notification bằng constructor. Constructor phải được truyền một đối số title, và có thể lựa chọn truyền thêm đối tượng options để phân loại các lựa chọn như text direction, body text, và hơn thế nữa.
Hãy tạo một phương thức mà sẽ chịu trách nhiệm cho điều này và gọi phương thức này trong phương thức onNewMessage.
Thêm một phương thức tên là createNotification:
1 2 3 4 5 6 | <span class="token function">createNotification</span><span class="token punctuation">(</span><span class="token parameter">message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Notification</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>message<span class="token punctuation">.</span>author<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> sent a message</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> body<span class="token operator">:</span> message<span class="token punctuation">.</span>text <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Phương thức này chấp nhận tin nhắn như là những đối số. Nó gọi constructor Notification() với một tiêu đề dùng tin nhắn văn bản là phần thân văn bản của thông báo.
Bây giờ chúng ta sẽ gọi phương thức này bên trong phương thức onNewMessage. Thêm code dưới đây vào sau dòng 77
1 2 3 4 | <span class="token keyword">if</span> <span class="token punctuation">(</span>message<span class="token punctuation">.</span>author<span class="token punctuation">.</span>id <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">createNotification</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Với code vừa thêm, thông báo sẽ chỉ tạo ra nếu tác giả của tin nhắc gần đây không đăng nhập người dùng.
Đặt tất cả lại với nhau
Hãy xem cách điều này hoạt động trên trình duyệt. Chúng ta sẽ chạy ứng dụng React, nhưng chúng ta cũng cần một API để sinh các user access token cho Stream Chat client. Chúng ta sẽ dùng dự án mà bạn có thể tìm kiếm trên Github. Theo dõi hướng dẫn trong file README để cài đặt và bắt đầu ứng dụng. Khi nó đã được bắt đầu, bắt đầu ứng dụng React bằng cách chạy yarn start trong command line.
demo
Kết thúc
Xong rồi! Bạn đã biết được cách dùng API Thông báo để hiển thị thông báo. Để sử dụng API này, đầu tiên bạn cần có sự chấp thuật từ người dùng bằng cách gọi Notification.requestPermission() và sau đó tạo thông báo sử dụng constructor Notification(), truyền và title và đối tượng options.
Code của hướng dẫn này 100% là mã nguồn mở và có sẵn trên Github he he