electron之win/mac通知免打擾

目錄

系統區別

win:不支持桌面通知,使用氣泡顯示

mac:有鏡像/共享屏幕時 通知免打擾設置

代碼

Vuex:免打擾狀態

src/store/App/mutations.ts

src/store/App/state.ts

src/views/miracast/index.vue

Util

【可選】src/util/ipcUtil.ts:重寫ipc【日志記錄】

src/util/webimutil.ts:判斷系統、通知

通知

樣式

html

css

參考鏈接


系統區別

win:不支持桌面通知,使用氣泡顯示

window.Electron && window.Electron.ipcRenderer.send()

mac:有鏡像/共享屏幕時 通知免打擾設置

const notification =new Notification(title,option)

且通知樣式是固定的,只能傳部分參數

?? ??? ?/**
?? ??? ? * title: "字符串"
?? ??? ? * option: {
?? ??? ? * ?body: "xxxxx",
?? ??? ? * ?tag: "IM",
?? ??? ? * ?icon: ""
?? ??? ? * }
?? ??? ? */

new后會在用戶設備的通知中心中創建一個通知條目,

notification.show();手動顯示通知,

但一般是把條目按需放在通知中心,等待顯示

代碼

Vuex:免打擾狀態

src/store/App/mutations.ts

? ? SET_NOTIFY_MUTED(state:any, value:any) {state.notifyMuted= value;},

src/store/App/state.ts

? ? notifyMuted:false,//通知免打擾

src/views/miracast/index.vue

  <el-checkbox v-model="isMuted" @change="toggleMute">投屏后不彈出新消息提示</el-checkbox>watch:{castStatus(newStatus:string){if(newStatus=='isCasting'&&this.isMuted){this.$store.commit('App/SET_NOTIFY_MUTED',true);}else{this.$store.commit('App/SET_NOTIFY_MUTED',false);}}},methods:{toggleMute() {     if(this.castStatus=='isCasting'&&this.isMuted){this.$store.commit('App/SET_NOTIFY_MUTED',true);}else{this.$store.commit('App/SET_NOTIFY_MUTED',false);}},
}

Util

【可選】src/util/ipcUtil.ts:重寫ipc【日志記錄】

src/util/webimutil.ts:判斷系統、通知

import ipcUtil from '@/util/ipcUtil';const userAgent = window.navigator.userAgent.toLowerCase();
const ipc = window.Electron && window.Electron.ipcRenderer;/*** @desc 判斷系統類型*/
export const checkWin = () => {let sUserAgent = navigator.userAgent;let isWin = sUserAgent.indexOf('Windows') > -1;return isWin;
};//在瀏覽器環境中,window 是全局對象,不需要前綴
export const isMac() = () => {return /macintosh|mac os x/i.test(navigator.userAgent);
},
export class NotificationHelper {static isNotificationSupported() {return typeof Notification === 'function' || typeof Notification === 'object';}static requestPermission() {if (!NotificationHelper.isNotificationSupported()) {return;}Notification.requestPermission().then(function(permission) {console.log('用戶是否允許通知: ', permission === 'granted' ? '允許' : '拒絕');});}static showNotification(title: any, option: any, content: any) {//(正在聚焦、沒有隱藏、主會話頁)|| 免打擾  時 不通知if ((store.state.App.appIsFocus && !document.hidden && content.$route.path == '/main/conversation')||store.state.App.notifyMuted) {return;}// win不支持桌面通知if (checkWin()) {//氣泡顯示ipc.send('display-balloon', title, option);//閃爍圖標ipc.send('flash-dock');return;}if (!NotificationHelper.isNotificationSupported()) {return;}if (Notification.permission !== 'granted') {NotificationHelper.requestPermission();}/*** title: "字符串"* option: {*  body: "xxxxx",*  tag: "IM",*  icon: ""* }*/let notify = new Notification(title, {...option,silent: true, //是否保持靜默});notify.onshow = function() {};notify.onclick = function() {};notify.onclose = function() {};notify.onclose = function() {};notify.onerror = function() {};}
}

通知

	webimutil.NotificationHelper.showNotification('視頻會議',{icon: 'assets/img/meishi.ico',body: '您的賬號在其他地方登錄!',silent: true,},this,);

樣式

html

  <el-checkbox v-model="isMuted" @change="toggleMute">投屏后不彈出新消息提示</el-checkbox><el-popoverv-if="!isWin"placement="top-end"trigger="hover"     popper-class="info-popover"><div class="mute-tip"><dl><dd>沒有彈出新消息提示,請前往設置</dd><dd>[設置]-[通知]-[當鏡像或共享屏幕時允許通知]</dd></dl><img src="../../assets/img/miracast/mac_mute.png" alt="示例圖片" ></div><i slot="reference" class="el-icon-info"></i></el-popover>

css

    .info-popover{width: 328px;height: 206px ;background-color: rgba(255, 255, 255, 1);border: 1px solid rgba(206, 212, 224, 1);border-radius: 6px;box-shadow: 0px 4px 12px 0px rgba(27, 28, 30, 0.1);.mute-tip{display: flex;flex-direction: column;justify-content: space-around;height: 96%;                   text-align: center;align-items: center;dl{padding-top: 7px;}dd {font-size: 14px;font-weight: 400;line-height: 26px;color: #A8ACB3;}img {padding: 7px 0;width: 296px;height: 110px;border-radius: 8px;}}}

參考鏈接

通知 | Electron

通知(Notifications) | Electron

Notifications | Apple Developer Documentation

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/96048.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/96048.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/96048.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

為什么Integer緩存-128 ~ 127

背景 面試題, 相關問題的考察. 題目大概是, 包裝類型Integer 比較的時候 : -127 ~ 128 是否相等. 其他是否相等? 原理比較的是地址. 如果是不同的對象, 那么就不相等. 實踐 下面是幾個簡單實踐. 全部新建對象 解釋: 新建對象后, 地址不同, 所以都是false不新建對象 暫時的理解…

微軟Wasm學習-創建一個最簡單的c#WebAssembly測試工程

要創建一個最簡單的微軟 WebAssembly&#xff08;Wasm&#xff09;測試工程&#xff0c;最直接的方式是使用 Blazor WebAssembly&#xff0c;這是微軟官方推薦的 WebAssembly 開發框架。下面是創建和運行最簡單 Blazor WebAssembly 項目的步驟&#xff1a; 相關&#xff1a;微…

通過 GitHub520 項目自動獲取最新 Hosts 配置,無需手動查詢 IP。

操作步驟&#xff1a;打開終端Command 空格 聚焦搜索“終端”&#xff0c;打開應用。執行一鍵腳本復制以下命令粘貼到終端運行&#xff08;需輸入密碼授權&#xff09;&#xff1a;bashsed -i "" "/# GitHub520 Host Start/,/# Github520 Host End/d" /et…

C# 目錄與文件操作筆記

一、基本概念1. 數據存儲方式對比存儲方式適用場景特點數據庫存儲大量、關系復雜、有序的數據結構化強&#xff0c;支持復雜查詢和事務文件存儲少量、關系簡單的數據&#xff08;如日志&#xff09;操作簡便&#xff0c;可存儲于任意介質2. 文件與流文件&#xff1a;存儲在磁盤…

docker部署flask并遷移至內網

需要直接使用的可以使用下面的鏈接&#xff1a; 通過網盤分享的文件&#xff1a;docker_flask.tar 鏈接: https://pan.baidu.com/s/163ocPFw8cqfXgVXeejv36g?pwdqxqm 提取碼: qxqm 來自百度網盤超級會員v6的分享 外網部署docker版flask 目錄結構 ./miniconda-docker/ ├── d…

161. Java Lambda 表達式 - 使用工廠方法創建 Predicates

文章目錄161. Java Lambda 表達式 - 使用工廠方法創建 Predicates&#x1f3af; Predicate 工廠方法概覽&#x1f9ea; 示例一&#xff1a;Predicate.isEqual() 工廠方法&#x1f9ea; 示例二&#xff1a;Predicate.not() 工廠方法&#xff08;Java 11&#xff09;&#x1f3af…

c#Blazor WebAssembly在網頁中多線程計算1000萬次求余

在 Blazor WebAssembly 中實現多線程計算并獲取線程 ID 是可行的&#xff0c;但需要正確配置多線程環境并處理線程安全和 UI 更新邏輯。以下是完整示例和檢測方法&#xff1a;一、準備工作&#xff1a;啟用多線程支持首先需確保項目已啟用 WebAssembly 多線程&#xff0c;修改項…

鼠標右鍵沒有“通過VSCode打開文件夾”

1, WinR 打開運行&#xff0c;輸入regedit&#xff0c;打開注冊表&#xff0c;找到HKEY_CLASSES_ROOT\*\shell分支&#xff0c;如果沒有shell分支&#xff0c;則在*下點擊右鍵&#xff0c;選擇“新建&#xff0d;項”&#xff0c;建立shell分支。 2, 在shell下新建“VisualCod…

[ Spring 框架 ] 框架搭建和屬性賦值

目錄 1. Spring定義: (1). IOC( Inversion of Control): (2). AOP (Aspect Oriented Programming): (3)一站式: 2. spring搭建: (1). 創建一個Maven項目 (2). 導入核心 jar包 (3). 編寫 spring 配置文件 (4). 編寫實體類,并生成set方法 (5). 在resource中加入spring核…

前端 大文件分片下載上傳

前端 大文件分片下載上傳 背景介紹&#xff1a; 當前項目是給投行部門做系統&#xff0c;業務方需要有專門的文檔中心去管理文件&#xff0c;包括但是不限于文件的上傳和下載等等。筆者本來就是采用的瀏覽器表單上傳的方式進行文件上傳&#xff0c;但是誰曾想在進行稍微大一點的…

【Python練習】097. 編寫一個函數,實現簡單的版本控制工具

097. 編寫一個函數,實現簡單的版本控制工具 097. 編寫一個函數,實現簡單的版本控制工具 示例代碼 功能說明 使用方法 注意事項 實現方法 基于文件快照的實現方法 基于差異存儲的實現方法 基于命令模式的實現方法 基于Git-like的實現方法 097. 編寫一個函數,實現簡單的版本控…

嵌入式硬件篇---Tof

TOF 的原理與本質TOF&#xff08;Time of Flight&#xff0c;飛行時間&#xff09;是一種通過測量信號&#xff08;通常是光&#xff09;在空間中傳播時間來計算距離的技術。其本質是利用 “距離 速度 時間” 的物理公式&#xff1a;通過發射信號&#xff08;如激光、紅外光&…

Vue diff簡介

Vue3 diff 最長遞增子序列雙端diff 理念 相同的前置和后置元素的預處理&#xff0c;考慮邊界情況&#xff0c;減少移動&#xff1b;最長遞增子序列&#xff08;動態規劃、二分法&#xff09;&#xff0c;判斷是否需要移動 操作 前置與后置預處理判斷是否需要移動 遞增法&#x…

羅技MX Anywhere 2S鼠標修復記錄

【現象】單擊時總是出現雙擊的現象 【問題原因】從網絡收集&#xff1a; 說法1&#xff0c;歐姆龍微動損壞&#xff1b;說法2&#xff0c;按鍵磨損導致按鍵和微動開關接觸不良&#xff1b; 【問題排查】 微動損壞&#xff1a;拆掉殼子后&#xff0c;用手按住左鍵的微動開關&…

常見IP模塊的仲裁策略和實現

在一個 Message Unit 中包含兩個 Core&#xff08;處理器核心&#xff09;&#xff0c;它們之間訪問共享資源&#xff08;如寄存器、FIFO、buffer 等&#xff09;時&#xff0c;仲裁機制&#xff08;Arbitration&#xff09; 是確保系統穩定性和正確性的關鍵。以下是常見的仲裁…

上周60+TRO案件,波比的游戲時間/丹迪世界/飛盤/迪奧/多輪維權,手表/汽車品牌持續發力,垃圾桶專利等新增侵權風險!

賽貝整理上周&#xff08;2025年8月11日-8月15日&#xff09;的TRO訴訟案件發案情況&#xff0c;根據賽貝TRO案件查詢系統了解到&#xff0c;上周合計發起了超60起訴訟案件&#xff0c;涵蓋 IP /品牌、版權、專利等多個領域&#xff0c;涉及影視、奢侈品、汽車、游戲、日常用品…

用 Python 在 30 分鐘內搭一個「可回放的實時日志」——把攻擊流量變成可視化劇情

業務背景 我們運營一款 FPS 端游&#xff0c;外掛作者常把 DDoS 偽裝成「玩家掉線」來騙客服。以前排查要撈 CDN 日志、對時間戳、人工比對&#xff0c;平均 2 小時才能定位。現在用一條 30 行的 Python 腳本把邊緣節點日志實時打到 Kafka&#xff0c;再回放到 Grafana&#xf…

如何將 LM Studio 與 ONLYOFFICE 結合使用,實現安全的本地 AI 文檔編輯

人工智能正在改變我們的工作方式——但如今大多數 AI 工具都存在弊端&#xff1a;速度和便利性雖有所提升&#xff0c;但也意味著數據需要發送到外部服務器。對于教育工作者、企業、非政府組織以及任何處理敏感信息的人來說&#xff0c;這都是不可接受的風險。 LM Studio 和 O…

超市電商銷售分析項目:從數據分析到業務決策

國際超市電商銷售數據分析實戰&#xff1a;從數據清洗到業務決策的完整流程 在電商行業&#xff0c;數據是驅動業務增長的核心引擎。本文將以國際超市電商銷售數據為研究對象&#xff0c;完整拆解從數據準備 → 深度分析 → 策略輸出的實戰流程&#xff0c;涵蓋數據清洗、多維度…

GitHub 熱榜項目 - 日榜(2025-08-17)

GitHub 熱榜項目 - 日榜(2025-08-17) 生成于&#xff1a;2025-08-17 統計摘要 共發現熱門項目&#xff1a;12 個 榜單類型&#xff1a;日榜 本期熱點趨勢總結 本期GitHub熱榜呈現三大技術趨勢&#xff1a;1) AI基礎設施持續爆發&#xff0c;Archon OS和Parlant聚焦AI任務管…