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 文件時都必須重命名它，否則主頁將找到緩存版本而不是新版本。