PWA چیست؟ PWA یا «وب اپلیکیشن پیش‌رونده» (Progressive Web App) سایتی است که مثل اپلیکیشن رفتار می‌کند: بدون اپ‌استور و گوگل‌پلی روی گوشی نصب می‌شود، آیکونش روی صفحهٔ اصلی می‌نشیند، در پنجره‌ای مستقل و بدون نوار آدرس باز می‌شود و اگر درست طراحی شده باشد، بخشی از آن با اینترنت ضعیف یا قطع هم کار می‌کند. «نسخهٔ PWA» که بعضی بانک‌ها و سرویس‌های ایرانی به کاربران آیفون پیشنهاد می‌کنند، از همین جنس است.
اگر بین ساخت اپلیکیشن نیتیو، راه‌اندازی PWA یا اکتفا به یک سایت ریسپانسیو مردد هستید، در این مقاله اجزای فنی PWA، توانایی‌ها و محدودیت‌های واقعی آن، مقایسهٔ این سه راه و نشانه‌های انتخاب درست را مرور می‌کنیم.
PWA چیست و چه فرقی با یک سایت معمولی دارد؟
PWA مخفف Progressive Web App است و واژهٔ «پیش‌رونده» کلید فهم آن است: پایهٔ کار یک سایت معمولی است که در هر مرورگری باز می‌شود و هر جا مرورگر و دستگاه امکانات بیشتری داشته باشند، قابلیت‌های اپ‌گونه مثل نصب، کار آفلاین و نوتیفیکیشن به آن اضافه می‌شود. پس PWA زبان برنامه‌نویسی یا فریم‌ورک خاصی نیست؛ مجموعه‌ای از فناوری‌های استاندارد وب است که روی یک سایت پیاده می‌شود.
مهم‌ترین تفاوت‌های PWA با سایت معمولی:
- نصب‌شدنی است: کاربر آن را از داخل مرورگر به صفحهٔ اصلی گوشی یا کامپیوتر اضافه می‌کند.
- در پنجرهٔ مستقل اجرا می‌شود: بعد از نصب، نوار آدرس و دکمه‌های مرورگر دیده نمی‌شوند و تجربه شبیه اپلیکیشن است.
- با اینترنت ضعیف کنار می‌آید: فایل‌های لازم روی دستگاه ذخیره می‌شوند و بازدیدهای بعدی سریع‌تر بالا می‌آیند.
- می‌تواند نوتیفیکیشن بفرستد: با اجازهٔ کاربر و با محدودیت‌هایی که جلوتر می‌گوییم.
در عین حال، PWA هنوز یک سایت است: آدرس اینترنتی دارد، گوگل می‌تواند صفحه‌هایش را ایندکس کند و هر تغییر روی سرور به همهٔ کاربران می‌رسد. پس اگر سایت فعلی شما در موبایل کند یا به‌هم‌ریخته است، PWA کردن آن مشکل را حل نمی‌کند؛ اول باید همان پایه را درست کرد.
سه جزء فنی PWA به زبان ساده
سه جزء یک سایت را به PWA تبدیل می‌کنند. دانستن نقش هرکدام کمک می‌کند با تیم فنی دقیق‌تر صحبت کنید.
۱. HTTPS؛ شرط ورود
PWA فقط روی اتصال امن کار می‌کند؛ چون Service Worker می‌تواند درخواست‌های بین سایت و کاربر را مدیریت کند و مرورگرها چنین اختیاری را فقط به سایتی می‌دهند که ارتباطش رمزگذاری شده باشد. امروز تقریباً هر سایت جدی به گواهی SSL نیاز دارد و گواهی‌های رایگان معتبر هم در دسترس‌اند.
۲. مانیفست وب اپلیکیشن (Web App Manifest)
مانیفست یک فایل کوچک متنی با قالب JSON است که به مرورگر معرفی می‌کند این اپ چیست: نام کامل و نام کوتاه، آیکون‌ها در اندازه‌های مختلف، رنگ اصلی و رنگ پس‌زمینه، صفحه‌ای که با باز شدن اپ نمایش داده می‌شود و حالت نمایش (مثلاً پنجرهٔ مستقل بدون نوار آدرس). مرورگر از همین اطلاعات برای نصب، ساختن آیکون و صفحهٔ آغازین استفاده می‌کند.
۳. Service Worker؛ موتور پشت صحنه
Service Worker یک فایل جاوااسکریپت است که مرورگر آن را جدا از خود صفحه اجرا می‌کند. آن را واسطه‌ای بین سایت و اینترنت تصور کنید که برای هر درخواست تصمیم می‌گیرد پاسخ را از شبکه بگیرد یا از حافظهٔ ذخیره‌شده (کش) روی دستگاه. کار آفلاین، بارگذاری سریع در بازدیدهای بعدی و دریافت نوتیفیکیشن، همه از همین جزء می‌آیند.
بخش مهندسی اصلی PWA همین‌جاست. اگر راهبرد کش درست طراحی نشود، کاربر ممکن است قیمت قدیمی، موجودی اشتباه یا نسخهٔ منسوخ صفحه را ببیند. پس باید از قبل روشن باشد چه چیزی کش می‌شود، چه چیزی همیشه تازه از سرور گرفته می‌شود و نسخهٔ جدید چطور به دست کاربر می‌رسد.
اپلیکیشن PWA چه کارهایی می‌تواند بکند و چه کارهایی نه؟
بیشترین ناامیدی از PWA وقتی پیش می‌آید که از آن همهٔ توانایی‌های اپ نیتیو را انتظار داشته باشید.
کارهایی که PWA به‌خوبی انجام می‌دهد
- کار آفلاین یا با اینترنت ضعیف: نمایش صفحه‌هایی که قبلاً باز شده‌اند، یک صفحهٔ آفلاین آبرومند به‌جای خطای مرورگر، و در بعضی مرورگرها نگه داشتن فرم و ارسال آن پس از وصل شدن اینترنت.
- نوتیفیکیشن (Web Push) برای یادآوری نوبت، وضعیت سفارش یا پیام پشتیبانی؛ فقط وقتی کاربر اجازه بدهد.
- دسترسی به بخشی از امکانات دستگاه: دوربین، میکروفون، موقعیت مکانی و اشتراک‌گذاری با اپ‌های دیگر، همه با اجازهٔ کاربر و بسته به مرورگر.
محدودیت‌هایی که باید بدانید
- دسترسی عمیق به سیستم‌عامل ندارد: مثل خواندن پیامک، دسترسی کامل به مخاطبین یا اجرای طولانی و مداوم در پس‌زمینه.
- پشتیبانی مرورگرها یکسان نیست: بعضی امکانات، مثل اتصال به دستگاه‌های بلوتوثی یا NFC، فقط در بعضی مرورگرها و بیشتر در کروم اندروید وجود دارند.
- کارهای خیلی سنگین مثل بازی‌های گرافیکی پیشرفته یا ویرایش حرفه‌ای ویدئو، در اپ نیتیو روان‌تر اجرا می‌شوند.
- حافظهٔ ذخیره‌شده دائمی نیست: مرورگر ممکن است در کمبود فضا یا پس از مدتی بی‌استفاده ماندن، دادهٔ ذخیره‌شده را پاک کند؛ پس اطلاعات مهم کاربر باید روی سرور بماند.
- در فروشگاه‌های اپ دیده نمی‌شود: کاربری که فقط در فروشگاه اپ جستجو می‌کند، به‌طور پیش‌فرض PWA شما را پیدا نمی‌کند.
اندروید و آیفون یکسان نیستند
در اندروید، کروم و مرورگرهای مبتنی بر آن بیشترین پشتیبانی را دارند و می‌توانند خودشان پیشنهاد نصب را به کاربر نشان دهند. در آیفون وضع محدودتر است: نصب به‌صورت دستی و از منوی اشتراک‌گذاری (Share) و گزینهٔ «Add to Home Screen» انجام می‌شود، و نوتیفیکیشن وب فقط برای وب‌اپ‌هایی کار می‌کند که روی صفحهٔ اصلی نصب شده‌اند؛ آن هم در نسخه‌های جدیدتر iOS و پس از اجازهٔ کاربر. اگر بسیاری از مشتریان شما آیفون دارند، یک راهنمای کوتاه نصب داخل سایت بگذارید.
نکتهٔ دیگر: نوتیفیکیشن وب از زیرساخت سرویس‌های پوش سازندگان مرورگر عبور می‌کند. پیش از سپردن ارتباط حیاتی با مشتری به آن، ارسال را روی گوشی و اینترنت کاربران واقعی خودتان آزمایش کنید.
اپلیکیشن یا سایت؟ مقایسهٔ PWA با اپ نیتیو و سایت ریسپانسیو
اپلیکیشن نیتیو برای هر سیستم‌عامل جداگانه ساخته می‌شود (یا با فریم‌ورک‌های چندسکویی مثل Flutter و React Native برای هر دو) و از فروشگاه اپ نصب می‌شود. سایت ریسپانسیو خودش را با اندازهٔ صفحه تطبیق می‌دهد، اما نصب و کار آفلاین ندارد. PWA بین این دو می‌نشیند:
| معیار | سایت ریسپانسیو | PWA | اپلیکیشن نیتیو |
|---|---|---|---|
| هزینهٔ ساخت | کمترین | بیشتر از سایت ریسپانسیو، معمولاً کمتر از اپ نیتیو | بیشترین، به‌خصوص برای دو پلتفرم |
| زمان راه‌اندازی | کوتاه | کوتاه تا متوسط | طولانی‌تر (ساخت، تست و انتشار در فروشگاه) |
| نیاز به فروشگاه اپ | ندارد | ندارد | دارد، یا راه جایگزین نصب |
| به‌روزرسانی | فوری، روی سرور | فوری، روی سرور | نسخهٔ جدید، بررسی فروشگاه و آپدیت توسط کاربر |
| کار آفلاین | ندارد | بخشی، بسته به طراحی | کامل‌ترین |
| نوتیفیکیشن | ندارد | دارد؛ در آیفون با محدودیت | کامل |
| دسترسی به امکانات دستگاه | محدود | متوسط و وابسته به مرورگر | کامل |
| دیده شدن در گوگل | کامل | کامل، اگر درست ساخته شود | محتوای داخل اپ معمولاً در نتایج گوگل نیست |
| نصب و آیکون روی صفحه | ندارد | دارد | دارد |
| حجم روی گوشی | صفر | معمولاً کم | معمولاً بیشتر |
خلاصهٔ جدول: برای جذب مشتری تازه از گوگل، سایت ضروری است و اپ نیتیو جایگزینش نمی‌شود. برای نگه داشتن مشتری فعلی و استفادهٔ مکرر او، PWA یا اپ مطرح می‌شود. و اگر محصولتان به امکانات عمیق دستگاه نیاز دارد، اپ نیتیو منطقی‌تر است.
چرا PWA برای کسب‌وکارهای ایرانی جذاب‌تر است؟
PWA همه‌جای دنیا کاربرد دارد، اما شرایط ایران چند مزیت آن را پررنگ‌تر می‌کند:
- وابستگی نداشتن به حساب فروشگاه‌های جهانی: انتشار اپ در اپ‌استور و گوگل‌پلی به حساب توسعه‌دهنده نیاز دارد و ساختن و نگه داشتن این حساب‌ها برای توسعه‌دهندگان و کسب‌وکارهای ایرانی با محدودیت‌های جدی همراه است. PWA مستقیم از دامنهٔ خود شما نصب می‌شود.
- دسترسی ساده‌تر به کاربران آیفون: انتشار اپ ایرانی در اپ‌استور ساده نیست و روش‌های جایگزین نصب روی آیفون همیشه پایدار نمی‌مانند. این یکی از دلایلی است که بسیاری از سرویس‌های ایرانی برای آیفون «نسخهٔ PWA» یا «وب اپلیکیشن» ارائه می‌کنند.
- به‌روزرسانی بدون صف بررسی: اصلاح یک باگ یا تغییر قیمت را روی سرور منتشر می‌کنید و کاربر در بازدید بعدی نسخهٔ تازه را می‌گیرد.
- دانلود سبک‌تر: برای کاربری که اینترنت کند، بستهٔ اینترنت محدود یا حافظهٔ پر روی گوشی دارد، نصب PWA راحت‌تر است.
- تحمل اینترنت ناپایدار: با کش درست، بخش‌هایی از سرویس در قطع و وصل شدن اینترنت هم در دسترس می‌ماند.
- یک کد برای همه: اندروید، آیفون و کامپیوتر با یک پروژه پوشش داده می‌شوند.
صادقانه باید گفت PWA هم به سیاست‌های مرورگرها و سیستم‌عامل‌ها وابسته است و این سیاست‌ها ممکن است تغییر کنند. برای اندروید هم فروشگاه‌های داخلی مثل کافه‌بازار و مایکت همچنان مسیر رایجی برای انتشار اپ نیتیو هستند. PWA راه ساده‌تری است، نه راهی بی‌ریسک.
چه کسب‌وکارهایی بیشترین سود را از PWA می‌برند؟
PWA وقتی ارزش واقعی پیدا می‌کند که کاربر به‌طور مکرر به سرویس شما برگردد. چند نمونهٔ رایج:
- فروشگاه اینترنتی با خرید تکراری، مثل سوپرمارکت آنلاین یا لوازم مصرفی. اگر هنوز در مرحلهٔ راه‌اندازی هستید، مراحل راه‌اندازی فروشگاه اینترنتی را هم ببینید.
- نوبت‌دهی و رزرو در کلینیک، سالن زیبایی، باشگاه یا رستوران که یادآوری نوبت برایشان مفید است.
- پنل مشتری، نماینده و سامانه‌های داخلی مثل پیگیری سفارش، فروش میدانی یا انبار که نیازی به انتشار عمومی ندارند.
- آزمودن ایدهٔ یک اپ: پیش از سرمایه‌گذاری روی اپ نیتیو، با PWA بسنجید کاربران واقعاً از آن استفاده می‌کنند یا نه.
چه زمانی اپلیکیشن نیتیو هنوز انتخاب درست است؟
PWA همه‌جا جای اپ نیتیو را نمی‌گیرد. اگر یکی از این شرایط را دارید، اپ نیتیو یا دست‌کم ترکیب PWA و اپ را جدی بررسی کنید:
- محصول شما به سخت‌افزار گوشی وابسته است: اتصال به دستگاه‌های بلوتوثی، ردیابی مداوم موقعیت در پس‌زمینه یا کار با فایل‌های حجیم.
- نوتیفیکیشن مطمئن در آیفون حیاتی است و نمی‌توانید به نصب دستی PWA توسط کاربر تکیه کنید.
- تجربهٔ گرافیکی سنگین دارید: بازی، واقعیت افزوده یا ویرایش حرفه‌ای عکس و ویدئو.
- حضور در فروشگاه بخشی از بازاریابی شماست: مخاطبتان اپ را در کافه‌بازار، مایکت یا فروشگاه‌های دیگر جستجو می‌کند.
راه میانه هم وجود دارد: بک‌اند و API را طوری بسازید که هم PWA و هم اپ نیتیو از آن استفاده کنند؛ با PWA شروع کنید و وقتی تقاضا ثابت شد، اپ نیتیو را اضافه کنید. مراحل این مسیر را در مقالهٔ مراحل توسعهٔ اپلیکیشن از ایده تا انتشار توضیح داده‌ایم.
چطور بفهمیم سایتی PWA است و چطور نصبش کنیم؟
ساده‌ترین نشانه این است که مرورگر پیشنهاد نصب می‌دهد و سایت بعد از نصب بدون نوار آدرس باز می‌شود. نام گزینه‌ها ممکن است در نسخه‌های مختلف مرورگرها کمی فرق کند.
نصب PWA در اندروید (کروم)
- سایت را در کروم باز کنید.
- اگر پیام نصب ظاهر شد، تأییدش کنید؛ وگرنه منوی سه‌نقطهٔ بالای صفحه را باز کنید.
- گزینهٔ «نصب برنامه» (Install app) یا «افزودن به صفحهٔ اصلی» را انتخاب کنید.
نصب PWA در آیفون (سافاری)
- سایت را در سافاری باز کنید.
- دکمهٔ اشتراک‌گذاری (مربعی با فلش رو به بالا) را بزنید.
- گزینهٔ «Add to Home Screen» را انتخاب و تأیید کنید.
در نسخه‌های جدیدتر iOS، بعضی مرورگرهای دیگر هم این امکان را دارند. روی کامپیوتر هم در کروم و اج، آیکون نصب در نوار آدرس یا گزینهٔ نصب در منوی مرورگر دیده می‌شود.
برای صاحب سایت: بررسی فنی
در کروم دسکتاپ، ابزار توسعه‌دهنده (DevTools) را باز کنید و در بخش Application، قسمت‌های Manifest و Service workers را ببینید؛ خطاهای مانیفست و وضعیت Service Worker همان‌جا نمایش داده می‌شود. برای جزئیات فنی بیشتر، مستندات PWA در MDN منبع معتبری است.
هزینه و مسیر ساخت PWA؛ از سایت فعلی تا اپ کامل
اگر سایت دارید
در بسیاری از موارد لازم نیست از صفر شروع کنید؛ سایت فعلی را می‌توان به PWA تبدیل کرد. مراحل معمول:
- ارزیابی پایه: سرعت، ریسپانسیو بودن و ساختار سایت بررسی می‌شود؛ پیشنهادهای بهینه‌سازی سرعت سایت معمولاً همین‌جا اولویت پیدا می‌کنند.
- مانیفست، آیکون‌ها و Service Worker: همراه با راهبرد کش؛ یعنی چه چیزی آفلاین در دسترس باشد و چه چیزی همیشه تازه از سرور بیاید.
- صفحهٔ آفلاین، راهنمای نصب و در صورت نیاز نوتیفیکیشن، با سناریوی روشن برای اینکه چه پیامی، کی و برای چه کسی فرستاده شود.
- آزمایش روی گوشی‌های واقعی اندروید و آیفون، نه فقط شبیه‌ساز.
برای سایت‌های وردپرسی افزونه‌هایی هست که مانیفست و Service Worker پایه را اضافه می‌کنند. برای یک سایت معرفی ساده معمولاً کافی‌اند، اما در فروشگاه اینترنتی، کش اشتباه سبد خرید یا قیمت می‌تواند مشکل جدی بسازد و تنظیم دقیق لازم است. اینکه وردپرس برای پروژهٔ شما کافی است یا کدنویسی اختصاصی لازم دارید را در مقالهٔ وردپرس یا کدنویسی اختصاصی بررسی کرده‌ایم.
اگر از صفر شروع می‌کنید
بهتر است PWA از روز اول در طراحی دیده شود، نه اینکه بعداً به سایت چسبانده شود. در پروژهٔ طراحی سایت می‌توان ساختار، سرعت و قابلیت نصب را از ابتدا با هم برنامه‌ریزی کرد.
هزینه چقدر است؟
هزینهٔ PWA کردن یک سایت عدد ثابتی ندارد و به وضعیت سایت فعلی، نیاز به کار آفلاین و نوتیفیکیشن و پیچیدگی داده‌ها بستگی دارد؛ پس بعد از بررسی سایت برآورد می‌شود. اگر مسیر اپلیکیشن را هم در نظر دارید: در پلن‌های منتشرشدهٔ ساخت اپلیکیشن موبایل، نسخهٔ MVP از ۱۵ میلیون تومان (یک پلتفرم) و نسخهٔ استاندارد ۳۰ میلیون تومان (iOS و اندروید همراه با پنل وب) است و پروژه‌های سازمانی قیمت توافقی دارند.
سؤالات متداول
نسخهٔ PWA چیست و چرا بعضی سرویس‌ها آن را پیشنهاد می‌کنند؟
نسخهٔ PWA همان وب اپلیکیشن پیش‌رونده است: نسخه‌ای از سرویس که از داخل مرورگر نصب می‌شود و مثل اپ روی صفحهٔ اصلی می‌نشیند. سرویس‌های ایرانی معمولاً آن را برای کاربران آیفون یا کسانی پیشنهاد می‌کنند که اپ حجیم نمی‌خواهند. برای امنیت، نسخهٔ PWA را فقط از آدرس رسمی همان سرویس نصب کنید و پیش از نصب، دامنه را با دقت بررسی کنید.
آیا اپلیکیشن PWA را می‌شود از کافه‌بازار یا گوگل‌پلی دانلود کرد؟
PWA معمولاً مستقیم از خود سایت نصب می‌شود و فایل نصبی جداگانه ندارد. می‌توان PWA را با فناوری‌ای به نام Trusted Web Activity در قالب اپ اندرویدی بسته‌بندی کرد و به فروشگاه فرستاد، اما شرایط پذیرش هر فروشگاه جداست و باید پیش از تصمیم بررسی شود.
آیا نوتیفیکیشن PWA روی آیفون کار می‌کند؟
در نسخه‌های جدیدتر iOS بله، به شرطی که کاربر PWA را از راه «Add to Home Screen» نصب کرده باشد و اجازهٔ دریافت نوتیفیکیشن را بدهد. در آیفون، سایتی که نصب نشده نوتیفیکیشن وب نمی‌فرستد. اگر نوتیفیکیشن ستون اصلی سرویس شماست، این محدودیت را در تصمیم‌گیری لحاظ کنید.
آیا PWA روی سئو اثر دارد؟
PWA بودن به‌خودی‌خود عامل رتبه‌بندی نیست. اما چون PWA همان سایت است، صفحه‌هایش قابل ایندکس‌اند و سرعت بیشتر و تجربهٔ بهتر در موبایل به نفع سئو است. فقط اگر صفحه‌ها کاملاً با جاوااسکریپت در مرورگر ساخته می‌شوند، مطمئن شوید گوگل محتوای اصلی را می‌بیند؛ رندر سمت سرور این ریسک را کم می‌کند.
اگر مطمئن نیستید سایت ریسپانسیو برایتان کافی است، PWA انتخاب بهتری است یا اپلیکیشن نیتیو لازم دارید، نیازها و مخاطبانتان را با ما مرور کنید. در صفحهٔ خدمات ساخت اپلیکیشن موبایل مای طرح مسیرها و پلن‌ها را ببینید و درخواست مشاوره ثبت کنید.