> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/javascript/pwa-beforeinstallprompt-toplusgames.com-ok.md).
# PWA - beforeinstallprompt toplusgames.com (ok)
C:\xampp82\htdocs\html\index.html
```html
Test
If the beforeinstallprompt event fires, there will be a button displayed allowing
you to use prompt() on the deferred event.
```
C:\xampp82\htdocs\html\manifest.json
```json
{
"short_name": "PWA Test",
"name": "PWA Test",
"icons": [
{
"src": "https://raw.githubusercontent.com/jeffposnick/create-react-pwa/master/favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./",
"display": "standalone"
}
```
C:\xampp82\htdocs\html\sw\.js
```javascript
self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', () => self.clients.claim());
```
## Áp dụng
C:\xampp82\htdocs\testcom\static\script.js
```javascript
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('https://test.com/static/js/sw.js');
window.addEventListener('beforeinstallprompt', event => {
event.preventDefault();
var button = document.getElementById('installApp');
button.removeAttribute('hidden');
button.addEventListener('click', () => {
event.prompt();
button.setAttribute('disabled', true);
});
});
}
```
C:\xampp82\htdocs\testcom\static\js\sw\.js
```javascript
self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', () => self.clients.claim());
```
C:\xampp82\htdocs\testcom\wp-content\themes\theme-zoki\header.php
```php
```
## How do you prompt a user to install a [PWA](https://dev.to/mtee/how-do-you-prompt-a-user-to-install-a-pwa-56ef)?
[#100daysofcode](https://dev.to/t/100daysofcode)[#javscript](https://dev.to/t/javscript)
*My lesson of the day. The browser in use: chrome*
For a PWA to be installable, you need a registered service worker and a manifest file with the relevant fields.
You also need to attach a click event to an element in the HTML file. I added a button tag as the last element of my HTML file and set the display to none in CSS. *Note: The button element is empty.*
Next inline is the javascript code:
```
let defferedPrompt;
const addbtn = document.querySelector('.btn');
window.addEventListener('beforeinstallprompt', event => {
event.preventDefault();
defferedPrompt = event
addbtn.style.display = 'block';
});
addbtn.addEventListener('click', event => {
defferedPrompt.prompt();
defferedPrompt.userChoice.then(choice => {
if(choice.outcome === 'accepted'){
console.log('user accepted the prompt')
}
defferedPrompt = null;
})
})
```
The code explained:
You listen for the `beforeinstallprompt` event and save the event to a variable. Then attach an event listener to your HTML element and listen for the click event. You also pass in a callback function to the event listener that calls `prompt()` on the saved event. Prompt displays a dialogue box. Using the User choice property you capture the user's action. User choice is a property that returns the users choice. If the users choice equates to accepted the installation begins else the dialog box is closed. You can only call `prompt()` on the deferred event once. Lastly, you set the deferred event to null.
*That's it for day 68*\
*Lets do this again tomorrow*
