آیا وب اپلیکیشن PWA جای اپلیکیشن موبایل را می گیرد؟

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

باور اول: «PWA یعنی همون اپلیکیشن، فقط ارزان تر»

نه. PWA نسخه ارزون اپ نیتیو نیست. یه وب سایته با سه جزء اضافه:

• فایل Web App Manifest که به مرورگر می گه اسم، آیکون و حالت نمایش چیه
• سرویس ورکر که درخواست های شبکه رو کنترل می کنه
• HTTPS که بدونش سرویس ورکر اصلاً ثبت نمی شه

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

حداقل manifest یه همچین چیزیه:

{
  "name": "فروشگاه نمونه",
  "short_name": "فروشگاه",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0a7a5a",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

دلیل display: standalone اینه که نوار آدرس مرورگر حذف می شه و کاربر حس اپ می گیره. start_url رو هم با پارامتر source نوشتیم تا بعداً تو آمار بتونی ورودی های اپ نصب شده رو جدا کنی.

بعدش تو بخش head صفحه ها این خط رو بذار:

<link rel="manifest" href="/manifest.webmanifest">

اشتباه رایج اینه که manifest رو می سازن ولی سرور با نوع محتوای اشتباه تحویلش می ده یا مسیرش 404 برمی گردونه. تو DevTools مرورگر، بخش Application رو باز کن و ببین manifest خطا داره یا نه.

باور دوم: «وب اپلیکیشن PWA همه جا آفلاین کار می کنه»

نصفش درسته. آفلاین کار کردن خودکار نیست، باید خودت بنویسیش.

سرویس ورکر فقط همون چیزی رو کش می کنه که بهش بگی. یه نمونه ساده با استراتژی «اول شبکه، بعد کش» اینه:

const CACHE = 'shell-v1';
const SHELL = ['/', '/offline.html', '/app.css', '/app.js'];

self.addEventListener('install', e => {
  e.waitUntil(caches.open(CACHE).then(c => c.addAll(SHELL)));
});

self.addEventListener('fetch', e => {
  if (e.request.method !== 'GET') return;
  e.respondWith(
    fetch(e.request).catch(() =>
      caches.match(e.request).then(r => r || caches.match('/offline.html'))
    )
  );
});

و ثبتش تو صفحه:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

چرا «اول شبکه»؟ چون تو فروشگاه قیمت کهنه از صفحه خالی بدتره. کاربر قیمت دیروز رو می بینه، می خره و بعد با قیمت امروز روبه رو می شه. برای محتوای ثابت مثل مقاله یا راهنما، «اول کش» هم سریع تره و هم بهتر جواب می ده.

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

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

باور سوم: «نصب و اعلان روی همه گوشی ها مثل هم کار می کنه»

اینجا بیشترین سوءتفاهم هست.

نصب

روی اندروید با کروم، مرورگر می تونه پیشنهاد نصب بده و تو با رویداد beforeinstallprompt دکمه «نصب اپ» خودت رو هم می سازی. سافاری روی iOS این رویداد رو نداره. کاربر باید از منوی اشتراک گذاری گزینه «Add to Home Screen» رو بزنه. پس اگه کاربرات زیاد iPhone دارن، تو خود صفحه یه راهنمای کوتاه با تصویر بذار. بدون راهنما، خیلی ها نمی فهمن می شه نصبش کرد.

اعلان

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

یه نکته دیگه: اعلان وب تو بعضی مرورگرها از سرویس پوش خود مرورگر رد می شه و تو کروم این سرویس به زیرساخت گوگل وصله. تو بعضی شبکه های ایران ممکنه رسیدن به این سرویس ها ناپایدار باشه. نتیجه اش می تونه اعلان دیر رسیده یا گم شده باشه. اگه اپت به اعلان لحظه ای وابسته است (مثلاً هشدار تحویل سفارش با زمان دقیق)، این رو جدی بگیر و پیامک رو هم کنارش داشته باش.

باور چهارم: «PWA به سخت افزار گوشی دسترسی نداره»

بستگی داره کدوم سخت افزار رو بخوای.

چیزایی که وب خوب انجام می ده: دوربین از طریق <input type="file" capture> یا getUserMedia، موقعیت مکانی با Geolocation، اشتراک گذاری فایل و اسکن QR با دوربین. برای بسیاری از کسب و کارها همین کافیه.

چیزایی که محدوده یا سخت: بلوتوث (تو سافاری و iOS عملاً پشتیبانی نمی شه)، NFC، همگام سازی مطمئن تو پس زمینه، ویجت صفحه اصلی، دسترسی عمیق به مخاطبین و پیامک و پردازش سنگین گرافیکی مثل بازی.

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

آزمون ساده

یه لیست از قابلیت های اپت بنویس. کنار هر کدوم تو MDN یا Can I use چک کن مرورگرهای هدفت پشتیبانی می کنن یا نه. اگه یه قابلیت اصلی پشتیبانی نشد، تصمیمت همون جا روشنه.

باور پنجم: «PWA خودش سریعه، پس لازم نیست بهینه کنم»

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

• تصویرها رو فشرده و با فرمت مدرن بده. بهینه سازی تصاویر سایت؛ فرمت، اندازه و بارگذاری تنبل مرحله به مرحله می گه چطور.
• اگه عنصر بزرگ صفحه دیر نمایش داده می شه، برو سراغ بهبود LCP سایت؛ چرا بزرگ ترین عنصر صفحه دیر نمایش داده می شود؟.
• اگه کاربرات تو ایران هستن، سرور رو هم تو ایران بذار تا تاخیر کمتر باشه.

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

کجا وب اپلیکیشن PWA جواب می ده و کجا نه

این جدول رو بر اساس نیاز بخون، نه بر اساس مد روز:

اگه واقعاً باید اپ داخل فروشگاه باشه ولی نمی خوای دو بار کد بنویسی، می شه PWA رو با Trusted Web Activity برای اندروید بسته بندی کرد. شرایط هر فروشگاه تغییر می کنه، پس قبل از شروع قوانین فعلی اش رو بخون.

چطور تصمیم بگیری: چهار قدم

به ترتیب جلو برو. هر جا به یه شرط ردکننده رسیدی، همون جا بایست.

1. کار اصلی اپ رو یه جمله بنویس. اگه جوابت «نمایش محصول و ثبت سفارش» یا «رزرو و پیگیری» بود، ادامه بده.
2. قابلیت های سخت افزاری رو بشمار. اگه بلوتوث، NFC یا اجرای پس زمینه لازمه، سراغ نیتیو برو.
3. کاربرات رو بشناس. آمار خود سایتت رو نگاه کن: اکثریت اندروید هستن یا iOS؟ اگه iOS زیاده، نصب و اعلان رو روی گوشی واقعی تست کن.
4. اول PWA بساز، بعد تصمیم بگیر. هزینه اش پایینه و بازخورد کاربر واقعی بهت می گه نیتیو لازمه یا نه.

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

یه تذکر درباره استقرار

PWA به HTTPS معتبر و سرور پایدار نیاز داره. اگه پروژه داکری باشه، ممکنه روی سرور ایران بعضی ایمیج ها از Docker Hub به خاطر محدودیت IP دریافت نشن. ما ایمیج ها رو روی سیستم توسعه می سازیم و با SSH به سرور منتقل می کنیم. برای راه اندازی تمیز، نصب داکر روی اوبونتو؛ چک لیست اولیه قبل از اجرای سرویس ها رو هم ببین.

سوالات متداول

برای PWA حتماً دامنه و SSL لازمه؟

آره. سرویس ورکر فقط روی HTTPS ثبت می شه (به جز localhost برای توسعه)، پس دامنه و گواهی معتبر لازمه. برای دامنه ir شناسه ایرنیک هم لازمه که تو شناسه نیک ایرنیک چیست و چرا برای دامنه ir لازم است؟ توضیح دادیم.

PWA به سئو آسیب می زنه؟

معمولاً نه. PWA همون سایت معمولیه و موتور جستجو صفحه هاش رو مثل بقیه می خونه. فقط مطمئن شو محتوای اصلی تو HTML اولیه هست و کاملاً به جاوااسکریپت سمت کلاینت وابسته نیست.

بعداً می تونم PWA رو به اپ نیتیو تبدیل کنم؟

می شه، ولی لایه نمایش رو معمولاً باید از نو بنویسی. اگه API تمیز باشه، بک اند و منطق کسب و کار دست نمی خوره. برای همین از اول API رو جدا و مستند بنویس.

PWA با درگاه پرداخت شاپرکی سازگاره؟

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

کاربر باید PWA رو نصب کنه تا کار کنه؟

نه. بدون نصب هم مثل یه سایت عادی باز می شه. نصب فقط آیکون، حالت تمام صفحه و بعضی قابلیت ها (مثل اعلان تو iOS) رو اضافه می کنه.

قبل از شروع این سه چیز رو چک کن

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