اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

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

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

تصویر(1)

PWΑ ها چه چیزی هستند؟

وب اپلیکیشن های پیش رونده (PWA) نوعی فناوری هستند که قابلیت های یک وب سایت سنتی و واکنش گرا را با قابلیت های یک برنامه کاربردی موبایل با امکانات فراوان ترکیب می کنند.

به گفته موزیلا، PWΑ ها از ویژگی های مدرن وب برای ارائه یک رابط کاربری شبیه به اپلیکیشن استفاده می کنند که با یک مرورگر وب قابل دسترسی است.

سه جزء کلیدی فناوری وب اپلیکیشن پیش رونده عبارتند از:

1. Service Workers:

PWA ها از اسکریپت‌هایی استفاده می‌کنند که به صورت مستقل از وب‌سایت اجرا می‌شوند و اقدامات مشابهی را انجام می‌دهند که پیش‌تر تنها روی صفحه وب قابل اجرا بودند. به عنوان مثال، Service Workers امکان ارسال Push Notification، فعالسازی همگام‌سازی در پس زمینه و دسترسی آفلاین را فراهم می‌آورند. دسترسی آفلاین به این دلیل امکان‌پذیر است که Service Workers به عنوان یک شبکه واسط عمل می‌کنند. PWAs می‌توانند محتوا را کش کرده و در صورت نبود اتصال، آن را ارائه دهند و بدین ترتیب حتی در شرایطی که به شبکه اینترنت دسترسی ندارید، می توانید از اپلیکیشن استفاده نمایید.

2. Web App Manifest:

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

3. HTTPS:

HTTPS یکی از حیاتی‌ترین موارد مربوط به سایت است. هرچند HTTPS مستقیماً بر تجربه کاربر تأثیر نمی‌گذارد اما امنیت را تقویت می‌کند و حریم خصوصی بازدیدکنندگان با رمزگذاری داده‌ها و ناشناس بودن اطلاعات محافظت می‌شود.

ادغام هر سه فناوری، یک تجربه سریع و بدون نیاز به نصب را ارائه می دهد. وب اپلیکیشن پیش رونده (PWA) که توسط TechAhead توسعه یافته است، یک تجربه یکپارچه بین وب‌سایت و نسخه‌های موبایل اپلیکیشن آن ارائه می‌دهد. این امر باعث می‌شود مشتریان به راحتی و بدون دردسر‌های تجربه کاربری (UX) ضعیف وب‌سایت‌های سنتی، بتوانند مستقیماً از طریق مرورگرهای خود سفارش دهند.

تصویر(2)

چرا تبدیل وب‌سایت وردپرسی به یک وب اپلیکیشن پیش رونده ایده‌ ای عالی است؟

تبدیل کردن وب‌سایت وردپرسی به یک وب اپلیکیشن پیش رونده (PWA) می‌تواند به طرز قابل توجهی حضور دیجیتال و تجربه کاربری شما را بهبود بخشد. در ادامه دلایلی ذکر شده که چرا این تغییر، یک حرکت هوشمندانه می باشد:

1. افزایش تعامل کاربر

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

2. بهبود سرعت وب‌سایت

PWA ها بسیار سریع هستند. بیشتر منابع (فایل‌ها، تصاویر و غیره) در حافظه کش ذخیره می‌شوند و Service Worker ها به بارگذاری سریع آنها کمک می‌کنند. حتی اگر بازدیدکنندگان شما از سریع‌ترین یا باثبات‌ترین اتصال به اینترنت برخوردار نباشند، وب اپلیکیشن پیش رونده ساخته‌شده با وردپرس باعث بهبود سرعت بارگذاری می‌شود. این افزایش سرعت نه تنها تجربه کاربری را بهبود می‌بخشد بلکه بر رتبه وب‌سایت شما در موتورهای جستجو نیز تاثیر مثبت می‌گذارد زیرا سرعت وب‌سایت یکی از عوامل موثر در رتبه‌بندی گوگل است.

3. قابلیت کارکرد آفلاین

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

4. رفع محدودیت‌های سنتی

وب‌سایت‌های سنتی و برنامه‌های تلفن همراه هریک محدودیت‌های خاص خود را دارند. برای مثال، وب‌سایت‌ها وابستگی شدیدی به کیفیت شبکه دارند و نمی‌توانند قابلیت‌های مربوط به برنامه‌های Native (اصلی) مانند Push Notification یا دسترسی آفلاین را ارائه دهند. از طرف دیگر، برنامه‌های تلفن همراه نیازمند دانلود و نصب بروزرسانی‌ها توسط کاربران به صورت مرتب هستند.

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

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

هر فردی که به دنبال ساخت یک PWA برای وردپرس است، باید موارد زیر را بداند:

• طراحی UX: از اصول طراحی UX به عنوان نقطه شروع برای ساختن یک PWA کاربرپسند که افراد تمایل به استفاده و تعامل با آن داشته باشند، استفاده کنید.
• مهارت های HTML و CSS: باید صفحات خود را مرتب کنید و آنها را از نظر بصری جذاب و ریسپانسیو (واکنش گرا) نمایید. این کار نیازمند دانش HTML و CSS، که الفبای طراحی وب هستند، می باشد.
• دانش PHP: وردپرس بر پایه PHP ساخته شده است، بنابراین برای تنظیم پوسته ها و افزونه ها و افزودن سایر ویژگی های محتوای پویا به وب اپلیکیشن پیش رونده خود، باید روی زبان مربوط به اسکریپت نویسی سمت سرور تسلط کافی داشته باشید.
• تسلط بر جاوا اسکریپت: جاوا اسکریپت جهت مدیریت تعامل با PWA شما، کار با سرویس ورکرها برای عملکرد آفلاین و افزودن عملکردهای پیچیده تر مانند Push Notification و موارد دیگر مورد نیاز است.
• آشنایی با وردپرس: درک چگونگی عملکرد تمام جنبه های وردپرس، API های آن، سفارشی سازی پوسته و افزونه، مدیریت محتوا و توابع PHP خاص وردپرس که در اختیار دارید، روند توسعه را بسیار آسان تر می کند.

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

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

• Super Progressive Web Apps
• PWA for WP & AMP
• PWA
• Instantify

1. Super Progressive Web Apps

تصویر(3)

افزونه Super Progressive Web Apps که توسط SuperPWA توسعه یافته، راهی ساده را برای کاربران وردپرس جهت تبدیل وب‌سایت‌هایشان به وب اپلیکیشن پیش رونده (PWA) ارائه می‌دهد. این پلاگین با ترکیب بهترین ویژگی‌های وب و برنامه‌های موبایل، امکان استفاده آفلاین، سرعت بارگذاری تقریباً سریع و دسترسی از طریق یک میانبر در صفحه اصلی را فراهم می‌کند.

مزایا:

• اضافه کردن ویژگی‌های شبیه برنامه و همچنین امکان ارائه محتوا حتی در حالت آفلاین، می‌تواند بازدید از سایت، تعامل و سایر KPI ها را افزایش دهد.
• عملکرد برتر، از طریق کاهش زمان بارگذاری روی دستگاه، می‌تواند اعتبار سئوی وب‌سایت را نیز بهبود بخشد.
• راه‌اندازی و پیکربندی آسان با تنظیمات کاربرپسند.

معایب:

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

قیمت‌گذاری:

SuperPWA براساس یک مدل فریمیوم عمل می‌کند، به این معنی که مجموعه اصلی ویژگی‌ها به صورت رایگان در دسترس است و امکانات اضافی از طریق ارتقاء در دسترس هستند. اولین مجموعه از ارتقا های SuperPWA با قیمت ۹۹ دلار شروع می‌شود.

2. PWA for WP & AMP

تصویر(4)

افزونه PWA for WP & AMP با ارائه یک رابط کاربری شبیه به برنامه، سازگاری کامل با AMP PWA، پشتیبانی از multisite (چند سایته)، ردیابی UTM و امکان کار کردن آفلاین، تجربه کاربری را ارتقا می‌دهد. همچنین از توسعه service worker، بنرهای برنامه، مانیفست برنامه وب و یک صفحه نمایشگر اسپلش سفارشی، پشتیبانی می کند.

مزایا:

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

معایب:

• راه‌اندازی آن به دلیل یکپارچه‌سازی با AMP کمی پیچیده‌تر است.

3. PWA

تصویر(5)

پلاگین PWA بر عناصر ضروری وب اپلیکیشن پیش رونده مانند service workers، web app manifest و پشتیبانی از HTTPS تمرکز دارد. PWA روی زمان بارگذاری سریعتر و ارائه یک تجربه شبیه اپلیکیشن در تلفن همراه متمرکز است.

مزایا

• از آنجایی که هدف افزونه PWA این است که در نهایت بخشی از هسته وردپرس شود، می توانید انتظار کدگذاری و سازگاری با کیفیت بالا را داشته باشید.
• این افزونه راهی ساده برای استفاده از ویژگی های وب اپلیکیشن پیش رونده ارائه می دهد و باعث افزایش قابلیت اطمینان، سرعت و تعامل وب سایت شما می شود.

معایب

• ویژگی های پیشرفته توسط این افزونه پوشش داده نمی شوند و برای دستیابی به آنها نیاز به افزونه های اضافی یا توسعه سفارشی است.

4. Instantify

تصویر(6)

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

مزایا

• ترکیب PWA، AMP و FBIA به این معنی است که شما مجبور نیستید نگران استفاده از افزونه های مختلف باشید.
• صفحات AMP در جستجو اولویت دارند، بنابراین این موضوع می تواند به طور بالقوه عملکرد وب سایت شما را در موتورهای جستجو بهبود بخشد.
• با Push Notification و موارد دیگر، کاربران را درگیر کنید و از طریق تبلیغات بهینه ‌سازی‌شده و مقالات فوری فیسبوک، محتوای خود را به طور مؤثرتر در معرض دیده شدن قرار دهید.

معایب

• این افزونه فاقد نسخه آزمایشی رایگان یا پلن رایگان می باشد که ممکن است کاربرانی را که می خواهند قبل از پرداخت هزینه، افزونه را تست کنند، ناامید کند.
• ویژگی‌های گسترده‌ای که ارائه می‌شود، در صورت عدم راه‌اندازی مناسب، ممکن است باعث شود این افزونه با برخی قالب‌ های وب‌سایت سازگاری خوبی نداشته باشد.

قیمت‌گذاری

Instantify هزینه ای معادل 29 دلار دارد که صرفا یکبار پرداخت کرده و مجوز مادام العمر دربافت می نمایید. این مورد شامل شش ماه پشتیبانی می شود که می تواند با پرداخت 21 دلار دیگر تمدید گردد. Instantify با نسخه آزمایشی رایگان و ضمانت بازگشت وجه ارائه نمی شود، بنابراین قبل از خرید، بهتر است نیازهای فعلی و الزامات خود را به دقت در نظر بگیرید.

ساخت وب اپلیکیشن پیش رونده با پلاگین وردپرس: راهنمای گام به گام

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

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

مرحله ۱: برنامه‌ریزی برای PWA 

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

مرحله ۲: انتخاب پلاگین مناسب

همانطور که گفته شد، چندین پلاگین برای تبدیل سایت وردپرسی به وب اپلیکیشن پیش رونده در دسترس هستند. هر کدام از این پلاگین‌ها را با توجه به نیازهای خاص خود ارزیابی کنید. اگر به دنبال راه‌حلی ساده و آسان هستید، Super Progressive Web Apps راه‌اندازی آسانی را ارائه می‌دهد. برای کسانی که به ادغام با چندین ابزار نیاز دارند، Instantify ممکن است گزینه بهتری باشد.

در ادامه مراحل راه اندازی افزونه Super Progressive Web Apps توضیح داده می شود.

مرحله ۳: نصب پلاگین انتخابی‌

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

تصویر(7)

مرحله 4: تنظیمات را پیکربندی کنید

پس از فعالسازی، تنظیمات افزونه را در منوی تنظیمات داشبورد وردپرس خود خواهید یافت.

تصویر(8)

در این صفحه می‌توانید فیلدهای مختلف PWA را پیکربندی کنید، مانند:

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

پس از انجام تغییرات، روی «ذخیره تنظیمات» کلیک کنید.

مرحله ۵: تست وب اپلیکیشن پیش رونده جدید خود

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

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

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

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

گام ۱: اطمینان از HTTPS

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

گام ۲: ایجاد یک web app manifest

web app manifest یک فایل JSON است که نحوه نمایش وب اپلیکیشن پیش رونده شما به کاربران و نحوه راه‌اندازی آن را کنترل می‌کند. این فایل شامل نام برنامه، آیکن ها و URL شروع، در میان سایر تنظیمات است.

برای شروع، یک فایل JSON به نام manifest.json ایجاد کنید. این فایل باید حاوی اطلاعات کلیدی در مورد برنامه شما مانند نام آن (name)، نام کوتاه (short_name)، URL شروع (start_url)، نوع نمایش (display)، رنگ پس زمینه (background_color)، رنگ تم (theme_color) و آیکن‌ها (icons) باشد.

{
"name": "Your App Name",
"short_name": "AppShortName",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#000000",
"icons": [
{
"src": "path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}

در بخش هد (<head>) قالب وب سایت وردپرسی خود، یک لینک به فایل manifest.json اضافه کنید. سپس، از ابزارهایی مانند Lighthouse گوگل برای تست و نحوه پیاده‌سازی وب اپلیکیشن منیفست استفاده نمایید.

۳. پیاده سازی یک سرویس ورکر

service workers به عنوان واسطه‌ای بین وب اپلیکیشن شما و دنیای بیرون عمل می‌کنند. آنها برای عملکرد آفلاین، پوش نوتیفیکیشن ها و کش کردن منابع ضروری هستند.

برای ایجاد یک سرویس ورکر، باید یک فایل جاوا اسکریپت جدید بسازید. آن را service-worker.js نام‌گذاری کرده و در مسیر اصلی (روت) قالب وردپرس خود قرار دهید. این فایل حاوی اطلاعاتی برای کش کردن منابع، رهگیری درخواست‌های شبکه و مدیریت قابلیت‌های آفلاین خواهد بود. برای فعال کردن سرویس ورکر (Service Worker) در وب اپلیکیشن خود، باید آن را در کد جاوا اسکریپت وب اپلیکیشن تان ثبت کنید. این کار معمولاً در یک فایل اصلی جاوا اسکریپت که در صفحه وب شما اجرا می‌شود، انجام می‌گردد.

تصویر(9)

در اینجا مثالی از نحوه ثبت یک سرویس ورکر از Borstch آورده شده است:

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}

در فایل service-worker.js خود، منطقی برای کش کردن داده های استاتیک، رهگیری درخواست‌های fetch و ارائه محتوا از حافظه در حالت آفلاین پیاده‌سازی کنید. در ادامه یک مثال اساسی برای کش کردن برخی دارایی‌ها آورده شده است:

const CACHE_NAME = 'your-app-cache';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});

برای اطمینان از اینکه سرویس ورکر شما طبق انتظار عمل می‌کند، تست الزامی است. از پنل Application در ابزار توسعه‌ کروم (Chrome DevTools) برای بررسی سرویس ورکرهای ثبت شده، اطلاعات کش شده و موارد دیگر استفاده کنید.

بهینه‌سازی یک وب اپلیکیشن پیش رونده وردپرسی

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

استراتژی‌های کش

به گفته Smashing Magazine، کش کردن عنصری کلیدی در بهینه‌سازی PWA است. این کار به برنامه‌ شما اجازه می‌دهد تا با ایجاد یک کپی از منابع، سریع‌تر بارگذاری شود. پیاده‌سازی یک استراتژی اولویت-به-کش (cache-first) تضمین می‌کند که برنامه شما قبل از تلاش برای دسترسی به شبکه، منابع را از کش دریافت نماید. این رویکرد به ویژه برای فایل های استاتیکی که اغلب تغییر نمی‌کنند، مؤثر است.

از سرویس ورکرها برای کش کردن داده های مهم در طول نصب استفاده کنید. این مورد شامل پوسته برنامه‌ (HTML، CSS، جاوا اسکریپت) و منابع استاتیک می‌شود. برای محتوای پویا، استراتژی‌هایی مانند stale-while-revalidate را در نظر بگیرید که ابتدا محتوای کش شده را ارائه می‌کند و سپس کش را با محتوای جدید از سرور بروز می‌ نماید.

اولویت‌بندی منابع

همه منابع یکسان نیستند. برخی برای رندر اولیه حیاتی هستند، در حالی که برخی دیگر می‌توانند از طریق بارگذاری تنبل (lazy loading) ارائه شوند. عملکرد بارگذاری برنامه خود را برای شناسایی منابع ضروری و منابعی که باید ابتدا بارگذاری شوند، تجزیه و تحلیل کنید. می‌توانید از دستورات preload و prefetch برای اطلاع دادن به مرورگر در مورد این اولویت‌ها استفاده نمایید:

• Preload: این گزینه برای منابعی که در صفحه جاری مورد نیاز هستند، استفاده می‌شود. با بهره گیری از Preload یا پیش بارگذاری، به مرورگر دستور می‌دهید تا این منابع را در مراحل اولیه‌ بارگذاری صفحه، دریافت کند.
• Prefetch: برای منابعی می باشد که ممکن است در پیمایش‌های بعدی مورد نیاز باشند. به مرورگر پیشنهاد می‌کند زمانی که بیکار است، این منابع را دریافت نماید.

بارگذاری تطبیقی

بارگذاری تطبیقی محتوای برنامه شما و ویژگی‌ها را بر اساس قابلیت‌های دستگاه و شرایط شبکه کاربر تنظیم می‌کند. این تکنیک اطمینان می‌دهد که وب اپلیکیشن پیش رونده شما حتی در شبکه‌های کند یا ناپایدار، تجربه‌ خوبی را ارائه خواهد کرد.

تشخیص ویژگی (feature detection) را برای ارائه داده های مختلف بر اساس دستگاه کاربر اجرا کنید. به عنوان مثال، ممکن است تصاویر با رزولوشن بالا را برای کاربران با اتصال سریع و تصاویر کوچک‌تر و فشرده‌شده را برای کاربران با اتصال کندتر ارائه دهید. می‌توانید از API اطلاعات شبکه برای تشخیص سرعت اتصال کاربر و تنظیم رفتار برنامه خود بر اساس آن استفاده نمایید. برای مثال، ممکن است انتخاب کنید که فقط محتوای ضروری را در یک اتصال کند بارگذاری کرده و منابع اضافی را تا زمانی که اتصال بهبود می‌یابد، به تعویق بیندازید.

رعایت استانداردهای گوگل

تبدیل سایت وردپرسی شما به PWA یک حرکت هوشمندانه برای بهبود تجربه کاربری موبایل است اما برای اینکه این کار مؤثر باشد، باید به استانداردهای PWA گوگل پایبند باشید.

استانداردهای وب اپلیکیشن پیش رونده گوگل بر امنیت، تجربه کاربری و دسترسی‌پذیری تاکید دارند:

• سایت‌ها باید از HTTPS استفاده کنند و در دستگاه‌های موبایل واکنش‌گرا باشند.
• امکان دسترسی آفلاین به URL های برنامه امکان پذیر باشد و شامل metadata برای افزودن به صفحه اصلی (Add to Homescreen) شود.
• آنها باید به سرعت بارگذاری شوند، در مرورگرهای مختلف کار کنند و لود سریع صفحه‌ را بدون وابستگی به شبکه تضمین نمایند.
• تمام صفحات باید URL های منحصربه‌فرد خود را حفظ کنند.

تصویر(10)

سخن پایانی

وب اپلیکیشن های پیش رونده (Progressive Web Apps) گام مهمی در جهت بهبود تعامل و دسترسی کاربران در وب به شمار می‌روند. PWA ها با ترکیب قابلیت‌های وب‌سایت‌های سنتی با ویژگی‌های پیشرفته اپلیکیشن‌های موبایل، یک تجربه یکپارچه و شبیه به اپلیکیشن را بدون نیاز به دانلود از فروشگاه‌های اپلیکیشن ارائه می‌دهند.

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