JavaScript样式显示有时不起作用

如何解决JavaScript样式显示有时不起作用

我正在创建我的第一个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'

那行得通，因此单击按钮后，该按钮上的文本变为红色。

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

解决方法

您可以尝试添加带有**BUILD_ARTIFACTSTAGINGDIRECTORY**和display: none;的类并进行切换吗？

,

我还没有真正发现问题，但是找到了解决方法。我添加了一个

location.reload();

单击按钮后的

。如果没有解决，那就掩盖了它。

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