Должен ли я кэшировать файл ServiceWorker в PWA? - PullRequest
Новая
       8

Должен ли я кэшировать файл ServiceWorker в PWA?

2 голосов
/ 06 марта 2019

Я все еще пытаюсь избежать проблем с кэшированием в Progressive Web Apps.Решающим для любого кэширования PWA является возможность обновления файла ServiceWorker (назовем его sw.js).Но детали меня немного смущают:

  • Можно выполнять navigator.serviceWorker.register('sw.js') при каждой загрузке страницы, потому что register() обновляет кэш приложения или ничего не делает, если все обновлено- правильно?

  • Имеет ли смысл сделать что-то вроде navigator.serviceWorker.register('sw.js?' + Date.now()), чтобы избежать кэширования HTTP?Или я в безопасности, если сервер использует ETag?

  • Проверяет ли браузер сеть на наличие обновленных sw.js при каждой загрузке страницы?Иногда я не вижу его на вкладке сетевого инспектора.

  • Если sw.js находится в кеше приложения, браузер получает его оттуда, не проверяя сервер на наличие обновлений?

  • Иногда я вижу демо-сценарии ServiceWorker, которые кэшируют себя следующим образом: 

    self.addEventListener('install', ev => {
    const myCaches = {
        app: {...}, 
        sw: {
            files: [
                '/sw.js'
            ],
            version: '1'
        }
    }
    for (let name in myCaches) {
        const cacheName = name + '-' + myCaches[name].version
        ev.waitUntil(
            caches.has(cacheName).then(uptodate => {
                if (uptodate) return true
                caches
                    .open(cacheName)
                    .then(cache => {
                        cache.addAll(myCaches[name].files)
                    })
            })
        )
        // clear old caches
    }
})

Имеет ли это смысл, является ли это хорошей практикой?Делает ли обновление кеша более надежным?

1 Ответ

2 голосов
/ 08 марта 2019

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

Браузер установит ваш сервисный работник для вашего PWA, когда вы зарегистрируете его.Браузер использует отдельное средство для кэширования и управления сервисными работниками.Вы не обязаны его кэшировать.

Добавление метки времени к имени файла вашего работника сервиса является анти-паттерном.Согласно статье, посвященной жизненному циклу сервисного работника, вам следует избегать изменения URL-адреса сценария вашего сервисного работника .

Что больше всего беспокоит то, что вы затронули в вопросе обновления сервисного работника, какбраузер знает, когда это сделать?

Что ж, согласно разделу Обновление сервисного работника из статьи Service Worker Lifecycle:

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

Ваш сервисный работник считается обновленным, если он байтово отличается от того, который уже есть в браузере.(Мы расширяем это, чтобы включить также импортированные скрипты / модули.) Обновленный сервисный работник запускается вместе с существующим и получает свое собственное событие install.

Если у вашего нового работника не все в порядкеКод состояния (например, 404), не удается проанализировать, выдает ошибку во время выполнения или отклоняет во время установки, новый работник выбрасывается, но текущий остается активным.

Если вы 'проверив PWA в автономном режиме, вы заметите, что браузер выдаст ошибку в консоли, когда попытается получить ваш файл sw.js.Это не о чем беспокоиться.Как сказано в последнем пункте, «текущий остается активным».

Интересно, зациклены ли люди на этой записи 404 в консоли для работника сервиса JavaScript, когда они тестируют в автономном режиме и добавляют работника сервисафайл в кеш в приподнятом состоянии?Это, вероятно, наносит ущерб вашему сайту и его пользователям, тратя время и диск на кэширование ненужного файла в браузере.

...