Поддержка PWA #181
Поддержка PWA #181
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Огонь, спасибо! |
next.config.js
Outdated
| pageExtensions: ["md", "mdx", "tsx"], | ||
| pwa: { | ||
| dest: 'public', | ||
| modifyURLPrefix: { |
There was a problem hiding this comment.
Не нашёл в документации упоминания этой настройки; за что она отвечает?
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Ага, я понял. Спасибо за объяснение!
Вероятно, стоит зависимости обновить тогда, чтобы не использовать незадокументированных решений в коде. (Если, конечно, оно работает «из коробки» со свежей версией Next.)
Думаю, можно будет это отдельной задачей сделать и запихнуть в фоллоу-ап.
pages/_document.tsx
Outdated
| @@ -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' /> | |||
There was a problem hiding this comment.
Надо будет обновить расположение манифеста или папку переименовать, а то как-то странно, что в favicon лежит json-файл 😅
Это не замечание к этому PR, а скорее вопрос ко мне и моему коду. Я подумаю об этом в фоллоу-апе.
next.config.js
Outdated
| pageExtensions: ["md", "mdx", "tsx"], | ||
| pwa: { | ||
| dest: 'public', | ||
| modifyURLPrefix: { |
There was a problem hiding this comment.
Ещё я заметил, что в офлайне доступны сразу все страницы.
С одной стороны — это хорошо, потому что можно единожды загрузить и читать «в метро». С другой — это занимает 2,5 MB JS при скачивании, и, возможно, для мобильных это расточительно.
Может быть, стоит настроить “cache-as-you-go”, но я не уверен, что оно того стоит. Что думаете, @dex157, @bkoshelev? 🤔
next.config.js
Outdated
| pageExtensions: ["md", "mdx", "tsx"], | ||
| pwa: { | ||
| dest: 'public', | ||
| modifyURLPrefix: { |
There was a problem hiding this comment.
Не нашёл в документации упоминания этой настройки; за что она отвечает?
There was a problem hiding this comment.
Ещё я заметил, что в офлайне доступны сразу все страницы.
С одной стороны — это хорошо, потому что можно единожды загрузить и читать «в метро». С другой — это занимает 2,5 MB JS при скачивании, и, возможно, для мобильных это расточительно.
Может быть, стоит настроить “cache-as-you-go”, но я не уверен, что оно того стоит. Что думаете, @dex157, @bkoshelev? 🤔
next.config.js
Outdated
| pageExtensions: ["md", "mdx", "tsx"], | ||
| pwa: { | ||
| dest: 'public', | ||
| modifyURLPrefix: { |
There was a problem hiding this comment.
Ага, я понял. Спасибо за объяснение!
Вероятно, стоит зависимости обновить тогда, чтобы не использовать незадокументированных решений в коде. (Если, конечно, оно работает «из коробки» со свежей версией Next.)
Думаю, можно будет это отдельной задачей сделать и запихнуть в фоллоу-ап.
|
Привет! Сорри, что этот пул-реквест наложился на обновление мажорных версий зависимостей. Сейчас я его вмёржил, теперь особо пакеты меняться не должны пока, можно пофиксить кофликты. По поводу самого PR, меня всё устраивает. @dex157 сказал, что у него пока тяжко со временем, поэтому я пока за двоих 😄 Единственное, что мне интересно, это насколько сложно встроить Runtime Caching из этого пакета к нам? Я нашёл в документации упоминание того, как настроить «постепенное кеширование» для страниц, которые пользователь открывает. Думаю, будет круто, если получится использовать его. Причина: не хочется отдавать сразу всю книгу по сети, чтобы не расходовать зря трафик, да и не каждому пользователю нужны все страницы. Будет достаточно сохранять в кэш те страницы, которые пользователь уже посмотрел, тогда при повторном просмотре мы сможем брать их из кэша. |
|
(Кстати, возможно, мы можем посмотреть ещё в сторону этого пакета: |
#113
Новая попытка добавить поддержку PWA (Предыдущая попытка - #127)
В данном случае используется пакет next-pwa, который советуют использовать в документации к next.js.
Ссылка для тестирования
Протестировано в: