![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
@pwabuilder/pwa-ratings
Advanced tools
A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that prompts your users to leave a rating or review in the Microsoft Store 📋🎯💯
A web component from the PWABuilder team that prompts your users to leave a rating or review in the Microsoft Store 📋🎯💯
Built with lit-element
For now, this component only Works on Windows 10: where the native Microsoft Store application can be launched via a protocol handler. Other stores and browsers could be supported in the future.
There are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using npm then we recommend using the npm package.
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwa-ratings"
></script>
npm install @pwabuilder/pwa-ratings
import @pwabuilder/pwa-ratings
You can use the element <pwa-ratings></pwa-ratings>
anywhere in your template, JSX, html, etc. In order to open the prompt, you must provide 2 details:
This web component will also read your web manifest for the app's name and theme color. You can optionally override these values through their web component attributes and styles based on the APIs and Styling guides, respectively.
The example below uses the Windows Terminal bigID and assumes the icon path (as well as the name and theme color) is specified by the web manifest at the root of the app:
<pwa-ratings bigid="9n0dx20hk701"></pwa-ratings>
The prompt will never open itself by default. The quickest way to prompt your users after they've had a change to explore your app is set the minimum number of launches or days they've used the app before you want them to leave feedback. When the specified launch or day number is reached, the prompt will wait 10 seconds by default before opening.
The example below will automatically open the prompt after the app has been previously launched 1 time and has been loaded for at least 5 seconds:
let ratings = document.querySelector("pwa-ratings");
ratings.setMinLaunches(1);
ratings.setSecondsDelay(5); // optional modification to override default 10 seconds
You can also opt to create your own scheduling mechanism. Besides checking for the basic bigID and icon path details mentioned before, you must also ensure:
Here is example (psuedo) code that could accomplish this:
let ratings = document.querySelector("pwa-ratings");
let status = ratings.getStatus();
let shouldUserBePoked = yourFunction1(status);
let isBrowserSupported = yourFunction2();
let hasUserBeenPokedRecently = yourFunction3();
if (shouldUserBePoked && isBrowserSupported && !hasUserBeenPokedRecently) {
ratings.openPrompt();
}
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
bigid | bigid | Specifies which Microsoft Store page to send the user | string | "" |
iconpath | iconpath | Specifies where to find the logo for the modal | string | "" |
manifestpath | manifestpath | Specifies where the app's web manifest can be found | string | manifest.webmanifest |
name | name | Represents app's name in the modal | string | "this app" |
win10only | win10only | Limits availability to where the native Microsoft Store client is available | boolean | true |
Name | Description |
---|---|
async getStatus(): Promise<string> | Returns modal's status: umprompted, closed, postponed, declined, or accepted |
closePrompt() | Hides modal from view |
async openPrompt() | Prompts user to leave a rating or review in the Microsoft Store |
setMinDays(days: number) | Automatically prompts user after given number of days and will repeat count until user declines or accepts. A value of 0 pauses automatic prompting until a positive value is restored. |
setMinLaunches(launches: number) | Automatically prompts user after given number of app launches/refreshes and will repeat count until user declines or accepts. A value of 0 pauses automatic prompting until a positive value is restored. |
setSecondsDelay(seconds: number) | Delays launching the prompt by given number of seconds when the minimum launch or minimum day conditions are met |
We recommend using our CSS variables to easliy tweak the style of this component to fit your project. Here are our current supported CSS variables.
name | Description |
---|---|
--okay-button-color | Changes the color of the okay button |
--modal-z-index | Changes the z-index of the ratings modal |
--modal-background-index-show | Changes the z-index of the ratings modal background when visible |
--modal-background-index-hide | Changes the z-index of the ratings modal background when hidden |
--modal-background-color | Changes the background color of the ratings modal |
If you need to style this component more comprehensively, you can use Shadow Parts to style both the okay button and the ratings modal. To target these two elements you can use pwa-ratings::part(okayButton)
and pwa-ratings::part(modal)
respectively. For example, to make the background of the okay button pink, I would use this CSS:
pwa-ratings::part(okayButton) {
background-color: pink;
}
FAQs
A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that prompts your users to leave a rating or review in the Microsoft Store 📋🎯💯
We found that @pwabuilder/pwa-ratings demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.