Мое веб-приложение PWA продолжает показывать старую версию после новой версии в Safari (но отлично работает в Chrome)?

Я добавил PWA и сервис-воркер в свое существующее веб-приложение на основе Angular 5. В первом выпуске все выглядит нормально. Однако, когда я пытаюсь выпустить обновления, происходит что-то странное.

На ПК с Chrome проблем нет. После каждого выпуска я получал предупреждение с просьбой обновиться до новой версии, и это здорово.

Однако это предупреждение отсутствует на iOS, что, вероятно, нормально, поскольку iOS, насколько я понимаю, еще не поддерживает автоматическое обновление. Если я использую Chrome на iOS, я могу получить новую версию после обновления вручную (иногда требуется несколько обновлений). Однако браузер Safari обычно не показывает новую версию. Если я продолжаю обновлять страницу, в конце концов появится новая версия, но она снова вернется после того, как я закрою и снова открою ее. Пока я играюсь, единственный способ добраться до новой версии — сначала вручную очистить кеш Safari. Это неприемлемо для обычного пользователя.

Я понимаю, что iOS имеет ограниченную поддержку PWA, но это максимум, что мы можем получить на iOS? Как без автоматического обновления пользователь iOS может узнать о новой версии и обновить ее?


ios safari service-worker pwa
person newman    schedule 20.07.2018    source источник
comment
Я обошел эту проблему, используя новые имена файлов для каждого обновления, а также отменяя и перерегистрируя работника службы по мере появления новой версии. Вызов функции вручную после проверки значения с сервера. Другого решения для этого тоже не нашел, был бы рад иметь более чистое решение для сафари.   -  person Agash Thamo.    schedule 30.07.2018
comment
@АгашТамо. У меня такая же проблема, но я не уверен, что вы имеете в виду под un и перерегистрацией работника службы из приложения, не могли бы вы поделиться примером кода? Спасибо!   -  person Stephen    schedule 10.08.2018
comment
@Stephen Извините, у меня нет доступа к какому-либо конкретному коду, показывающему это. Но я имел в виду, что ваш сервисный работник может проверить, есть ли новый файл в вашем ngsw.json, и если есть новые файлы, но ваш файл все еще старый, вы можете уничтожить SW developer.mozilla.org/en-US/docs/Web/API/ в основном удаляет весь кеш и прочее и зарегистрировать нового сервис-воркера. У меня это сработало, но я думал, что эта проблема все равно решена с новой угловой версией 6 (с Chrome у некоторых была аналогичная проблема).   -  person Agash Thamo.    schedule 10.08.2018
comment
@Stephen Я только что заметил, что функция unregister() еще не поддерживается в iOS в Safari. Мне нужно посмотреть, как я это сделал, надеюсь, я смогу найти пример в своем репо.   -  person Agash Thamo.    schedule 10.08.2018
comment
Вы использовали файл изображения webp? Это мешало мне видеть новые обновления в iOS.   -  person Hyfy    schedule 02.05.2021

Ответы (2)


arrow_upward
23
arrow_downward

Я нашел и разместил ответ здесь, но повторюсь:

После недель и недель поиска я наконец нашел решение:

  1. Я добавляю проверку строки версии на сервер и возвращаю ее в приложение.

  2. Я ищу его в localtstorage (IndexedDB) и если не нахожу, то добавляю. Если нахожу, сравниваю версии и если на сервере есть более новая, выкидываю диалог.

  3. Закрытие этого диалогового окна (моя кнопка помечена как «обновить») запускает window.location.reload(true), а затем сохраняет новую строку версии в локальном хранилище.

Вуаля! Мое приложение обновлено! Я не могу поверить, что дошло до чего-то такого простого, я нигде не мог найти решение. Надеюсь это поможет.

ОБНОВЛЕНИЕ ОТ СЕНТЯБРЯ 2019 Г.:

Было несколько проблем с описанным выше методом, в частности, он обходил рабочие механизмы службы PWA и что иногда перезагрузка не сразу загружала новый контент (поскольку текущий SW не освобождал страницу). Теперь у меня есть новое решение, которое работает на всех платформах:

forceSWupdate () {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function (registrations) {
      for (let registration of registrations) {
        registration.update()
      }
    })
  }
}

И внутри моего сервисворкера я теперь выкидываю диалог, если есть обновление, и оттуда делаю свои location.reload(true). Это всегда приводит к немедленному обновлению моего приложения (с важной оговоркой, что я добавил директивы skipWaiting и clientsClaim в свою регистрацию).

Это работает на каждой платформе одинаково, и я могу программно проверить наличие обновлений или дождаться, пока работник службы сделает это сам (хотя время проверки сильно зависит от платформы, устройства и других неизвестных факторов. Обычно не более 24). хотя часы)

person Stephen    schedule 16.10.2018
comment
Есть информация о том, в чем проблема? Ссылки на ресурсы? - person Meekohi; 20.02.2019
comment
Настоящая проблема заключается в том, что Apple не полностью поддерживает спецификацию PWA. Если бы это было так, в этом не было бы необходимости (как на Android) - person Stephen; 20.03.2019
comment
Отличная работа, и дает пользователю информацию об обновлении. - person Wasim Abuzaher; 17.04.2019
comment
Спасибо. Оно работает. Я предоставляю проект с открытым исходным кодом, используя этот метод для справки: github.com/MrMYHuang/cbetar2 Этот PWA поддерживает как автоматическое обновление при запуске приложения, так и ручное обновление! Они работают на macOS 10.15 + Edge Chrome, Android 9 + Chrome, iOS 13.6 + Safari, Windows 10 + Edge Chrome. Пожалуйста, проверьте эти файлы, src/serviceWorker.ts, src/Globals.tsx, src/index.tsx, src/App.tsx и src/pages/SettingsPage.tsx. - person Meng-Yuan Huang; 19.08.2020

arrow_upward
3
arrow_downward

после перепробования многих решений вызов registration.update не помог мне. У меня работает только этот:

const forceReload = () =>
  navigator.serviceWorker
    .getRegistrations()
    .then((registrations) =>
      Promise.all(registrations.map((r) => r.unregister())),
    )
    .then(() => window.location.reload())

Стратегия:

  • напишите номер версии в новом развернутом приложении (например, x.x.x)
  • прослушать номер версии, обслуживаемый на веб-сокете
  • позвонить forceReload, если они не совпадают

Таким образом, любой пользователь, подключенный или не подключенный, остается в курсе последней версии.

Надеюсь, это поможет кому-то.

person bossno    schedule 09.06.2020