diff --git a/Haina/Weekly/2024/2024-W15.md b/Haina/Weekly/2024/2024-W15.md new file mode 100644 index 0000000..d10cdaf --- /dev/null +++ b/Haina/Weekly/2024/2024-W15.md @@ -0,0 +1,38 @@ +--- +Created: 2024-04-01 Mon +Updated: 2024-04-03 16:19 Wed +tags: + - 周报 +--- + +[[Haina/Yearly/2024|2024]] / [[Haina/Quarterly/2024-Q2|Q2]] / [[Haina/Monthly/2024-04|April]] / ❮ [[Haina/Weekly/2024/2024-W14|Week 14]] | Week 15 | [[Haina/Weekly/2024/2024-W16|Week 16]] ❯ / [[Haina/Daily/2024-04-01|01 Mon]] - [[Haina/Daily/2024-04-02|02 Tue]] - [[Haina/Daily/2024-04-03|03 Wed]] - [[Haina/Daily/2024-04-04|04 Thu]] - [[Haina/Daily/2024-04-05|05 Fri]] - [[Haina/Daily/2024-04-06|06 Sat]] - [[Haina/Daily/2024-04-07|07 Sun]] ❯ [[Haina/Daily/2024-04-08|08 Mon]] - [[Haina/Daily/2024-04-09|09 Tue]] - + +--- + +*2024-04-09 Tue* + +## 上周工作 + +### 重点工作 + +1. + +### 维护工作 + +#### 销售IM + +1. 模板消息: 参数输入去除格式化字符; +2. 失败消息: 增加提示 +3. 刷新后service worker检测更新 +4. 在线窗口: 会话排序优化 +5. [?] 消息内容丢失: 附件, ✅视频 +6. [?] 重连之后刷新 +7. [ ] 会话列表分页 + +#### 面试 + +1. react-admin + +## 本周计划 + +1. diff --git a/Haina/项目/SCRM/PWA Badge API.md b/Haina/项目/SCRM/PWA Badge API.md new file mode 100644 index 0000000..1c7e03d --- /dev/null +++ b/Haina/项目/SCRM/PWA Badge API.md @@ -0,0 +1,69 @@ +Yes, you can add a badge number (or badge count) to your Progressive Web App (PWA). This feature allows you to display a numerical value or a small badge icon on the app's icon, typically on the device's home screen or app launcher. This can be useful for displaying notifications, unread counts, or other relevant information to the user. + +To implement this feature in your PWA, you need to use the Web App Manifest file (manifest.json) and the Notifications API or the Badging API (if supported by the browser). + +Here's a general approach: + +1. **Web App Manifest**: + In your manifest.json file, ensure that you have the `badges` member defined in the `icons` array. This specifies the purpose of the icon and allows you to set a badge count or a small monochrome icon. + + ```json + { + "icons": [ + { + "src": "icon.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any maskable" + }, + { + "src": "badge.png", + "sizes": "48x48", + "type": "image/png", + "purpose": "badge" + } + ] + } + ``` + +2. **Set Badge Count**: + You can use the Badging API (if supported by the browser) to set the badge count. This API is available in modern browsers like Chrome, Firefox, and Edge. + + ```javascript + navigator.setAppBadge(42).catch(error => { + console.log('Failed to set badge:', error); + }); + ``` + + If the Badging API is not supported, you can use the Notifications API as a fallback to display the badge count as a notification. + + ```javascript + const permission = await Notification.requestPermission(); + if (permission === 'granted') { + const notification = new Notification('My App', { + body: 'You have 42 new notifications', + badge: 'badge.png', + icon: 'icon.png', + }); + } + ``` + +3. **Clear Badge Count**: + To clear the badge count, you can use the `clearAppBadge()` method of the Badging API or clear the notification using the Notifications API. + + ```javascript + navigator.clearAppBadge().catch(error => { + console.log('Failed to clear badge:', error); + }); + ``` + + Or, for the Notifications API: + + ```javascript + // Close the notification to clear the badge + notification.close(); + ``` + +Keep in mind that the Badging API and the Notifications API have varying levels of support across different browsers and platforms. You may need to implement fallback mechanisms or use third-party libraries to ensure cross-browser compatibility. + +Additionally, some platforms (like iOS) have different requirements for displaying badge counts on PWA icons. You may need to follow platform-specific guidelines and use additional techniques to achieve the desired behavior. \ No newline at end of file diff --git a/Haina/项目/SCRM/SCRM需求和背景.md b/Haina/项目/SCRM/SCRM需求和背景.md new file mode 100644 index 0000000..576b0ab --- /dev/null +++ b/Haina/项目/SCRM/SCRM需求和背景.md @@ -0,0 +1,57 @@ +--- +Created: 2023-09-09 Sat +Updated: 2023-10-23 11:50 Mon +--- + +## Kimkim + +kimkim的描述: + +- 顾问共享行程设计, 检索和重复使用, 创建副本, 重视个性化 +- 用户信息自动应用, 减少复制粘贴和输入错误 +- 行程设计: 固定的日期模板 +- 销售的最小单位: Activity +- 积极跟踪 +- 移动端和PC端体验差异减小 + +顾问反馈: + +- 不卡 +- 用户体验好, 操作流程清晰 +- 交互性好: 对报价的反馈; 删除内容, 控制预算 +- 数据统计: 服务量, 服务效率 + +## WhatsApp 数据获取备份和分析 + +- [Baileys](https://github.com/WhiskeySockets/Baileys) + - 使用WhatsApp 多设备接口, 使同时登录以获取消息记录 + - 存储和分析以及其他需求自行开发 + - 免费 + - 有风险. 这个方法属于是WhatsApp的逆向工程\ + *WhatsApp要卖自己的商务服务, 按会话收费, 基于此的二次开发仓库都被要求删库, 社区目前还是积极的* +- [WADesk](https://wadesk.io/) + +## 客服系统 + +### 需求 + +- 促进即时通讯, 能够群聊 +- 管理沟通中的业务节点. 响应业务状态的变化 +- 结合业务节点, 方便快捷地帮助顾问 +- 希望达到Kim Kim那样, 在沟通中能迅速获取客户信息, 行程信息 + +对于自定业务的具体需求, 目前没有十分契合的供应商能够提供, 或者很贵 + +- WhatsApp官方api基于会话收费, 目前尚不支持群聊功能, 预计2024上半年开放 +- 开发费用 + +## 总结 + +1. 仅需获取WhatsApp沟通内容, 基于Baileys自主开发就行(与蜂巢原理一样). 或者继续使用蜂巢的服务 + - 消息记录存档 + - 对消息记录的数据分析. +2. 客服系统 + - 仅作沟通工具, 不嵌入业务: 保持目前的流程, 上述[1] + - 需要深入地辅助业务, 逐步达到取代邮件, 完全基于实际业务开发的客服系统 + - 扩展: 除了WhatsApp之外, 接入其他IM渠道 + - 选择社区框架还是官方接口? diff --git a/Haina/项目/SCRM/Vite PWA.md b/Haina/项目/SCRM/Vite PWA.md new file mode 100644 index 0000000..db75cff --- /dev/null +++ b/Haina/项目/SCRM/Vite PWA.md @@ -0,0 +1,175 @@ +# Converting Your React-Vite App into PWA. _ by Rakesh Dhariwal _ Medium + +(https://medium.com/@rakeshdhariwal61/converting-your-react-vite-app-into-pwa-d7211e9cd0c5) + +**Lame Definition goes as:** PWA stands for progressive web-app which allow to run your webpage offline. Like, we see on many webpages whenever we do to visit to a particular webpage, a pop-up will appear in the search-bar of the browser which says, install as a web-app. Like, YouTube, GitHub, Code sandbox. + +A progressive web app (PWA) is an app that’s built using web platform technologies, but that provides a user experience like that of a platform-specific app. + +Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed app. + +Learn more from [Mdn Web Docks](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps). + +Pre-requisite. + +While, converting your app to PWA you, must need to follow some set of rules. Which you can found, by using [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) (Chrome Extension), all you just have to do is, open your webpage click on inspect, select Light House from toolbar section. + +![](https://miro.medium.com/v2/resize:fit:700/1*_qNbmOl8q2nd_IU_bgMeUg.png) + +If, you just want to generate the report for PWA un-select other options. + +Then, click on analyze page load. It will generate the report what your webpage is missing. + +If, you are working on React-Vite app it will be pretty simple for you to convert your React-Vite app to PWA. + +1. Install vite-plugin-pwa. + +``` +npm install vite-plugin-pwa + +yarna add vite-plugin-pwa +``` + +2\. Open the vite.config.js from root folder of you’r react-vite-app and import VitePWA. + +``` +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import { VitePWA } from "vite-plugin-pwa"; +``` + +3\. VitePwa take one argument (A pure JavaScript object). This, js object define our, manifest for your project. + +> The manifest object will contain some basic information about our webpage. +> +> You can create manifest.js anywhere you want inside the root folder of your project and import it into vite.config.js in this tutorial I am, creating the manifest in vite.config.js itself. + +``` + +const manifestForPlugIn = { + registerType:'prompt', + includeAssests:['favicon.ico', "apple-touc-icon.png", "masked-icon.svg"], + manifest:{ + name:"React-vite-app", + short_name:"react-vite-app", + description:"I am a simple vite app", + icons:[{ + src: '/android-chrome-192x192.png', + sizes:'192x192', + type:'image/png', + purpose:'favicon' + }, + { + src:'/android-chrome-512x512.png', + sizes:'512x512', + type:'image/png', + purpose:'favicon' + }, + { + src: '/apple-touch-icon.png', + sizes:'180x180', + type:'image/png', + purpose:'apple touch icon', + }, + { + src: '/maskable_icon.png', + sizes:'512x512', + type:'image/png', + purpose:'any maskable', + } + ], + theme_color:'#171717', + background_color:'#f0e7db', + display:"standalone", + scope:'/', + start_url:"/", + orientation:'portrait' + } +} +``` + +Now, you need to generate favicon and maskable icon for you webapp. + +and pass this object to VitePWA(manifestForPulgIn). + +Also, you have to add the VitePWA in plugins array. + +``` +export default defineConfig({ + plugins: [react(), VitePWA(manifestForPlugIn)], +}) +``` + +``` +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import { VitePWA } from "vite-plugin-pwa"; +const manifestForPlugIn = { + registerType:'prompt', + includeAssests:['favicon.ico', "apple-touc-icon.png", "masked-icon.svg"], + manifest:{ + name:"React-vite-app", + short_name:"react-vite-app", + description:"I am a simple vite app", + icons:[{ + src: '/android-chrome-192x192.png', + sizes:'192x192', + type:'image/png', + purpose:'favicon' + }, + { + src:'/android-chrome-512x512.png', + sizes:'512x512', + type:'image/png', + purpose:'favicon' + }, + { + src: '/apple-touch-icon.png', + sizes:'180x180', + type:'image/png', + purpose:'apple touch icon', + }, + { + src: '/maskable_icon.png', + sizes:'512x512', + type:'image/png', + purpose:'any maskable', + } + ], + theme_color:'#171717', + background_color:'#f0e7db', + display:"standalone", + scope:'/', + start_url:"/", + orientation:'portrait' + } +} + +export default defineConfig({ + plugins: [react(), VitePWA(manifestForPlugIn)], +}) +``` + +> Favicon generator: [Favicon.io](https://favicon.io/) +> +> Maskable Icon Generator: [Maskable.app](https://maskable.app/) + +4\. Place all the generated assets into to public folder. + +![](https://miro.medium.com/v2/resize:fit:539/1*ZtH_nlHIpYNI4B_ni6wrLg.png) + +Make sure, you provided the proper size and type of image. + +5\. Build, your project and deploy it as PWA doesn’t work in development. + +``` +npm run build. +//or +yarn run build +``` + +6\. Open your webpage and you will see a pop-up install. + +![](https://miro.medium.com/v2/resize:fit:656/1*W1XFpvnV8INSxH5HugnVnQ.png) + +If, it doesn’t appear in your case, make sure your entered everything correct in the manifestForPlugIn, more over you can check what you are missing, my seeing the logs or by generating Report from Lighthouse. \ No newline at end of file diff --git a/Haina/项目/SCRM/YCloud webhook retry.md b/Haina/项目/SCRM/YCloud webhook retry.md new file mode 100644 index 0000000..de97e9e --- /dev/null +++ b/Haina/项目/SCRM/YCloud webhook retry.md @@ -0,0 +1,6 @@ +#### 推送时间间隔 +1. 0s +2. +20s +3. +5min + 10s +4. +30min + 10s +5. +60min \ No newline at end of file diff --git a/Haina/项目/SCRM/一期总结.md b/Haina/项目/SCRM/一期总结.md new file mode 100644 index 0000000..591876c --- /dev/null +++ b/Haina/项目/SCRM/一期总结.md @@ -0,0 +1,8 @@ + +## 项目目标和成果 +### 三个目标 +## 项目过程和管理 + +## 技术实施和挑战 + +## 改进和优化 \ No newline at end of file