TGViewer
Defront — про фронтенд-разработку и не только Defront — про фронтенд-разработку и не только @defront · 5.04K subscribers
Post #567 3.9K
Демиан Рензулли и Джеф Посник рассказали про то, как использовать сервис воркеры и Streams API для быстрого перехода между страницами сайта — "App shell UX with service workers and streams".

Статья основывается на подходе, который используется сайтом dev.to. На всех страницах выделяются общие части: header, navbar, footer — они кешируются сервис воркером. При переходе на новую страницу с сервера приходит основное содержимое сайта, которое "склеивается" с закешированными частями и передаётся как результат с помощью Streams API. Благодаря использованию стримов браузер начинает рендерить шапку страницы до получения ответа сервера. Переходы между страницами страницами становятся очень быстрыми — во время навигации по сайту заголовок страницы остаётся на своём месте, создавая иллюзию SPA. В статье есть пример как реализовать такой подход с помощью библиотеки Workbox.

Рекомендую почитать статью всем, кто поддерживает многостраничные сайты и ищет способы ускорения их работы.

#serviceworker #performance

https://web.dev/app-shell-ux-with-service-workers/
More from @defront
  1. Jan 7, 2024Channel name was changed to «Defront — про фронтенд-разработку и не только»
  2. Feb 24, 2022Про войну в Украине Шлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет н…
  3. Feb 23, 2022Qwik — возобновляемый JavaScript-фреймворк Райан Карниато поделился своими мыслями после р…
  4. Feb 22, 2022Обработка ошибок с помощью reportError Стэфан Джудис рассказал про малоизвестный метод для…
  5. Feb 21, 2022Выбор библиотеки по её размеру Владимир Клепов рассказал про подводные камни выбора библио…
  6. Feb 10, 2022Time-travel debugging в Svelte Сэм Ван Тассел рассказал про DeLorian — новый инструмент дл…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →