Javascript style.display有时不'；行不通

我正在创建我的第一个PWA（渐进式web应用程序）。这是一个漫长而痛苦的学习过程，但我想我已经快到了。我剩下的一个问题（我认为）与PWA没有直接关系，只是一个javascript问题

我使用的是从在线示例下载的标准代码：

// Register service worker to control making site work offline

if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('sw.js')
}

// Code to handle install prompt on desktop

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', (e) => {
    // 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) => {
        deferredPrompt = null;
      });
  });
});

请注意，style.display有三个实例。 如果不需要，第一个按钮将隐藏add按钮。 第二个按钮在需要时显示add按钮。 第三个按钮单击后应将其隐藏，以将应用程序置于主屏幕上。但是，在刷新屏幕之前，该按钮将保持在屏幕上

为了调试它，我将行更改为

addBtn.style.color = 'red'

这起作用了，所以按钮上的文本在点击后变为红色

---

毫无疑问，这是一件简单而明显的事情（通常是这样），但就我的一生而言，我看不到它。如果您有任何建议，我们将不胜感激。

您是否可以尝试添加一个带有

display:none和
显示：块并切换它？
我还没有确定问题所在，但我找到了解决方法。我添加了一个

location.reload();

单击按钮后。这掩盖了，如果不解决的话，它

顺便说一句，我还要补充一点，缓存是PWAs的一个基本部分，对于开发来说是一场噩梦。我发现每次更改上面的javascript文件时都必须重命名它，否则主页会找到缓存版本而不是新版本