И почему они напоминают мне о музыкальной индустрии

PWA и жизненный цикл сервис-воркера — это поп-конкурс.

Вы когда-нибудь гуглили что-нибудь из этого?

PWA зависает в приложении
PWA выдает старую страницу
PWA не заменяется
Что такое сервисный работник

Давай помогу.

Что такое ПВА?

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

Service Worker — это фрагмент кода, который повышает уровень вашего сайта, позволяя кэшировать ресурсы вашей страницы (безумно быстрое обновление и время загрузки), отслеживать push-уведомления, устанавливать на мобильные телефоны и т. д. …

Как?

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

Эти проблемы являются прямым результатом его способностей, и, следовательно, чтобы использовать их, вы должны хорошо их знать. Я использую их в своем стороннем проекте www.everyhour.xyz, чтобы пользователи могли легко установить приложение на свой телефон, и я мог напомнить им, чтобы они записывали свой день.

Обзор жизненного цикла — что здесь происходит?

Умные специалисты из Google и Дейв Геддес создали игру, чтобы учиться этому здесь.

Суть в том, что сервис-воркер — это файл Javascript, который вы можете сохранить в браузере пользователя. Когда он есть, его нельзя изменить, его нужно заменить.

Чтобы его заменить, вам нужно обновить файл Javascript, чтобы внутри него было другое содержимое, т.е. не быть идентичным старому.

Затем, когда браузер или вкладка в следующий раз закроются, этот новый код будет установлен в браузере и будет ждать, пока браузер снова не закроется, где он будет установлен.

1. Установите/зарегистрируйте сервис-воркер

По сути, вы просите браузер принять файл js. Для этого вам нужно указать интернет-браузеру (также известному как navigator) зарегистрировать этот код в области serviceWorker браузера.

navigator.serviceWorker.register("/serviceWorker.js")

Если сервис-воркер уже установлен, и код двух сервис-воркеров идентичен установленному, ничего не произойдет. Если файл отличается, браузер сохранит новую версию.

2. Ожидание

Если это первый раз, когда пользователь запускает сайт, сервис-воркеры немедленно переходят в ожидание, поэтому только что запрошенный сервис-воркер будет установлен и активирован одновременно.

Но в следующий раз

В следующий раз, когда пользователь посетит сайт, браузер снова запросит файлы сайта и получит новую версию сервисного работника.

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

3. Активировано

Активировано означает, что сервис-воркер запущен. Работает в браузере.

Сервисный работник переживает обновления пользователя, поэтому текущий сервисный работник будет оставаться активным до тех пор, пока пользователь не уйдет с вашего сайта или не закроет браузер…

4. Остановлен

Когда браузер закрыт, сервисный работник больше не может ничего делать. Он остановлен, он все еще в браузере, но не завершен…

5. Прекращено

Активный сервис-воркер может умереть только тогда, когда страница больше не используется — т. е. пользователь ушел или закрыл все экземпляры страницы — и в ожидании находится другой сервис-воркер. Это действие остановит браузер от использования рабочего файла службы и удалит его.

В этот момент следующий сервис-воркер — тот, что находится в ожидании — активируется, но будет остановлен — просто отдыхает до следующей загрузки сайта.

Работники сферы обслуживания нерешительны/вежливы по своей природе

Они ждут окончания выступлений или сеансов.

Если бы сервисные работники не были построены таким образом…

Причина поведения в том, что запросы на ресурсы не упорядочены. Таким образом, сервис-воркер может активироваться только после запроса ресурсов нескольких страниц. Это означает, что ваш сайт может одновременно загружать новые и старые ресурсы. Это может быть плохо…

Но если вы действительно хотите, чтобы это произошло, вы можете сделать это:

self.addEventListener("activate", event => {
  // waitUntil allows you to pause all other states of life
  // in short it stops fetch events happening so you have a bit more
  // certainty that your resources are fine but it doesn't stop the 
  // main page / index file being loaded as that always happens
  // first
  event.waitUntil(clients.claim())
})

Примечание. Я видел много предостережений по поводу использования этого в производственной среде:

Принудительно установите новую версию как можно скорее:

Вы можете skipWaiting() когда у вас появится новый сервис-воркер, которого вы хотите ввести в действие. Это будет означать, что новая версия вашего сервисного работника будет установлена ​​и активирована немедленно.

Они также приходят с осторожностью, поскольку это может означать, что кеш не обновляется вашими новыми файлами (поэтому вы также можете использовать clients.claim()):

Другие примечания

Вы, вероятно, не хотите развиваться с ними — иначе вы можете внести изменения, но получить только кешированную версию. Вы можете сделать одну из двух вещей — настроить их так, чтобы они не устанавливались, когда присутствует переменная среды (например, development), или проверить update on reload в инструментах разработчика вашего браузера (хотя вам нужно помнить, что это всегда должно быть включено).

Также в этих инструментах разработки есть что-то под названием Lighthouse для тестирования PWA, которое может быть полезно для понимания, все ли в порядке:

  • Удержание shift во время перезагрузки страницы отключает активный сервис-воркер от вмешательства в загрузку (действуя так, как будто его там нет)
  • Если какой-либо из извлеченных ресурсов, который получает сервис-воркер, выйдет из строя, сервис-воркер будет полностью проигнорирован, как будто его никогда не было…

Я узнал большую часть этого, играя в эту игру

Я полностью рекомендую его, если вы пытаетесь понять PWA. Это медленно, но это намерение — вы учитесь только повторением.



Service Workies
Изменить описаниеmastery.games