Как сделать PWA на NEXTJS ?
При оптимизации страницы, я понял что мне еще много что представить поправить, например сегодня правил цвет текста который слабовидящие бы не рассмотрели, или как нельзя запрещать пользователю увеличивать на телефоне твой сайт, ибо они также нифига не разглядят😅. И такими маленькими шагами я дошел до PWA! Честно говоря понимал что это,но не до конца, а зря! Ведь это очень классная тема, когда с сайта ты можешь транфсформировать веб-приложение в мобильное или декстопное. Сейчас покажу как это сделать 😎. Для начала устанавливаем либу next-pwa, идем в next.config.js и оборачиваем наш nextConfig в withPWA:
50% уже сделано, осталось добавить файл manifest.json — который будет сообщать браузеру о нашем веб приложении и как оно должно себя при добавлении на мобильное устройство или компьютер пользователя. В директорию public:
Для иконок я как раз придумал себе лого 😅.
Осталось добавить в наш _document.js manifest.json:
<Head>
<link rel="manifest" href="manifest.json" />
</Head>
И в принципе все! у себя в dev режиме я отключал просмотр PWA, для тех кто так не делал оно должно и так отображаться.
const withPWA = require("next-pwa")({
dest: "public",
disable: process.env.NODE_ENV === "development",
});
Кто ее отключает в dev, можно сделать npm run build && npm start и так уже проверять. В правом верхнем углу нажимаем на иконку установить:
Получаем итоговое приложение 😎. Такая же операция работает и на мобильных устройств.
Теперь я думаю наше веб-приложение будет довольно универсальным 😇.
