قراره تو این پست بهتون نحوه استفاده از PWA رو درون برنامه های Nextjs آموزش بدم و از پروژه ی آموزش متنی Nextjs استفاده می کنم.
در این آموزش مفاهیم و اصول اولیه پیاده سازی PWA گفته نمیشه و تصور میره که شما از قبل باهاشون آشنایی دارید.
برای پیاده سازی این قابلیت، پکیج next-pwa که در پس زمینه از ابزار workbox استفاده می کنه رو نصب می کنیم:
npm
npm i next-pwa
Yarn
yarn add next-pwa
بعد از نصب پکیج، فایل next.config.js رو به این صورت ویرایش کنید:
حالا فایل manifest.json رو در مسیر /public ایجاد کنید و آیکون های لازم برنامه رو در /public/icons قرار بدید:
درون manifest.json رو هم به این صورت مقدار دهی کنید:
برای مقدار دهی این فایل می تونید از این ابزار آنلاین استفاده کنید
در مرحله بعد نیازه فایل manifest به پروژه متصل بشه. فایل _document.js رو به این صورت ویرایش کنید:
و در نهایت دستور yarn dev رو اجرا کنید. اگر مراحل رو به درستی رفته باشید، باید آیکون نصب برنامه رو در نوار جستجو و علامت PWA رو در ابزار lighthouse فعال ببینید:
و نکته آخر اینکه اگر دقت کرده باشید، بعد از اجرای دستور yarn dev چند فایل به نام های sw.js و workbox.js درون مسیر /public ساخته شده اند که کد های نهایی ابزار workbox هستن:
کد های درون این فایل ها با هر بار دستور dev تغییر می کنند و بعد از حذف دوباره ساخته میشن. برای همین بهتره که درون لیست .gitignore قرارشون بدید تا گیت بهشون محل نذاره:
خب، این آموزش هم تموم شد. امیدوارم براتون مفید بوده باشه.
