Skip to content
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion next.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const withSourceMaps = require('@zeit/next-source-maps')
const withCSS = require('@zeit/next-css')
const withPWA = require('next-pwa')

const withMDX = require('@next/mdx')({
extension: /\.(md|mdx)$/,
Expand All @@ -11,7 +12,17 @@ const withMDX = require('@next/mdx')({
module.exports = withCSS(
withMDX(
withSourceMaps(
{ pageExtensions: ["md", "mdx", "tsx"] }
withPWA(
{
pageExtensions: ["md", "mdx", "tsx"],
pwa: {
dest: 'public',
modifyURLPrefix: {
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
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
Copy Markdown
Owner

Choose a reason for hiding this comment

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

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

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

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

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
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? 🤔

'static/': '_next/static/',
}
}
}
)
)
)
)
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"mobx-react": "^6.1.4",
"mobx-state-tree": "^3.15.0",
"next": "^9.2.1",
"next-pwa": "^5.5.2",
"nookies": "^2.0.8",
"prismjs": "^1.23.0",
"react": "^16.12.0",
Expand Down
1 change: 1 addition & 0 deletions pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy Markdown
Owner

Choose a reason for hiding this comment

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

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

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

<meta name="msapplication-TileColor" content="#f8364c" />
<meta name="theme-color" content="#ffffff" />

Expand Down
7 changes: 4 additions & 3 deletions public/favicon/site.webmanifest
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,18 @@
"short_name": "SOLID",
"icons": [
{
"src": "/android-chrome-192x192.png",
"src": "/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"src": "/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
"display": "standalone",
"start_url": "/"
}
Loading