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/分享&培训/Converting Your React-Vite App into PWA. _ by Rakesh Dhariwal _ Medium.md b/Haina/项目/SCRM/Vite PWA.md similarity index 98% rename from Haina/分享&培训/Converting Your React-Vite App into PWA. _ by Rakesh Dhariwal _ Medium.md rename to Haina/项目/SCRM/Vite PWA.md index 013b615..db75cff 100644 --- a/Haina/分享&培训/Converting Your React-Vite App into PWA. _ by Rakesh Dhariwal _ Medium.md +++ b/Haina/项目/SCRM/Vite PWA.md @@ -1,3 +1,5 @@ +# 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. diff --git a/Haina/项目/SCRM/YCloud webhook.md b/Haina/项目/SCRM/YCloud webhook retry.md similarity index 100% rename from Haina/项目/SCRM/YCloud webhook.md rename to Haina/项目/SCRM/YCloud webhook retry.md