ویرگول
ورودثبت نام
ابـراهــیم
ابـراهــیم
خواندن ۲ دقیقه·۱ سال پیش

نحوه استفاده از PWA در Nextjs

نحوه استفاده از PWA در Nextjs
نحوه استفاده از PWA در Nextjs

سلام

قراره تو این پست بهتون نحوه استفاده از PWA رو درون برنامه های Nextjs آموزش بدم و از پروژه ی آموزش متنی Nextjs استفاده می کنم.

در این آموزش مفاهیم و اصول اولیه پیاده سازی PWA گفته نمیشه و تصور میره که شما از قبل باهاشون آشنایی دارید.


برای پیاده سازی این قابلیت، پکیج next-pwa که در پس زمینه از ابزار workbox استفاده می کنه رو نصب می کنیم:

npm

npm i next-pwa


Yarn

yarn add next-pwa


بعد از نصب پکیج، فایل next.config.js رو به این صورت ویرایش کنید:

pwa configuration in next.config.js
pwa configuration in next.config.js


حالا فایل manifest.json رو در مسیر /public ایجاد کنید و آیکون های لازم برنامه رو در /public/icons قرار بدید:

می تونید اسمش رو به دلخواه تغییر بدید اما پسوند باید png باشه
می تونید اسمش رو به دلخواه تغییر بدید اما پسوند باید png باشه


درون manifest.json رو هم به این صورت مقدار دهی کنید:

مقادیر این فایل رو هم می تونید بسته به نوع پروژه تون ویرایش کنید
مقادیر این فایل رو هم می تونید بسته به نوع پروژه تون ویرایش کنید


برای مقدار دهی این فایل می تونید از این ابزار آنلاین استفاده کنید


در مرحله بعد نیازه فایل manifest به پروژه متصل بشه. فایل _document.js رو به این صورت ویرایش کنید:


و در نهایت دستور yarn dev رو اجرا کنید. اگر مراحل رو به درستی رفته باشید، باید آیکون نصب برنامه رو در نوار جستجو و علامت PWA رو در ابزار lighthouse فعال ببینید:


و نکته آخر اینکه اگر دقت کرده باشید، بعد از اجرای دستور yarn dev چند فایل به نام های sw.js و workbox.js درون مسیر /public ساخته شده اند که کد های نهایی ابزار workbox هستن:

4 فایل در مجموع
4 فایل در مجموع


کد های درون این فایل ها با هر بار دستور dev تغییر می کنند و بعد از حذف دوباره ساخته میشن. برای همین بهتره که درون لیست .gitignore قرارشون بدید تا گیت بهشون محل نذاره:

کل ایل و تبارشون رو قرار دادم
کل ایل و تبارشون رو قرار دادم


خب، این آموزش هم تموم شد. امیدوارم براتون مفید بوده باشه.


منبع

How to Create a PWA With Next.js in 10 Minutes

nextjspwapwa nextjsprogressive web appنحوه pwa
ساده بگیر ولی دستِ کم نگیر
شاید از این پست‌ها خوشتان بیاید