{"id":13695762,"url":"https://github.com/ali-master/pwa-badge","last_synced_at":"2025-05-07T07:33:28.552Z","repository":{"id":57343079,"uuid":"327434590","full_name":"ali-master/pwa-badge","owner":"ali-master","description":"Badging for PWA app icons, Like Native Apps","archived":false,"fork":false,"pushed_at":"2021-01-12T11:54:06.000Z","size":1080,"stargazers_count":157,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-01T16:01:45.692Z","etag":null,"topics":["android","angular","badge-api","badge-count","icon","ios","javascript","macos","progressive-web-app","progressive-web-apps","pwa","pwa-apps","react","reactpwa","vue","windows"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ali-master.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-06T21:36:32.000Z","updated_at":"2025-02-11T01:16:33.000Z","dependencies_parsed_at":"2022-09-17T06:21:17.510Z","dependency_job_id":null,"html_url":"https://github.com/ali-master/pwa-badge","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ali-master%2Fpwa-badge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ali-master%2Fpwa-badge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ali-master%2Fpwa-badge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ali-master%2Fpwa-badge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ali-master","download_url":"https://codeload.github.com/ali-master/pwa-badge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252833789,"owners_count":21811254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","angular","badge-api","badge-count","icon","ios","javascript","macos","progressive-web-app","progressive-web-apps","pwa","pwa-apps","react","reactpwa","vue","windows"],"created_at":"2024-08-02T18:00:33.202Z","updated_at":"2025-05-07T07:33:28.523Z","avatar_url":"https://github.com/ali-master.png","language":"JavaScript","funding_links":[],"categories":["Tools","JavaScript"],"sub_categories":["Miscellaneous Utilities"],"readme":"\u003cdiv align=\"center\"\u003e\n\t\u003cp align=\"center\"\u003e\n\t\t\u003cimg src=\"https://raw.githubusercontent.com/ali-master/pwa-badge/master/images/image.png\" border=\"0\" /\u003e\n\t\u003c/p\u003e\n\t\u003ch1 align=\"center\"\u003ePWA Badge\u003c/h1\u003e\n\t\u003cp align=\"center\"\u003eLike \u003cb\u003eNative Apps\u003c/b\u003e, The PWA Badge API allows installed web apps to set an application-wide badge on the app icon.\u003c/p\u003e\n\n[![Travis CI](https://travis-ci.com/ali-master/pwa-badge.svg?branch=master)](https://travis-ci.com/ali-master/pwa-badge)\n[![codecov](https://codecov.io/gh/ali-master/pwa-badge/branch/master/graph/badge.svg)](https://codecov.io/gh/ali-master/pwa-badge)\n[![CodeFactor](https://www.codefactor.io/repository/github/ali-master/pwa-badge/badge)](https://www.codefactor.io/repository/github/ali-master/pwa-badge)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ali-master/pwa-badge/blob/master/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-orange.svg)](https://github.com/ali-master/pwa-badge/compare)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg)](#contributors-)\n\u003c/div\u003e\n\u003chr /\u003e\n\nThe App Badge API allows installed web apps to set an application-wide badge,\nshown in an operating-system-specific place associated with the application\n(such as the shelf or home screen).\n\nBadges tend to be more user-friendly than notifications and can be updated with\na much higher frequency since they don't interrupt the user. And, because they\ndon't interrupt the user, they don't need the user's permission.\n\n\u003e Keep in mind that to display the Badge count, Your **PWA** application should be installed on your Device.\n\n### Possible use cases\n\nExamples of sites that may use this Library includes:\n\n- Chat, email, and social apps, to signal that new messages have arrived, or to\n  show the number of unread items.\n- Productivity apps, to signal that a long-running background task (such as\n  rendering an image or video) has completed.\n- Games, to signal that a player action is required (e.g., in Chess, when it is\n  the player's turn).\n\n### Usage\n\n```bash\nnpm install --save pwa-badge\n```\n\n### The Badge API consists of five methods:\n\n- `isSupported()` Check if the User's browser supports the Feature,\n  and returns a `boolean` value that represents the Status of supporting.\n- `syncSetBadge(unreadCount)` Removes app's badge **Synchronously**. If a value\n  is provided, set the badge to the provided value otherwise, display a plain\n  white dot (or other flag as appropriate to the platform). Setting number to 0\n  is the same as calling `syncClearBadge()` or `asyncClearBadge()`.\n- `syncClearBadge()` Removes app's badge **Synchronously**.\n- `asyncSetBadge(unreadCount)` This API is the same as `syncSetBadge()` but\n  returns an empty `Promise` for error handling.\n- `asyncClearBadge()` Removes app's badge **Asynchronously** and returns an\n  empty `Promise` for error handling.\n\n### Check Browser supports the Badge API\n\nTL;DR `isSupported()` method function is an util for informing your users that\nthis feature supports by their `Browser` or `OS` and the `pwa-badge` library\n`set` and `clear` the Badge count safely, and you can avoid using\n`isSupported()` before calling the `set` or `clear` methods.\n\n```js\nimport PWABadge from 'pwa-badge';\n\n// Create an Instance\nconst badge = new PWABadge();\n\nif (badge.isSupported()) {\n  // Hoora!, Supports the Badge feature\n} else {\n  // Does not supports\n}\n```\n\n### `Sync` Set and Clear Badge\n\n```js\nimport PWABadge from 'pwa-badge';\n\n// Create an Instance\nconst badge = new PWABadge();\n\n// Set Badge unreadCount\nbadge.syncSetBadge(1);\n\n// Clear Badge unreadCount\nbadge.syncClearBadge();\n```\n\nResult by calling `syncSetBadge`:\n\n\u003cdiv align=\"center\"\u003e\n\t\u003cp align=\"center\"\u003e\n\t\t\u003cimg src=\"https://raw.githubusercontent.com/ali-master/pwa-badge/master/images/demo.png\" border=\"0\" /\u003e\n\t\u003c/p\u003e\n\u003c/div\u003e\n\n### `Async` Set and Clear Badge\n\n`asyncSetBadge()` and `asyncClearBadge()` return empty `promises` you can\nuse for error handling.\n\n```js\nimport PWABadge from 'pwa-badge';\n\n// Create an Instance\nconst badge = new PWABadge();\n\n// Set Badge unreadCount\nbadge\n  .asyncSetBadge(1)\n  .then(() =\u003e {\n    // Badge count has shown as well\n  })\n  .catch((e) =\u003e {\n    // The Browser not supporting the Badge feature or something went wrong\n  });\n\n// Clear Badge unreadCount\nbadge\n  .asyncClearBadge()\n  .then(() =\u003e {\n    // Badge count has disappeared\n  })\n  .catch((e) =\u003e {\n    // The Browser not supporting the Badge feature or something went wrong\n  });\n```\n\nThe App Badge API works on **Windows**, and **macOS**, in **Chrome 81 or\nlater**. It has also been confirmed to work on **Edge 84** or later. Support for\n**Chrome OS** is in development and will be available in a future release of\nChrome. On **Android**, the Badge API is not supported. Instead, Android\nautomatically shows a badge on app icon for the installed web app when there is\nan unread notification, just as for Android apps.\n\nSome user agents may take a number like `4000` and rewrite it as `99+`. If you\nsaturate the badge yourself (for example by setting it to `99`) then the `+`\nwon't appear. No matter the actual number, just call `syncSetBadge()` or\n`asyncSetBadge()` and let the user agent deal with displaying it accordingly.\n\nWhile the App Badge API in Chrome requires an `installed app` as I wrote\nbefore, you shouldn't make calls to the Badge API dependent on the\ninstallation state. Just call the API when it `exists` and `installed` on a\ndevice, as other browsers may show the badge in other places. If it works, it\nworks. If not, it simply doesn't.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fali-master%2Fpwa-badge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fali-master%2Fpwa-badge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fali-master%2Fpwa-badge/lists"}