Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Поддержка PWA #181

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Conversation

bkoshelev
Copy link
Contributor

#113

Новая попытка добавить поддержку PWA (Предыдущая попытка - #127)

В данном случае используется пакет next-pwa, который советуют использовать в документации к next.js.

Ссылка для тестирования

Протестировано в:

  • Mac OS 12.0.1
    • Chrome 99.0.4844.84
    • Edge 98.0.1108.43
  • iOS 15.3.1
    • Safari
  • Android 9
    • Chrome 100.0.4896.127

@vercel
Copy link

vercel bot commented May 6, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
ota-solid ✅ Ready (Inspect) Visit Preview Jun 13, 2022 at 10:03AM (UTC)

@bespoyasov
Copy link
Owner

Огонь, спасибо!
Гляну на неделе :—)

Copy link
Owner

@bespoyasov bespoyasov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Найс! 👍

У меня там только один вопрос про настройки пакета в конфиге и один «философский» 😃

К остальному вопросов нет.

next.config.js Outdated
pageExtensions: ["md", "mdx", "tsx"],
pwa: {
dest: 'public',
modifyURLPrefix: {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Не нашёл в документации упоминания этой настройки; за что она отвечает?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

next-pwa создает свой список файлов в файле /public/sw.js. При сборке проекта, он сохраняет к себе url каждого файла, лежащего в папке .next/static (ссылка каждого файла имеет вид /static/*).

Затем, при сборке html файла каждой страницы, в теге script к url каждого файла в начало добавляется префикс _next/

next-pwa не знает про этот префикс и добавляет url в свой список "как есть", из-за чего потом service worker пытается обратиться к файлу по неверному пути.

в пакете ранее уже был код, который добавляет префикс (shadowwalker/next-pwa@384a513#diff-e727e4bdf3657fd1d798edcd6b099d6e092f8573cba266154583a746bba0f346L226), но он был удален в версии 5.0.0. (возможно, в новых версиях next.js или webpack уже нет необходимости в этом префиксе)

Параметр modifyURLPrefix добавляет необходимый префикс при сборке файла sw.js.
Этот параметр не упоминается в документации, но упоминание о нем есть в одном из issue shadowwalker/next-pwa#12

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ага, я понял. Спасибо за объяснение!

Вероятно, стоит зависимости обновить тогда, чтобы не использовать незадокументированных решений в коде. (Если, конечно, оно работает «из коробки» со свежей версией Next.)

Думаю, можно будет это отдельной задачей сделать и запихнуть в фоллоу-ап.

@@ -29,6 +29,7 @@ export default class MyDocument extends Document<IProps> {
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#f8364c" />
<link rel='manifest' href='/favicon/site.webmanifest' />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Надо будет обновить расположение манифеста или папку переименовать, а то как-то странно, что в favicon лежит json-файл 😅

Это не замечание к этому PR, а скорее вопрос ко мне и моему коду. Я подумаю об этом в фоллоу-апе.

next.config.js Outdated
pageExtensions: ["md", "mdx", "tsx"],
pwa: {
dest: 'public',
modifyURLPrefix: {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ещё я заметил, что в офлайне доступны сразу все страницы.

С одной стороны — это хорошо, потому что можно единожды загрузить и читать «в метро». С другой — это занимает 2,5 MB JS при скачивании, и, возможно, для мобильных это расточительно.

Может быть, стоит настроить “cache-as-you-go”, но я не уверен, что оно того стоит. Что думаете, @dex157, @bkoshelev? 🤔

Copy link
Owner

@bespoyasov bespoyasov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dex157, глянешь тоже, пожалуйста?

next.config.js Outdated
pageExtensions: ["md", "mdx", "tsx"],
pwa: {
dest: 'public',
modifyURLPrefix: {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Не нашёл в документации упоминания этой настройки; за что она отвечает?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ещё я заметил, что в офлайне доступны сразу все страницы.

С одной стороны — это хорошо, потому что можно единожды загрузить и читать «в метро». С другой — это занимает 2,5 MB JS при скачивании, и, возможно, для мобильных это расточительно.

Может быть, стоит настроить “cache-as-you-go”, но я не уверен, что оно того стоит. Что думаете, @dex157, @bkoshelev? 🤔

next.config.js Outdated
pageExtensions: ["md", "mdx", "tsx"],
pwa: {
dest: 'public',
modifyURLPrefix: {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ага, я понял. Спасибо за объяснение!

Вероятно, стоит зависимости обновить тогда, чтобы не использовать незадокументированных решений в коде. (Если, конечно, оно работает «из коробки» со свежей версией Next.)

Думаю, можно будет это отдельной задачей сделать и запихнуть в фоллоу-ап.

@bespoyasov
Copy link
Owner

Привет!

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

По поводу самого PR, меня всё устраивает. @dex157 сказал, что у него пока тяжко со временем, поэтому я пока за двоих 😄

Единственное, что мне интересно, это насколько сложно встроить Runtime Caching из этого пакета к нам?

Я нашёл в документации упоминание того, как настроить «постепенное кеширование» для страниц, которые пользователь открывает. Думаю, будет круто, если получится использовать его.

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

@bespoyasov
Copy link
Owner

(Кстати, возможно, мы можем посмотреть ещё в сторону этого пакета: next-offline, если next-pwa слишком сложный в настройке или чересчур opinitonated.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants