FEEL FREE TO SHARE TUTORIALS, YOUR SKILS & KNOWLEDGE ON CODING, SCRIPTS, THEMES, PLUGINS OR ANY RESOURCES YOU HAVE WITH THE COMMUNITY- Click Here To Post Your Request,
JOIN COMPUTER REPAIR FORUM

Reply to thread

Message: <blockquote data-quote="freecoded" data-source="post: 38" data-attributes="member: 1"><p>To indicate your Progressive Web App is installable, and to provide a custom in-app install flow:</p><p></p><ol> <li data-xf-list-type="ol">Listen for the beforeinstallprompt event.</li> <li data-xf-list-type="ol">Save the beforeinstallprompt event, so it can be used to trigger the install flow later.</li> <li data-xf-list-type="ol">Alert the user that your PWA is installable, and provide a button or other element to start the in-app installation flow.</li> </ol><p>The beforeinstallprompt event, and the appinstalled event have been moved from the web app manifest spec to their own <a href="https://github.com/WICG/beforeinstallprompt" target="_blank">incubator</a>. The Chrome team remains committed to supporting them, and has no plans to remove or deprecate support. Google's Web DevRel team continues to recommend using them to provide a customized install experience.</p><h3>Listen for the beforeinstallprompt event</h3><p>If your Progressive Web App meets the required <a href="https://web.dev/install-criteria/" target="_blank">installation criteria</a>, the browser fires a beforeinstallprompt event. Save a reference to the event, and update your user interface to indicate that the user can install your PWA. This is highlighted below.</p><p></p><p></p><p>There are many different <a href="https://web.dev/promote-install/" target="_blank">patterns</a> that you can use to notify the user your app can be installed and provide an in-app install flow, for example, a button in the header, an item in the navigation menu, or an item in your content feed.</p><h3>In-app installation flow</h3><p>To provide in-app installation, provide a button or other interface element that a user can click to install your app. When the element is clicked, call prompt() on the saved beforeinstallprompt event (stored in the deferredPrompt variable). It shows the user a modal install dialog, asking them to confirm they want to install your PWA.</p><p></p><p>The user choice property is a promise that resolves with the user's choice. You can only call prompt() on the deferred event once. If the user dismisses it, you'll need to wait until the beforeinstallprompt event is fired again, typically immediately after the user choice property has resolved.</p><p></p><p><strong>Try it</strong></p><p></p><p><a href="https://web.dev/codelab-make-installable" target="_blank">Make a site installable using the beforeinstallprompt event</a>.</p><h2>Detect when the PWA was successfully installed</h2><p>You can use the user choice property to determine if the user installed your app from within your user interface. But, if the user installs your PWA from the address bar or other browser component, user choice won't help. Instead, you should listen to the app installed event. It is fired whenever your PWA is installed, no matter what mechanism is used to install your PWA.</p><p></p><p></p><h2>Detect how the PWA was launched</h2><p>The CSS display-mode media query indicates how the PWA was launched, either in a browser tab, or as an installed PWA. This makes it possible to apply different styles depending on how the app was launched. For example, always hide the install button and provide a back button when launched as an installed PWA.</p><p></p><h3>Track how the PWA was launched</h3><p>To track how users launch your PWA, use matchMedia() to test the display-mode media query. Safari on iOS doesn't support this yet, so you must check navigator. standalone, it returns a boolean indicating whether the browser is running in standalone mode.</p><p></p><p></p><h3>Track when the display mode changes</h3><p>To track if the user changes between the standalone, and browser tab, listen for changes to the display-mode media query.</p><p></p><p></p><h3>Update UI based on the current display mode</h3><p>To apply a different background color for a PWA when launched as an installed PWA, use conditional CSS:</p><p></p><p></p><h2>[URL unfurl="true"]https://web.dev/customize-install/[/URL]</h2></blockquote><p></p>

Verification

Richest Freecoded User

Most Freecoin

freecoded

4,876 Freecoin

Smith16

653 Freecoin

Johnhendrick

645 Freecoin

Davy200

590 Freecoin

nathan69

426 Freecoin

Laureine

415 Freecoin

anajeen

395 Freecoin

Peterparker87

350 Freecoin

codeguru

282 Freecoin

Tekera

267 Freecoin