آموزش تبدیل هر وب‌سایتی به اپلیکیشن اندروید (رایگان و بدون کدنویسی)

تا چند سال پیش، اگر می‌خواستید یک سایت را به اپلیکیشن موبایل تبدیل کنید، باید یک تیم برنامه‌نویس استخدام می‌کردید، ماه‌ها کدنویسی می‌کردید و هزینه‌های سنگینی می‌پرداختید. اما امروزه با تکنولوژی PWA (Progressive Web App) و ابزار رایگان PWABuilder، می‌توانید در کمتر از ۱۰ دقیقه و بدون نوشتن یک خط کد، سایت خود را به یک اپلیکیشن اندروید واقعی تبدیل کنید.

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

می‌خواهید نتیجه کار را ببینید؟

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

📱 مشاهده اپلیکیشن ابزارک

PWA چیست و چرا انقلاب بزرگی در دنیای اپلیکیشن‌هاست؟

PWA یا Progressive Web App یک تکنولوژی مدرن است که به وب‌سایت‌ها امکان می‌دهد مثل یک اپلیکیشن واقعی رفتار کنند. یک سایت PWA می‌تواند:

📱 روی گوشی نصب شود (روی صفحه اصلی)
⚡ بدون اینترنت هم کار کند (Offline Mode)
🔔 نوتیفیکیشن Push دریافت کند
🏃 سرعتش از اپ‌های نیتیو کمتر نباشد
🔒 در محیط تمام‌صفحه (Full Screen) اجرا شود

مزایای PWA نسبت به اپ‌های نیتیو

یک کد، همه پلتفرم‌ها: یک بار سایت PWA می‌سازید، روی اندروید، iOS، ویندوز و... کار می‌کند
به‌روزرسانی فوری: نیازی به آپدیت در استورها ندارد، همان لحظه که سایت را تغییر می‌دهید، اپلیکیشن هم به‌روز می‌شود
حجم کمتر: اپ‌های PWA معمولاً ۱ تا ۵ مگابایت هستند، در حالی که اپ‌های نیتیو می‌توانند ۵۰ مگابایت یا بیشتر باشند
هزینه صفر: نیازی به تیم برنامه‌نویسی اندروید و iOS ندارید

پیش‌نیازها: سایت شما باید چه ویژگی‌هایی داشته باشد؟

برای اینکه بتوانید سایتتان را به اپلیکیشن تبدیل کنید، ابتدا باید سایت شما PWA باشد. یعنی این ۴ مورد را داشته باشد:

۱. فایل manifest.json

این یک فایل JSON است که به مرورگر می‌گوید نام اپلیکیشن چیست، آیکون‌هایش کدامند، رنگش چه باشد و... . یک نمونه ساده:

{
  "name": "نام کامل اپلیکیشن",
  "short_name": "نام کوتاه",
  "start_url": "./",
  "display": "standalone",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192" },
    { "src": "icon-512.png", "sizes": "512x512" }
  ]
}

۲. فایل Service Worker (sw.js)

این یک اسکریپت جاوااسکریپت است که به سایت شما امکان کارکرد آفلاین می‌دهد. بدون این فایل، PWABuilder به شما اجازه ساخت اپ نمی‌دهد.

۳. آیکون اپلیکیشن

حداقل به دو آیکون نیاز دارید: یکی ۱۹۲×۱۹۲ پیکسل و دیگری ۵۱۲×۵۱۲ پیکسل، هر دو با فرمت PNG.

۴. HTTPS (SSL)

سایت شما باید با پروتکل HTTPS باز شود. اگر از GitHub Pages یا Cloudflare استفاده می‌کنید، این به صورت خودکار فعال است.

آیا سایت شما PWA هست؟

راه ساده‌ای برای تست: سایت خود را در Chrome باز کنید و در آدرس‌بار دنبال آیکون نصب (Install) بگردید. اگر وجود دارد، سایت شما PWA است.

مرحله ۱: آماده‌سازی سایت

اگر سایت شما PWA نیست، نگران نباشید. کافیست این مراحل را انجام دهید (من همین کارها را روی سایت ابزارک انجام دادم):

الف) فایل manifest.json را بسازید

در ریشه سایت خود، یک فایل به نام `manifest.json` بسازید و محتوای بالا را در آن قرار دهید. آیکون‌ها را هم در ریشه سایت آپلود کنید.

ب) فایل sw.js را بسازید

یک فایل ساده Service Worker بسازید که صفحات اصلی را کش کند:

const CACHE = 'my-site-v1';
const PRECACHE = ['./', './index.html', './css/style.css?v=999'];

self.addEventListener('install', e => {
  e.waitUntil(caches.open(CACHE).then(c => c.addAll(PRECACHE)));
});
self.addEventListener('fetch', e => {
  e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)));
});

ج) لینک‌ها را به HTML اضافه کنید

در قسمت `` تمام صفحات سایتتان، این خطوط را اضافه کنید:

<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#6366f1">

و در قسمت `` این خط را برای فعال‌سازی Service Worker اضافه کنید:

<script>
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("sw.js");
}
</script>

مرحله ۲: تست PWA بودن سایت

قبل از رفتن به PWABuilder، مطمئن شوید سایت شما از نظر PWA سالم است. چند راه وجود دارد:

در Chrome: سایت را باز کنید، در منوی سه‌نقطه گزینه «Install» یا «نصب» را ببینید. اگر وجود دارد، همه چیز آماده است.
در Lighthouse: در Chrome، F12 بزنید → تب Lighthouse → روی «Generate Report» کلیک کنید. باید در بخش PWA نمره بالایی بگیرید.
در PWABuilder: مستقیم آدرس سایت را وارد کنید، اگر نمره بالای ۷۰ گرفتید، آماده است.

مرحله ۳: استفاده از PWABuilder (قلب ماجرا)

حالا نوبت به مرحله اصلی می‌رسد. PWABuilder یک ابزار رایگان از مایکروسافت است که سایت PWA شما را به اپلیکیشن تبدیل می‌کند.

گام ۱: رفتن به سایت

در مرورگر خود آدرس زیر را باز کنید:

https://www.pwabuilder.com/

گام ۲: وارد کردن آدرس سایت

در باکس وسط صفحه، آدرس کامل سایت خود را وارد کنید (با https). سپس روی دکمه Start کلیک کنید.

گام ۳: بررسی نمره

PWABuilder سایت شما را آنالیز می‌کند و یک نمره از ۱۰۰ می‌دهد. هرچه نمره بالاتر، اپلیکیشن نهایی بهتر خواهد بود. معمولاً اگر نمره بالای ۷۰ باشد، می‌توانید ادامه دهید.

گام ۴: انتخاب پلتفرم

روی دکمه Package for Stores کلیک کنید. صفحه‌ای باز می‌شود که سه گزینه دارد:

🪟 Microsoft Store (Windows): برای ویندوز
🤖 Google Play (Android): برای اندروید ← این را انتخاب کنید
🍎 App Store (iOS): برای آیفون (تجربی)

گام ۵: تنظیمات نهایی

بعد از انتخاب اندروید، این اطلاعات را وارد کنید:

Package ID: یک شناسه یکتا (مثلاً `ir.yoursite.app`)
App name: نام نمایشی اپ
Short name: نام کوتاه (برای صفحه اصلی گوشی)

گام ۶: دانلود

روی دکمه Download Package کلیک کنید. یک فایل ZIP دانلود می‌شود که شامل:

app-release-signed.apk → فایل نصبی اپلیکیشن
assetlinks.json → فایل تأیید مالکیت (برای حالت Full Screen)
signing-key-info.txt → کلید امضا (بسیار مهم - نگه‌دارید)

مرحله ۴: حذف نوار آدرس (Full Screen Mode)

وقتی برای اولین بار APK را نصب کنید و اپ را باز کنید، می‌بینید که یک نوار آدرس بالای اپ وجود دارد. این یعنی اپ هنوز در حالت «Trusted Web Activity» (TWA) کار می‌کند اما اندروید هنوز تأیید نکرده که سایت مال شماست.

برای حذف کامل این نوار آدرس، باید فایل assetlinks.json را در مسیر زیر روی سایت خود قرار دهید:

https://yourdomain.com/.well-known/assetlinks.json

⚠️ نکته بسیار مهم:

اگر سایت شما در یک زیرشاخه است (مثل `yoursite.github.io/project`)، فایل `assetlinks.json` باید در ریشه دامنه اصلی قرار بگیرد، نه در زیرشاخه.

💡 تجربه من:

من برای سایت ابزارک، یک مخزن جدید به نام reza22farokhi.github.io ساختم و فقط فایل assetlinks.json و .nojekyll را در آن قرار دادم. حالا اپلیکیشن کاملاً Full Screen کار می‌کند!

مرحله ۵: انتشار در استورهای ایرانی

حالا که APK آماده است، می‌توانید آن را در استورهای ایرانی منتشر کنید. چون گوگل پلی برای ایرانی‌ها دردسر دارد، این گزینه‌ها بهتر است:

🥇 کافه بازار

ثبت‌نام در: cafebazaar.ir/developers
هزینه: رایگان (برای اپ‌های رایگان)
زمان بررسی: ۳ تا ۷ روز کاری
دسترسی: میلیون‌ها کاربر ایرانی

🥈 مایکت

ثبت‌نام در: myket.ir/developers
هزینه: رایگان
دسترسی: کاربران اندروید ایرانی

🥉 توزیع مستقیم از سایت خودتان

ساده‌ترین راه: فایل APK را در سایت خود قرار دهید و یک لینک دانلود بگذارید. کاربران می‌توانند مستقیم دانلود کنند. (این کاری است که در صفحه اپلیکیشن ابزارک انجام دادم)

نکات حرفه‌ای که در تجربه‌ام یاد گرفتم

۱. کلید امضا (Signing Key) را گم نکنید!

فایل signing-key-info.txt که در ZIP دانلودی هست، کلید امنیتی اپ شماست. اگر آن را گم کنید، نمی‌توانید نسخه‌های بعدی اپ را در استورها آپدیت کنید. حتماً در یک جای امن (مثل Google Drive) ذخیره‌اش کنید.

۲. آیکون و اسکرین‌شات حرفه‌ای بسازید

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

۳. توضیحات کامل و جذاب بنویسید

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

۴. اپلیکیشن را تست کنید

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

آیا در حالت آفلاین کار می‌کند؟
آیا همه لینک‌ها درست باز می‌شوند؟
آیا سرعت بارگذاری قابل قبول است؟
آیا دکمه بازگشت (Back) درست کار می‌کند؟

۵. نسخه‌گذاری درست انجام دهید

هر بار که می‌خواهید اپ را آپدیت کنید، باید نسخه (versionCode و versionName) را افزایش دهید. مثلاً از 1.0.0 به 1.0.1.

چالش‌های رایج و راه‌حل‌های آن‌ها

❌ مشکل: PWABuilder سایت من را نمی‌شناسد

راه‌حل: مطمئن شوید سایت شما با HTTPS باز می‌شود و manifest.json در ریشه سایت است. همچنین در Chrome، گزینه Install باید در منو ظاهر شود.

❌ مشکل: نوار آدرس حذف نمی‌شود

راه‌حل: فایل assetlinks.json باید در مسیر /.well-known/ ریشه دامنه باشد. سپس اپلیکیشن را Uninstall کرده و دوباره نصب کنید.

❌ مشکل: کافه‌بازار اپ را رد کرد

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

❌ مشکل: اپ بعد از آپدیت سایت، آپدیت نمی‌شود

راه‌حل: در فایل sw.js، نسخه cache را تغییر دهید (مثلاً از v1 به v2) تا مرورگر نسخه جدید را دریافت کند.

آیا ساخت اپلیکیشن از سایت واقعاً به صرفه است؟

بله، کاملاً! در اینجا مقایسه‌ای با ساخت اپ نیتیو داشته باشیم:

معیار	اپ PWA	اپ نیتیو
هزینه	۰ تومان	۵۰-۳۰۰ میلیون
زمان ساخت	۱۰ دقیقه	۳-۶ ماه
حجم اپ	۱-۵ مگابایت	۲۰-۱۰۰ مگابایت
به‌روزرسانی	فوری	نیاز به آپدیت استور
دسترسی به سخت‌افزار	محدود	کامل
مناسب برای	ابزار، وبلاگ، فروشگاه ساده	بازی، اپ‌های پیچیده

همان‌طور که می‌بینید، برای ۹۰٪ سایت‌ها، PWA بهترین انتخاب است. فقط اگر اپلیکیشن شما نیاز به دسترسی مستقیم به سخت‌افزار (مثل دوربین حرفه‌ای، بلوتوث، سنسورها) دارد، اپ نیتیو بهتر است.

می‌خواهید کد کامل سایت ابزارک را برای الگو ببینید؟

تمام کدهای سایت ابزارک (manifest، sw.js و...) به صورت عمومی در گیت‌هاب در دسترس است.

مشاهده در GitHub

جمع‌بندی: نقشه راه شما

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

مرحله ۱: چک کنید سایت PWA هست (manifest + sw + HTTPS)
مرحله ۲: در Chrome سایت را باز کنید و گزینه Install را تست کنید
مرحله ۳: به PWABuilder.com بروید و سایت را بسته‌بندی کنید
مرحله ۴: APK را دانلود و نصب کنید
مرحله ۵: assetlinks.json را در ریشه دامنه قرار دهید
مرحله ۶: اپ را Uninstall و دوباره نصب کنید (حالت Full Screen)
مرحله ۷: APK را در کافه‌بازار یا سایت خودتان منتشر کنید

💡 پیشنهاد ویژه: اگر به ترمینال علاقه‌مند هستید و می‌خواهید سایتتان را با Termux بسازید و مدیریت کنید، از مرجع کامل دستورات Termux ما استفاده کنید. من با همین روش، سایت ابزارک را ساختم و به اپلیکیشن تبدیل کردم!

اگر این مقاله برایتان مفید بود یا سؤالی داشتید، از طریق صفحه تماس با من در ارتباط باشید. موفق باشید! 🚀