Javascript style.display 有时不起作用

Question

我正在创建我的第一个 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 有三个实例。 如果不需要，第一个将隐藏添加按钮。 第二个显示需要时的添加按钮。 单击第三个按钮将应用程序放置在主屏幕上后，应隐藏该按钮。 但是，该按钮会一直显示在屏幕上，直到屏幕刷新。

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

addBtn.style.color = 'red'

那行得通，所以按钮上的文字在点击后变成红色。

毫无疑问，这是简单而明显的（通常是），但对于我的生活，我看不到它。 任何建议，将不胜感激。

Answer 1

您可以尝试添加一个带有display: none;的类吗display: none; 并display: block; 只是切换它？

Answer 2

我还没有真正确定问题所在，但我找到了解决方法。 我添加了一个

location.reload();

单击按钮后。 这已经掩盖了，如果没有解决，它。

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