# 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*\
\&#xNAN;*Lets do this again tomorrow*
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://javascriptuse.gitbook.io/javascript/pwa-beforeinstallprompt-toplusgames.com-ok.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.