PWA چیست و چطور آن را در وردپرس فعال کنیم؟

اگه دوست دارید کاربرها سایتتون رو مثل یک اپلیکیشن روی گوشی یا کامپیوتر نصب کنن، PWA یکی از راه‌های کاربردی پیش روی شماست. کاربر با زدن آیکون PWA مستقیم وارد سایت می‌شه و بسته به تنظیماتی که انجام دادید، موقع قطع اینترنت هم می‌تونه صفحهٔ آفلاین یا بعضی از محتواهای ذخیره‌شده رو ببینه.

در این مقاله با هم می‌بینیم PWA چیست، چه فرقی با سایت و اپلیکیشن معمولی داره و چطور می‌تونید اون رو در وردپرس فعال کنید. دربارهٔ تنظیم کش، نصب روی دستگاه‌های مختلف، آزمایش نهایی و خطاهای رایج هم حرف می‌زنیم تا این قابلیت تازه برای سبد خرید، حساب کاربری یا محتوای جدید سایتتون مشکلی درست نکنه.

PWA چیست و چطور کار می‌کنه؟

معنی PWA به زبان ساده

PWA مخفف Progressive Web App و به معنی «وب‌اپلیکیشن پیش‌رونده» هست. ساده‌تر بگیم، همون سایت شماست که چند قابلیت فنی بهش اضافه شده تا ظاهر و رفتارش به اپلیکیشن نزدیک‌تر بشه. کاربر معمولاً اون رو از مرورگر نصب می‌کنه و بعد آیکونش رو روی صفحهٔ اصلی گوشی یا بین برنامه‌های کامپیوتر می‌بینه.

البته PWA یک اپلیکیشن اندروید یا iOS نیست و قرار نیست همهٔ امکانات یک برنامهٔ بومی رو در اختیارتون بذاره. محتوا همچنان از وب میاد و نصب‌شدن یا دسترسی به امکانات دستگاه هم به مرورگر و سیستم‌عامل کاربر بستگی داره.

سه بخش اصلی PWA؛ مانیفست، سرویس ورکر و HTTPS

1. مانیفست وب: یک فایل تنظیماته که نام، آیکون، رنگ، نشانی شروع و روش نمایش PWA رو به مرورگر معرفی می‌کنه.
2. سرویس ورکر: یک کد JavaScript هست که جدا از صفحه اجرا می‌شه و درخواست‌های سایت، کش و محتوای آفلاین رو مدیریت می‌کنه.
3. HTTPS: همون اتصال امن سایته. سرویس ورکر در سایت اصلی باید روی HTTPS اجرا بشه تا مرورگر بتونه بهش اعتماد کنه.

اگه هنوز HTTPS رو روی سایتتون راه ننداختید، راهنمای ریدایرکت صفحات از HTTP به HTTPS می‌تونه نقطهٔ شروع خوبی براتون باشه.

کاربر چطور یک PWA رو روی دستگاهش نصب می‌کنه؟

در مرورگرهایی که از این قابلیت پشتیبانی می‌کنن، کاربر گزینه‌ای مثل Install app یا Add to Home Screen رو انتخاب می‌کنه. بعد از تأیید، آیکون PWA کنار بقیهٔ برنامه‌ها قرار می‌گیره. روش دقیق نصب در اندروید، دسکتاپ، iPhone و iPad یکی نیست و بعضی مرورگرها هم اصلاً دکمهٔ نصب مبتنی بر مانیفست رو نشون نمی‌دن.

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

تفاوت PWA با سایت واکنش‌گرا

سایت واکنش‌گرا اندازه و چیدمان خودش رو با صفحهٔ موبایل، تبلت یا کامپیوتر هماهنگ می‌کنه. PWA علاوه بر ظاهر مناسب برای موبایل، قابلیت‌هایی مثل نصب، آیکون مستقل، نمایش شبیه برنامه و مدیریت کش رو هم اضافه می‌کنه. پس واکنش‌گرا بودن یکی از پایه‌های یک تجربهٔ خوبه، ولی به‌تنهایی سایت رو به PWA تبدیل نمی‌کنه.

تفاوت PWA با اپلیکیشن اندروید و iOS

اپلیکیشن بومی معمولاً برای یک سیستم‌عامل مشخص ساخته می‌شه و کاربر اون رو از فروشگاه برنامه می‌گیره. PWA با فناوری‌های وب کار می‌کنه، با یک لینک به اشتراک گذاشته می‌شه و برای تغییر محتوای سایت هم لازم نیست نسخهٔ تازه‌ای در فروشگاه منتشر کنید. در عوض، اپلیکیشن بومی معمولاً دسترسی گسترده‌تر و هماهنگ‌تری به امکانات دستگاه داره.

چه زمانی PWA انتخاب مناسب‌تریه؟

اگه بیشتر امکاناتی که لازم دارید داخل وب قابل اجراست، می‌خواید کاربر با یک لینک به سرویس برسه و زمان یا بودجهٔ ساخت چند اپلیکیشن جدا رو ندارید، PWA می‌تونه انتخاب خوبی باشه. ولی اگه پروژه به قابلیت‌های تخصصی دستگاه، پردازش سنگین یا حضور جدی در فروشگاه‌های برنامه وابسته‌ست، بهتره PWA رو با یک اپلیکیشن بومی مقایسه کنید. برای آشنایی با مسیر دوم می‌تونید راهنمای ساخت و انتشار اپلیکیشن موبایل رو هم بخونید.

مزایا و محدودیت‌های PWA چیست؟

مزایای PWA برای مدیر سایت و کاربر

• نصب راحت از طریق مرورگر: در دستگاه‌های سازگار، کاربر بدون گرفتن یک فایل نصبی جدا می‌تونه PWA رو نصب کنه.
• دسترسی سریع از صفحهٔ اصلی دستگاه: آیکون سایت کنار برنامه‌های دیگه دیده می‌شه.
• امکان استفاده از کش و صفحهٔ آفلاین: می‌تونید برای وقت‌هایی که اینترنت قطع می‌شه، یک تجربهٔ مشخص و کنترل‌شده بسازید.
• دریافت نسخهٔ تازه بدون انتشار در فروشگاه: محتوای آنلاین مستقیم از سایت گرفته می‌شه؛ البته راهبرد کش روی زمان نمایش نسخهٔ تازه اثر می‌ذاره.
• اشتراک‌گذاری ساده با لینک: هر کاربر می‌تونه نشانی صفحه رو خیلی راحت برای بقیه بفرسته.

محدودیت‌هایی که قبل از فعال‌سازی باید بدونید

• تفاوت پشتیبانی: قابلیت نصب و امکانات PWA در مرورگرها و سیستم‌عامل‌های مختلف فرق داره.
• مصرف فضای دستگاه: داده‌ها و فایل‌های کش بخشی از فضای ذخیره‌سازی دستگاه رو اشغال می‌کنن.
• محدودیت بعضی قابلیت‌ها در iOS: روش نصب و بعضی رابط‌های برنامه‌نویسی اون با اندروید یکسان نیست.
• احتمال نمایش محتوای قدیمی: اگه کش درست تنظیم نشه، ممکنه نسخهٔ قبلی صفحه به کاربر نشون داده بشه.

آیا PWA برای سایت وردپرسی شما مناسبه؟

PWA برای چه سایت‌هایی کاربرد بیشتری داره؟

سایت‌های خبری، آموزشی، مجله‌ای، خدماتی و سامانه‌هایی که کاربر مرتب بهشون سر می‌زنه، معمولاً بیشتر از دسترسی سریع و صفحهٔ آفلاین سود می‌برن. فروشگاه ووکامرس هم می‌تونه PWA داشته باشه، ولی تنظیم کش در اون حساس‌تره.

چه سایت‌هایی باید با احتیاط از PWA استفاده کنن؟

اگه سایتتون اطلاعات لحظه‌ای، دادهٔ شخصی، فرم‌های حساس یا فرایند خرید داره، نباید همهٔ صفحه‌ها رو با یک قانون کش کنید. سایت‌هایی که قالب مناسبی برای موبایل ندارن هم بهتره اول ظاهر و کارکرد نسخهٔ موبایل رو درست کنن؛ چون قابلیت نصب، یک تجربهٔ ضعیف رو خودبه‌خود بهتر نمی‌کنه.

قبل از شروع چه چیزهایی رو باید آماده کنید؟

• گواهی HTTPS فعال و بدون خطای محتوای ناامن
• قالب سازگار با موبایل
• آیکون‌های واضح و مربعی در اندازه‌هایی که افزونه درخواست می‌کنه
• نسخهٔ پشتیبان و یک سایت آزمایشی برای بررسی تغییرات

روش فعال‌کردن PWA در وردپرس

انتخاب افزونهٔ مناسب PWA

برای شروع، امکانات افزونه‌ها، سازگاری با نسخهٔ فعلی وردپرس، زمان آخرین به‌روزرسانی، گزارش‌های پشتیبانی و تنظیمات کش رو در مخزن رسمی وردپرس ببینید. اسم منوها و گزینه‌ها ممکنه در نسخه‌های مختلف فرق کنه؛ پس تنظیمات همون نسخه‌ای رو دنبال کنید که واقعاً روی سایت آزمایشی نصب کردید.

PWA for WP – Progressive Web Apps Made Simple

PWA for WP برای تنظیم مانیفست، آیکون، صفحهٔ آفلاین و گزینه‌های مربوط به کش امکانات مختلفی داره. چون گزینه‌هاش نسبتاً زیادن، بهتره اول اون رو روی سایت آزمایشی تنظیم کنید و بعد نتیجه رو در سایت اصلی بسنجید.

Super Progressive Web Apps

Super Progressive Web Apps بیشتر روی راه‌اندازی سادهٔ PWA تمرکز داره. قبل از انتخاب، امکانات نسخه‌ای که نصب می‌کنید رو با نیازهای سایتتون مقایسه کنید؛ مخصوصاً اگه برای کش به استثناهای خاصی نیاز دارید.

PWA

PWA به‌عنوان پروژه‌ای مرتبط با قابلیت‌های PWA وردپرس عرضه شده. درست قبل از نصب، وضعیت نگهداری، سازگاری و امکانات فعلی اون رو در صفحهٔ افزونه ببینید تا انتخابتون بر اساس اطلاعات همون نسخه باشه.

در صفحهٔ رسمی افزونهٔ PWA در مخزن وردپرس، زیر نام افزونه هشداری دیده می‌شه که می‌گه این افزونه با سه نسخهٔ اصلی اخیر وردپرس آزمایش نشده. این پیام نشون می‌ده ممکنه افزونه دیگه به‌طور منظم به‌روزرسانی، نگهداری یا پشتیبانی نشه و موقع استفاده با نسخه‌های تازهٔ وردپرس هم مشکل سازگاری یا خطا داشته باشه.

البته این هشدار لزوماً معنی خراب یا ناامن‌بودن افزونه رو نمی‌ده؛ فقط یعنی سازگاری نسخهٔ فعلی اون با نسخه‌های جدید وردپرس تأیید نشده و بهتره با احتیاط بیشتری سراغش برید. پس پیشنهاد می‌کنیم این افزونه رو مستقیم روی سایت اصلی، مخصوصاً یک سایت فعال یا فروشگاهی، نصب نکنید.

اگه می‌خواید اون رو امتحان کنید، اول یک نسخهٔ پشتیبان کامل بگیرید و افزونه رو در یک سایت آزمایشی نصب کنید. بعد صفحهٔ اصلی، نوشته‌ها، فرم‌ها، ورود و خروج کاربران، صفحهٔ آفلاین و روش نمایش محتوای تازه رو بررسی کنید. اگه فروشگاه ووکامرس دارید، سبد خرید، تسویه‌حساب و حساب کاربری رو هم با دقت آزمایش کنید. گزارش خطاهای وردپرس و مرورگر، عملکرد سرویس ورکر و سازگاری افزونه با قالب، افزونه‌های امنیتی و افزونه‌های کش سایتتون رو هم یادتون نره. فقط وقتی همهٔ این آزمایش‌ها بدون مشکل انجام شدن، دربارهٔ استفاده از افزونه در سایت اصلی تصمیم بگیرید.

نصب افزونه از پیشخوان وردپرس

1. از پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونهٔ تازه» برید.
2. نام کامل افزونه رو داخل کادر جستجو بنویسید.
3. نام سازنده و صفحهٔ افزونه رو ببینید تا مطمئن بشید گزینهٔ درست رو نصب می‌کنید.
4. روی «هم‌اکنون نصب نمایید» و بعد «فعال نمایید» بزنید. ممکنه این دو عبارت در ترجمهٔ پیشخوان شما کمی متفاوت باشن.

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

تنظیم نام، آیکون، رنگ و صفحهٔ شروع

در تنظیمات افزونه، نام کامل و نام کوتاه PWA رو وارد کنید. بعد یک آیکون مربعی و واضح انتخاب کنید و رنگ اصلی رابط و رنگ پس‌زمینه رو مشخص کنید. صفحهٔ شروع یا Start URL هم همون صفحه‌ایه که بعد از زدن آیکون باز می‌شه؛ معمولاً صفحهٔ اصلی یا یک صفحهٔ مناسب برای کاربران برگشتی انتخاب بهتریه.

ساخت و تنظیم صفحهٔ آفلاین

یک برگهٔ ساده بسازید و داخلش توضیح بدید که اتصال اینترنت در دسترس نیست. یک دکمه برای تلاش دوباره یا برگشتن به صفحهٔ اصلی هم بذارید. این برگه نباید به فایل یا محتوایی وابسته باشه که بدون اینترنت دریافت نمی‌شه. در پایان، همین برگه رو در گزینهٔ Offline Page افزونه انتخاب کنید.

بررسی مانیفست و سرویس ورکر

سایت رو در یک پنجرهٔ ناشناس باز کنید و ابزار توسعه‌دهندهٔ مرورگر رو بالا بیارید. در Chrome یا Edge معمولاً بخش Application اطلاعات Manifest و Service Workers رو نشون می‌ده. نام، آیکون، Start URL و حالت نمایش رو ببینید و مطمئن بشید سرویس ورکر بدون خطا ثبت شده. اسم دقیق این منو ممکنه در نسخه‌های مختلف مرورگر فرق داشته باشه.

تنظیم کش PWA بدون ایجاد مشکل برای سایت

راهبرد کش به زبان ساده یعنی چی؟

راهبرد کش مشخص می‌کنه مرورگر اول نسخهٔ ذخیره‌شده رو نشون بده یا محتوای تازه رو از سرور بگیره. Cache First معمولاً حس سرعت بیشتری می‌ده، ولی احتمال نمایش نسخهٔ قدیمی رو هم بالا می‌بره. Network First اول سراغ اینترنت می‌ره و اگه شبکه در دسترس نباشه، از کش کمک می‌گیره.

انتخاب راهبرد مناسب برای محتوای عادی

برای فایل‌های ثابت مثل آیکون و بعضی فایل‌های ظاهری، استفاده از کش معمولاً منطقیه. برای نوشته‌ها و صفحه‌هایی که مرتب تغییر می‌کنن، راهبردی رو انتخاب کنید که نسخهٔ تازه رو در زمان مناسبی بگیره. چون نام گزینه‌ها در افزونه‌ها فرق داره، یک نوشته رو تغییر بدید و نتیجه رو با بازکردن اون در دستگاه آزمایشی بسنجید.

کنارگذاشتن صفحات حساس از کش

صفحه‌هایی که برای هر کاربر محتوای متفاوتی دارن، نباید مثل یک نوشتهٔ عمومی کش بشن. مسیرهای زیر و درخواست‌های مربوط بهشون رو با تنظیمات افزونه یا کمک توسعه‌دهنده از کش آفلاین کنار بذارید:

• سبد خرید
• تسویه‌حساب
• حساب کاربری
• ورود و خروج
• درخواست‌های حساس و اطلاعات شخصی

نکات مهم PWA برای فروشگاه ووکامرس

یک محصول رو به سبد خرید اضافه کنید، تعدادش رو عوض کنید و مراحل ورود، خروج و تسویه‌حساب آزمایشی رو پیش ببرید. همین کار رو در حالت عادی، ناشناس و بعد از قطع و وصل اینترنت تکرار کنید. قیمت، موجودی، سبد خرید و اطلاعات حساب باید تازه و مخصوص همون کاربر بمونن. اگه اطلاعات قدیمی می‌بینید، اول استثناهای کش PWA و بعد کش افزونهٔ سرعت، سرور و شبکهٔ توزیع محتوا رو ببینید.

روش نصب PWA برای کاربران

نصب PWA در اندروید

کاربر سایت رو در یک مرورگر پشتیبانی‌شده مثل Chrome باز می‌کنه. اگه پیشنهاد نصب ظاهر نشد، می‌تونه منوی مرورگر رو باز کنه و گزینه‌ای مثل Install app یا Add to Home screen رو بزنه. متن دقیق این گزینه به مرورگر و نسخهٔ اون بستگی داره.

نصب PWA در مرورگرهای دسکتاپ

در Chrome و Edge ممکنه آیکون نصب رو داخل نوار نشانی یا گزینهٔ نصب رو در منو ببینید. Firefox دسکتاپ نصب PWA مبتنی بر مانیفست رو مثل این مرورگرها ارائه نمی‌کنه؛ بااین‌حال خود سایت همچنان در اون باز می‌شه.

اضافه‌کردن PWA به صفحهٔ اصلی در iPhone و iPad

سایت رو در یک مرورگر سازگار باز کنید، دکمهٔ Share یا اشتراک‌گذاری رو بزنید و Add to Home Screen رو انتخاب کنید. بعد نام رو ببینید و روی Add بزنید. در iOS منتظر همون پنجرهٔ نصب سفارشی اندروید نباشید، چون روند نصبش فرق داره.

چرا دکمهٔ نصب در بعضی دستگاه‌ها نمایش داده نمی‌شه؟

مرورگر ناسازگار، HTTPS ناقص، خطای مانیفست، آیکون نامناسب، ثبت‌نشدن سرویس ورکر یا نصب‌شدن قبلی PWA از علت‌های رایج این مشکله. بعضی مرورگرها هم پیشنهاد خودکار نمی‌دن و کاربر باید نصب رو از داخل منو شروع کنه.

چطور از درست کارکردن PWA مطمئن بشید؟

بررسی نصب‌پذیری و آیکون اپلیکیشن

PWA رو روی یک دستگاه آزمایشی نصب کنید. نام، آیکون، رنگ شروع، صفحهٔ اولیه و روش بازشدنش رو ببینید. آیکون باید در اندازه‌های مختلف واضح باشه و بخش مهم طرح هم خیلی به لبه‌ها نچسبه.

آزمایش صفحهٔ آفلاین و به‌روزرسانی محتوا

اول چند صفحه رو در حالت آنلاین باز کنید. بعد اینترنت رو قطع کنید و صفحهٔ آفلاین و محتوای کش‌شده رو بسنجید. دوباره آنلاین بشید، یکی از نوشته‌ها رو تغییر بدید و ببینید نسخهٔ تازه چه زمانی ظاهر می‌شه. همین آزمایش ساده خیلی از ایرادهای راهبرد کش رو نشون می‌ده.

تست روی چند مرورگر و سیستم‌عامل

فقط به گوشی خودتون اکتفا نکنید. دست‌کم روی یک دستگاه اندرویدی، یک iPhone یا iPad و یک مرورگر دسکتاپ آزمایش کنید. اگه بخش بزرگی از کاربرهاتون از مرورگر خاصی استفاده می‌کنن، همون ترکیب رو در اولویت بذارید.

بررسی صفحات فروشگاه و فرم‌های سایت

فرم تماس، ورود، جستجو، سبد خرید، تسویه‌حساب و حساب کاربری رو جدا از هم آزمایش کنید. اطلاعات یک کاربر نباید به کاربر دیگه نشون داده بشه و ارسال فرم هم نباید به‌خاطر نسخهٔ کش‌شده شکست بخوره.

خطاهای رایج PWA در وردپرس و راه‌حل اون‌ها

PWA نصب نمی‌شه

اول HTTPS، مانیفست و سرویس ورکر رو ببینید. بعد کش مرورگر و سایت رو پاک کنید و یک بار دیگه در پنجرهٔ ناشناس آزمایش کنید. یادتون نره نبودن پیشنهاد خودکار همیشه نشونهٔ خرابی نیست؛ شاید نصب فقط از منوی مرورگر در دسترس باشه.

آیکون یا نام اشتباه نمایش داده می‌شه

نام و آیکون مانیفست رو در تنظیمات افزونه درست کنید. بعد کش‌ها رو پاک کنید و نسخهٔ نصب‌شده رو هم حذف کنید. معمولاً باید PWA رو دوباره نصب کنید، چون ممکنه سیستم‌عامل اطلاعات نسخهٔ قبلی رو نگه داشته باشه.

محتوای تازه به کاربر نشون داده نمی‌شه

راهبرد و زمان انقضای کش رو ببینید. اگه افزونه گزینه‌ای برای پاک‌کردن یا ساخت دوبارهٔ کش PWA داره، از همون کمک بگیرید. کش افزونهٔ سرعت، سرور و مرورگر رو هم جداگانه آزمایش کنید تا بفهمید نسخهٔ قدیمی از کجا میاد.

سبد خرید یا حساب کاربری اطلاعات قدیمی داره

صفحه‌ها، کوکی‌ها و درخواست‌های پویای فروشگاه رو از کش PWA کنار بذارید. تا وقتی مشکل در سایت آزمایشی کامل برطرف نشده، PWA رو برای فرایند خرید سایت اصلی فعال نگه ندارید.

صفحهٔ آفلاین باز نمی‌شه

مطمئن بشید برگه منتشر شده، در تنظیمات افزونه انتخاب شده و سرویس ورکر فرصت داشته اون رو ذخیره کنه. یک بار برگه رو آنلاین باز کنید و بعد اینترنت رو قطع کنید. اگه باز هم خطا دیدید، نشانی برگه و گزارش خطای سرویس ورکر رو ببینید.

جمع‌بندی؛ آیا فعال‌کردن PWA ارزشش رو داره؟

حالا می‌دونید PWA چیست: یک تجربهٔ وب نصب‌پذیر که با مانیفست، سرویس ورکر و HTTPS ساخته می‌شه. این روش دسترسی به سایتتون رو راحت‌تر می‌کنه و می‌تونه هنگام قطع اینترنت تجربهٔ بهتری به کاربر بده، ولی در همهٔ پروژه‌ها جای اپلیکیشن بومی رو نمی‌گیره.

در یک سایت وردپرسی، افزونه شروع کار رو ساده‌تر می‌کنه؛ ولی نتیجهٔ امن و قابل‌اعتماد به تنظیم درست کش و آزمایش واقعی بستگی داره. بهتره اول PWA رو روی سایت آزمایشی راه بندازید، صفحه‌های حساس رو از کش کنار بذارید و بعد از آزمایش روی چند دستگاه، اون رو در سایت اصلی فعال کنید.

سؤال‌های متداول دربارهٔ PWA

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.