Add to Homescreen React PWA

user_12498479 0
Viewed 1749

I'm trying to make a code work from https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen but I'm having a problem on my React.

I make a function called AddToHome

// Code to handle install prompt on desktop
export const addToHome = () => {
  let deferredPrompt
  const addBtn = document.querySelector('.add-button')
  addBtn.style.display = 'none'

  window.addEventListener('beforeinstallprompt', (e) => {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault()
    // Stash the event so it can be triggered later.
    deferredPrompt = e
    // Update UI to notify the user they can add to home screen
    addBtn.style.display = 'block'

    addBtn.addEventListener('click', () => {
      // hide our user interface that shows our A2HS button
      addBtn.style.display = 'none'
      // Show the prompt
      deferredPrompt.prompt()
      // Wait for the user to respond to the prompt
      deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt')
        } else {
          console.log('User dismissed the A2HS prompt')
        }
        deferredPrompt = null
      })
    })
  })
}

and I'm importing it to my JS file

const handleClick = () => {


addToHome()

}

and calling it in a div

<button
          onClick={handleClick}
          style={{ position: 'absolute', top: '1px', left: '1px' }}
        >
          Add to home
        </button>

I'm getting an error

enter image description here

I want to achieve what's in the code for me to have a pop up when I click the button when want to install my PWA on my desktop. enter image description here

reactjs javascript
3 Answers

It seems the code can't find a button with className "add-button"

const addBtn = document.querySelector('.add-button')

so it is failing when attempting to access the styles property on the next line.

addBtn.style.display = 'none'

Add this className to your button.

<button
  className="add-button"
  onClick={handleClick}
  style={{ position: 'absolute', top: '1px', left: '1px' }}
>
  Add to home
</button>

That being said, you should probably try to do this in a more React way using a React ref to access the underlying button DOMNode, if you can.

user_86908570

Query selector is unable to get any button with the class add-button because there is not any element in your HTML with that class, so it returns undefined. It should be fixed by adding the class to the button element:

<button
      onClick={handleClick}
      style={{ position: 'absolute', top: '1px', left: '1px' }}
      className="add-button"
    >
      Add to home
    </button>
user_137368470

Seems, you have no element with class "add-button" on the page. Seems, the code which generated "add-button" haven't rendered when you call this part of code. Unfortunately, I do not see other code, but I can try to recommend you move the lines

const addBtn = document.querySelector('.add-button')

inside the

window.addEventListener('beforeinstallprompt', (e) => {

After move the default styles to CSS and remove the line

addBtn.style.display = 'none'

So, your code will look like

// Code to handle install prompt on desktop
export const addToHome = () => {
  let deferredPrompt;

  window.addEventListener('beforeinstallprompt', (e) => {
    const addBtn = document.querySelector('.add-button')
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault()
    // Stash the event so it can be triggered later.
    deferredPrompt = e
    // Update UI to notify the user they can add to home screen
    addBtn.style.display = 'block'
user_33260080
Related