تبدیل سایت وردپرس به اپلیکیشن PWA

طبق آمار رسمی در سال ۲۰۱۹ دستگاه های موبایل(بدون احتساب تبلت ها) حدود ۵۲٫۶% از ترافیک کل وب را تشکیل داده اند و این یعنی نیمی از بازدید کنندگان سایت شما احتمالا با موبایل وب سایت شما را باز می کنند، محبوبیت این روزهای موبایل شاید شما را به فکر ایجاد یک اپلیکیشن برای وب سایت خود انداخته باشد اما تکنولوژی PWA یا Progressive Web Application این روزها به کار شما می آید. اگر وب سایتی با طراحی واکنش گرا در وردپرس دارید، بخت با شما یار است چون توسعه دهندگان سوم شخص، انجام تبدیل سایت وردپرس به PWA را برای شما آسان کرده اند.

Progressive Web App(PWA) چیست؟

PWA یا برنامه های پیش رونده ی تحت وب، در واقع برنامه هایی هستند که با تکنولوژی وب ساخته شده اند و روی موتور مرورگر اجرا می شوند اما می توان نوار آدرس مرورگر را از آن ها حذف کرد، به آن ها یک آیکون و صفحه لودینگ(اسپلش) اختصاص داد و از همه مهم تر آیکون آن را به مانند سایر برنامه های موبایل به گوشی کاربر اضافه کرد. این ساده ترین توضیحی بود که می توانستیم درباره کلیت موضوع و مفهوم قابل لمس PWA برایتان ارائه کنیم.

به عبارت دیگر پی دبلیو ای(PWA) شبیه به برنامه های تحت وب مثل وب سایت است و مانند آن ها عمل می کنند اما برخی خواص و عملکرد برنامه های موبایل را نیز دارا خواهد بود.

PWA یک تعریف دارد، برای این که وب سایت شما واقعا PWA محسوب شود، تجربه کاربر می بایست به این شکل باشد:

  • سریع – می بایست در کسری از ثانیه لود صفحه تمام شود
  • قابل اطمینان – می بایست حتی در بدترین شرایط شبکه و ضعیف ترین اینترنت ها نیز با سرعت خوبی لود شود
  • درگیر کننده – می بایست کار با آن راحت باشد و تجربه خوبی برای کاربر داشته باشد
  • واکنشگرا – می بایست در تمام دستگاه ها با رزولوشن های مختلف به خوبی کارکرده و نقصی نداشته باشد

 

چه کارهایی برای PWA کردن سایت نیاز است؟

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

اگر سایت شما وردپرس است، با توجه به هزاران منبع و توسعه دهنده ای که برای این پلتفرم ابزار تولید می کنند، کار راحت تری در پیش رو دارید.

در این مقاله چند افزونه معرفی می شود که شما را از مباحث فنی مثل ساختن سرویس ورکر(service worker) و ایجاد ساختارهای لازم برای هویت دار کردن وب سایت به عنوان یک اپلکیشن تحت وب، به دور می سازد و در عرض چند دقیقه صاحب یک اپلیکیشن PWA خواهید بود.

 

PWA ها زمان استفاده کاربران از سرویس شما را ۴ برابر افزایش می دهند

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

مزایای ساخت PWA برای وب سایت شما:

  • اجرای مستقیم بر روی مرورگر موبایل(دغدغه ی نسخه ی اندروید و iOS را ندارید)
  • نیازی به قرار دادن و هزینه کردن برای ثبت اپلیکیشن در مکان هایی مثل کافه بازار و گوگل پلی ندارید
  • هر زمان که خواستید می توانید آن را به روز کنید و همه کاربران در لحظه به روزرسانی شما را می بینند
  • کاربران شما می توانند با پلتفرم های مختلفی اپلیکیشن شما را باز کنند(به علت استفاده از موتور مرورگر به جای سیستم عامل)
  • PWA بر روی هر نوع دستگاه با هر اندازه ای اجرا می شود
  • کاربران برای نصب برنامه PWA نیازی به دانلود هیچ چیزی ندارند و در فضای آن ها صرفه جویی می شود

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

با اشاره به مقاله گوگل، PWA ها با تجربه کاربری/رابط کاربری مشابه با برنامه های اصلی موبایل، استفاده کاربران را بالا می برند و حتی در نظر داشتن این گونه طراحی نسبت به وب سایت های Mobile friendly نیز نرخ تبدیل بیشتری دارد.

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

ساخت PWA از صفر یا استفاده از افزونه وردپرس

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

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

یک وب اپلیکیشن را می توانید با تکنولوژی هایی مثل AngularJS، React یا Vue بسازید که هرکدام منافع راهبردی خودشان در طراحی را دارا هستند.

برای بیشترین اثر گذاری از استانداردهای PWA معرفی شده توسط گوگل استفاده کنید

PWA توسط گوگل معرفی شده و می بایست استانداردهای لازم برای یک وب اپلیکیشن قابل قبول را از چک لیست این شرکت کسب کرد. مواردی که در ادامه مطرح می شود حداقل موارد موردنیاز برای ایجا یک پی دبلیو ای قابل ارائه برای کاربران هستند که می بایست به خوبی رعایت شوند.

اجزای کلیدی یک Progressive Web App

  • سایت حتما می بایست بر روی HTTPS ارائه شود
  • کلیه صفحات و منوها بر روی صفحه نمایش های مختلف مثل تبلت ها نیز به شکل واکنشگرا طراحی شده باشد.
  • همه URL ها با استفاده از تکنیک کش در هنگام آفلاین بودن نیز در دسترس باشند(iglink.ir که توسط شرق وب تولید شده را ببینید)
  • متادیتاهای موردنیاز مثل اسم و لوگو برای گزینه ی Add to Home Screen مرورگر موبایل در دسترس قرار گرفته باشد
  • حتی بر روی ارتباطات ۳G هم با سرعت خوبی لود شود(گوگل احتمالا نمی دونه تو ایران چه خبره)
  • هر صفحه دارای یک URL جداگانه باشد

برای بررسی مواردی که عنوان شده و برخی مواردی که اخیرا اضافه می شود و عنوان نشده، می توانید از ابزار Google Lighthouse tool برای ارزیابی خودکار آن ها به جای چک کرن دستی استفاده کنید.

 

سرمشق گوگل برای PWA

گوگل علاوه بر توضیحاتی که اشاره شد توضیحات بیشتری برای کاراکتر و شخصیت یک وبسایت PWA ارائه کرده است که حتی در ابزار lighthouse نیز مشاهده نمی شود و می بایست به صورت دستی بررسی شوند. ویژگی های یک وب اپلیکیشن خوب به این صورت است:

  • محتوای سایت به وسیله گوگل ایندکس شده باشد
  • متادیتاهای منطبق با Schema.org در وب سایت وجود داشته باشد
  • متادیتاهای ارتباط با شبکه های اجتماعی به خوبی درج شده باشد
  • آدرس های Canonical (که موجب تشخیص صحیح URL صفحات می شوند) در جاهای مناسب استفاده شده باشند
  • برای گشت و گذار در صفحات یک API تاریخچه مرور در دسترس باشد
  • در هنگام لود صفحات از ترنزیشن های نرم و چشم نواز استفاده شود
  • هنگام زدن دکمه Back قابلیت برگشت به صفحه قبل با حفظ موقعیت اسکرول در صفحه وجود داشته باشد
  • ورودی های متنی طوری قرار داده شوند که هنگام باز شدن کیبورد موبایل، قابل مشاهده باشند
  • محتوا قابل به اشتراک گذاری باشد و دکمه های مربوطه با استاندارد URL به اشتراک گذاری، طراحی شده باشند
  • گزینه ای برای غیرفعال کردن اعلانات(Notification) ها وجود داشته باشد.
  • اگر وب سایت فروشگاهی است قابلیت پرداخت سریع در ساختار فعلی وجود داشته باشد.

حتما و حتما دقت لازم را برای تست و فیکس کردن هر آیتم قبل از در دسترس قرار دادن PWA برای عموم داشته باشید تا موجب نارضایتی کاربران و بازخورد منفی نشود.

افزونه PWA برای وردپرس جهت ساده سازی فرآیند

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

Super Progressive Web Apps

یکی از بهترین و محبوب ترین افزونه های PWA که کار کردن با آن خیلی راحت است و از همه مهم تر رایگان است. Super Progressive Web Apps نام دارد. این افزونه به تنظیمات شخصی سازی گسترده اش شناخته می شود و این قابلیت را دارد که برنامه های آفلاین با کیفیتی تولید کند

با استفاده از این افزونه می توانید خیلی سریع آیکون برنامه را تنظیم کنید و پس از آماده سازی، افزونه به هر کاربری که با موبایل از وب سایت شما بازدید می کند گزینه ی Add to Home Screen را نمایش می دهد. این ویژگی به آن ها قابلیت اضافه کردن سایت به صفحه موبایل در بخش اپلیکیشن ها را می دهد و از این پس کاربرانی که عادت دارند در گوشی موبایل خود بچرخند، آیکون برنامه ی شما را هم می بینند و به احتمال زیادی بازش می کنند تا ببینند چه چیزی اضافه کرده اید!

 

WordPress Mobile Pack

افزونه پک موبایل وردپرس(WordPress Mobile Pack) نیز افزونه ی دیگری برای تبدیل سایت وردپرس به PWA است که حتی امکان استفاده از قالب های مخصوص برای این کار را هم می دهد. همچنین قابلیت شخصی سازی ظاهر برنامه برای جور کردن آن با برند وب سایت تان را می دهد.

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

 

Progressive WordPress

اگر به دنبال یک راهکار ساده هستید، نگران نباشید چون حتی یک خط کد هم نیاز نیست، افزونه Progressive WordPress به صورت تمام خودکار قابلیت PWA را بر روی وب سایت شما فعال می کند.

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

 

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

در صورتی که برای راه اندازی یک وب سایت وردپرس و یا اختصاصی به صورت PWA نیاز به کمک دارید، می توانید از طریق فرم تماس با ما، با مجموعه شرق وب برای دریافت بهترین کیفیت در تماس باشید.

اشتراك گذاری نوشته

دیدگاه (11)

  • حسن طهماسبی پاسخ

    سلام .دوست عزیز هزینه این افزونه ها در ورد پرس چقدر میباشد

    می 18, 2020 در 12:11 ب.ظ
    • شرق وب پاسخ

      سلام و عرض ادب و احترام،
      افزونه های معرفی شده در این پست رایگان هستند.

      می 21, 2020 در 11:15 ب.ظ
  • محسن پاسخ

    درود بر شما
    ساعت ۳:۳۵ صبح هستش و من پای سیستم اینترنت رو برای موضوعی جستجو میکردم که شدیدا کلافه شده بودم!! ( چون پیدا نمیشد!)
    با خوندن مطلبتون میتونم بگم انگار آرام بخش خورده باشم ریلکس شدم!! بسیار کاربردی و جامع بود.

    قلبا میگم خسته نباشید

    می 4, 2020 در 3:39 ق.ظ
    • شرق وب پاسخ

      سلام و عرض ادب و احترام،
      از این که توانسته ایم مقاله ای با کیفیت در جهت بهبود کسب و کار شما ارائه کنیم بسیار خرسندیم.
      حمایت شما باعث دلگرمی ماست،
      با سپاس و احترام فراوان

      می 4, 2020 در 2:51 ب.ظ
  • بهنام پاسخ

    سلام واقعا کامل و عالی مثل همیشه

    فقط یسوالی کدامیک ازین افزونه ها بهترن؟ و اینکه هر ۳ رایگان هستند؟

    آوریل 14, 2020 در 9:03 ب.ظ
    • شرق وب پاسخ

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

      آوریل 14, 2020 در 9:39 ب.ظ
      • بهنام پاسخ

        یک دنیا ممنونم ازتون

        آوریل 14, 2020 در 10:39 ب.ظ
  • Ali پاسخ

    دست شما درد نکنه.

    آوریل 14, 2020 در 6:39 ب.ظ
    • شرق وب پاسخ

      از این که به این مقاله توجه داشته اید سپاسگزاریم،
      امیدواریم کمک کرده باشیم.
      با سپاس و احترام فراوان

      آوریل 14, 2020 در 6:43 ب.ظ
  • مهرداد پاسخ

    عاااااااااالی بود

    آوریل 14, 2020 در 6:04 ب.ظ
    • شرق وب پاسخ

      ضمن تشکر از نظر لطف شما،
      امیدواریم بهترین استفاده را از مطالبی که منتشر می کنیم داشته باشید.

      با سپاس و احترام فراوان

      آوریل 14, 2020 در 6:05 ب.ظ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *