Vue PWA не получает новый контент после обновления

Question

Я новичок в Vue и создал проект с помощью плагина PWA Service-worker. После развертывания новой версии моего приложения я получаю следующие сообщения в консоли:

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

Я не изменил ничего из конфигурации по умолчанию после создания моего проекта и не добавил ни одного кода, который взаимодействует с сервисной службой. Что не так? Я что-то упустил?

Answer 1

Как я понял, этот вопрос действительно относится только к новичкам в PWA, которые не знают, что вы можете (и должны) настроить PWA для достижения этой цели. Если вы чувствуете, что обращаетесь сейчас (и используете VueJS), помните:

Чтобы автоматически загрузить новый контент, вам потребуется для настройки PWA. В моем случае (VueJS) это делается путем создания файла vue.config.js в корневом каталоге моего проекта (на том же уровне, что и package.json).

Внутри этого файла вам нужно:

module.exports = {
    pwa: {
        workboxOptions: {
            skipWaiting: true
        }
    }
}

Который автоматически загрузит ваш новый контент при обнаружении. Тем не менее, контент пока не будет отображаться на вашем клиенте, так как он должен обновляться после загрузки контента. Я сделал это, добавив window.location.reload(true) к registerServiceWorker.js в моем каталоге src/:

updated () {
    console.log('New content is available: Please refresh.')
    window.location.reload(true)
},

Теперь, если работник сервиса обнаружит новый контент, он автоматически загрузит его и обновит страницу.