Блог

Я создаю свое первое PWA (прогрессивное веб-приложение). Это был долгий и болезненный процесс обучения, но я думаю, что я почти на месте. Моя единственная оставшаяся проблема не связана (я думаю) напрямую с 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'
  

Это сработало, поэтому текст на кнопке стал красным после нажатия.

Без сомнения, это что-то простое и очевидное (обычно так и есть), но, хоть убейте, я этого не вижу. Любые предложения будут оценены.

Можете ли вы попробовать добавить класс с помощью display: none; и display: block; и просто переключить его?

Я действительно не определил проблему, но я нашел обходной путь. Я добавил

 location.reload();
  

после нажатия кнопки. Это замаскировало, если не решило, это.

Попутно я бы также добавил, что кэширование, которое является фундаментальной частью PWA, является кошмаром для разработки. Я обнаружил, что мне приходилось переименовывать приведенный выше файл javascript каждый раз, когда я его менял, иначе на главной странице была бы найдена кэшированная версия вместо новой.