消息通知-內容更新提示小紅點如何實現？

當內容更新時，須要在入口加上小紅點提示，這種需求家常便飯，實現起來也不復雜。實現的場景有不少，web 端、app 端、小程序端等等，實現思路大同小異，本文從有無登陸態兩種情形，講述解決問題的完整思路。

有登陸態

比較常規的作法是有用戶登陸態的狀況，將用戶的已讀時間錄入至後臺的用戶數據信息中，當內容更新時，把內容更新時間和用戶已讀時間作對比，若是用戶已讀時間早於內容更新時候，在入口處給用戶提示小紅點，表示有更新內容未讀。

1. 更新數據

第一步是更新數據，在常規數據字段以外，須要注意新增更新時間字段。這樣用戶在獲取數據時，才方便後臺對比數據更新時間和用戶已讀時間。

2. 獲取數據

第二步是獲取數據，在獲取數據的時候，帶上 userId，後臺在接收到請求以後，查詢該用戶上次的已讀時間，判斷該用戶是否瀏覽過最新的內容，也就獲取到用戶的已讀未讀狀態。

若是用戶最新閱讀時間晚於數據最新更新時間，則處於未讀狀態，接口返回is_read: false，前端拿到該字段後，請求設置已讀的接口，後臺接收到設置已讀的請求後，更新用戶數據中的已讀時間字段。

若是用戶最新閱讀時間晚於數據最新更新時間，則處於已讀狀態，此時沒有內容更新，不提示用戶小紅點。

到這裏，一個簡單的擁有用戶登陸態的內容更新提示小紅點的功能就完成了。

沒有登陸態

當內容須要推送給遊客狀態的用戶時，怎麼才能知道該用戶是否瀏覽過最新發布的內容呢？

1. 更新數據

更新數據和有登陸態的作法同樣，新增更新時間字段就能夠了。

2. 獲取數據

獲取數據這一步有些不同，數據更新時間依然是從後臺拉取，用戶最新閱讀時間則是從瀏覽器本地緩存 localStorage 中獲取。用戶首次進入內容頁時，更新 localStorage 中的readTime 字段，表示用戶已讀時間。

再次進入內容頁時，將 localStorage 中的已讀時間與數據更新時間對比，決定是否更新 localStorage 中的已讀時間，這樣就能夠實現內容更新時提示小紅點，內容未更新時不提示了。可是因爲沒有登陸態，是否讀過最新內容不是根據用戶來決定的，而是根據客戶端瀏覽器決定，適用於弱綁定的場景。

總結

本文分享了內容更新時提示小紅點的解決思路，但願本文能讓你瞭解怎麼去作消息通知的-內容更新小紅點提示的實現過程。