چطور یک اپ وب سازگار با موبایل بسازیم

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

سه راه برای «روی موبایل بودن»

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

آنچه اپ‌های وب روی گوشی می‌توانند و نمی‌توانند انجام دهند

مرورگرها بیشتر از آنچه بسیاری فکر می‌کنند کار می‌کنند:

• دوربین و آپلود عکس، از طریق ورودی فایل استاندارد.
• موقعیت مکانی، با اجازهٔ کاربر.
• نصب روی صفحهٔ اصلی با آیکون و اجرای تمام‌صفحه.
• استفادهٔ آفلاین، با ذخیرهٔ صفحات و داده‌ها با یک service worker (اسکریپتی که مرورگر در پس‌زمینه برای سایت شما اجرا می‌کند).
• اعلان push — با یک نکته روی آیفون. تیم WebKit اپل می‌گوید push وب از iOS و iPadOS نسخهٔ ۱۶.۴ برای اپ‌های وبی که به صفحهٔ اصلی اضافه شده‌اند آمد. کاربران باید ابتدا اپ را نصب کنند و بعد اعلان‌ها را مجاز کنند.

جایی که بومی همچنان برنده است:

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

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

طراحی از ابتدا برای گوشی

چیدمان گوشی را اول طراحی کنید و بگذارید برای صفحه‌های بزرگ‌تر گسترش یابد؛ معکوس آن معمولاً صفحه‌های فشرده و شلوغ روی گوشی می‌سازد.

چیدمان

• یک ستون روی صفحه‌های کوچک. نوار کناری تبدیل می‌شود به نوار پایین یا منو.
• بدون اسکرول افقی. جدول‌های پهن تبدیل می‌شوند به کارت یا داخل یک ظرف اسکرول‌شونده قرار می‌گیرند.
• متن خوانا بدون نیاز به زوم — متن اصلی حدود ۱۶ پیکسل.

لمس

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

سرعت

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

حاشیه‌های امن و نوار آدرس

روی گوشی‌های جدید، محتوا ممکن است زیر بریدگی بالای صفحه یا نوار خانه پنهان شود، به‌خصوص در اپ نصب‌شدهٔ تمام‌صفحه. فاصلهٔ امن (safe-area) را درخواست کنید. همچنین مراقب چیدمان‌های با ارتفاع کامل باشید که با ظاهر و ناپدید شدن نوار آدرس مرورگر می‌پرند.

نصب‌پذیر کردن (PWA)

برای نصب‌پذیر بودن، یک اپ وب به این موارد نیاز دارد:

1. مانیفست اپ وب — فایل کوچکی با نام اپ، نام کوتاه، آیکون‌ها، رنگ تم و نحوهٔ باز شدن (معمولاً تمام‌صفحه یا «standalone»).
2. آیکون‌ها در اندازه‌هایی که سکوها انتظار دارند، از جمله یکی مناسب دستگاه‌های اپل.
3. HTTPS، که هر میزبانی درست از آن برخوردار است.
4. یک service worker اگر پشتیبانی آفلاین یا push می‌خواهید.

سپس به کاربران بگویید چطور نصب کنند. مرورگرهای اندروید معمولاً پیشنهاد نصب یا آیتم منو می‌دهند؛ در آیفون دکمهٔ اشتراک‌گذاری و بعد «Add to Home Screen» (افزودن به صفحهٔ اصلی) است. یک یادداشت کوتاه «این اپ را نصب کنید» با این مراحل خیلی کمک می‌کند.

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

یک پرامپت اول که جواب می‌دهد

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

مراحل ساخت

1. اول چیدمان گوشی را بسازید، با داده‌های نمونه، و آن را در یک پیش‌نمایش به اندازهٔ گوشی بررسی کنید.
2. روی گوشی‌های واقعی آزمایش کنید — حداقل یک آیفون و یک اندروید اگر کاربرانتان هر دو را دارند. شبیه‌سازها چیزهایی مثل پوشیده شدن ورودی‌ها توسط کیبورد روی صفحه را از دست می‌دهند.
3. کار اصلی را با یک شست انجام دهید. اگر چیزی دو دست یا زوم می‌خواهد، درستش کنید.
4. مانیفست و آیکون‌ها را اضافه کنید، بعد اپ را روی هر دو سکو نصب کنید و آیکون، نام و صفحهٔ شروع را بررسی کنید.
5. درباره‌اش تصمیم بگیرید. با «بدون اتصال باز شود و پیام واضح نشان دهد» شروع کنید؛ ویرایش آفلاین را فقط در صورت نیاز اضافه کنید.
6. سرعت را روی اتصال کند بررسی کنید. ابزارهای توسعه‌دهندهٔ مرورگر می‌توانند چنین اتصالی را شبیه‌سازی کنند.
7. اعلان‌ها را آخر اضافه کنید، اگر اصلاً — و برای کاربرانی که اپ را نصب نمی‌کنند، یک جایگزین ایمیلی در نظر بگیرید.

اشتباه‌های رایج

• طراحی فقط روی مانیتور بزرگ. هر صفحه را در عرض گوشی بررسی کنید.
• جدول‌هایی که بیرون می‌زنند. روی صفحه‌های کوچک ردیف‌ها را به کارت تبدیل کنید.
• هدف‌های لمسی ریز و لینک‌های نزدیک به هم.
• فرم‌هایی که با کیبورد دعوا می‌کنند — نوع ورودی اشتباه، فیلدهایی که پشت کیبورد پنهان می‌شوند، نبود جریان «بعدی».
• فرض اینکه push آیفون در تب مرورگر کار می‌کند. برای آن باید اپ به صفحهٔ اصلی نصب شده باشد.
• وعدهٔ اپ App Store که نمی‌توانید تحویل دهید. اگر فروشگاه مهم است، جداگانه برایش برنامه‌ریزی کنید.
• بسته‌بندی یک وب‌سایت و نامیدنش اپ. دستورالعمل‌های بررسی اپ اپل اپ‌هایی می‌خواهد که فراتر از یک وب‌سایت بسته‌بندی‌شده باشند؛ یک پوستهٔ نازک خطر رد شدن دارد.

وقتی به اپ بومی نیاز دارید

وقتی این موارد برقرار است، بومی بروید (یا یک نسخهٔ بومی را پس از اپ وب برنامه‌ریزی کنید):

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

انتشار در فروشگاه هزینه‌ها و مراحل خاص خودش را دارد. از سپتامبر ۲۰۲۶، طبق سایت‌های خود اپل، برنامهٔ توسعه‌دهندگان اپل ۹۹ دلار آمریکا در سال و حساب توسعه‌دهندهٔ Google Play ۲۵ دلار آمریکا یک‌بار هزینه دارد، و هر انتشار از بررسی می‌گذرد. بسیاری از تیم‌ها با یک اپ وب واکنش‌گرا شروع می‌کنند تا ثابت کنند مردم محصول را می‌خواهند، و بعد برای نسخهٔ بومی سرمایه‌گذاری می‌کنند. چطور با هوش مصنوعی اپ بسازیم کل این مرحلهٔ اول را از ابتدا تا انتها پوشش می‌دهد.

ساختن با Mythex

Mythex اپ‌های وب می‌سازد: اپ را در گفتگو توصیف می‌کنید و آن را در پیش‌نمایش زنده روی دسکتاپ و در یک قاب اندازهٔ گوشی که می‌توانید تغییر اندازه دهید بررسی می‌کنید. مستندات یک پرامپت واکنش‌گرای موبایل برای اصلاح چیدمان‌های صفحه‌کوچک دارد. می‌توانید مانند هر امکان دیگری مانیفست PWA و آیکون بخواهید، و بعد به یک لینک عمومی که روی هر گوشی کار می‌کند منتشر کنید. در طرح Pro، Mythex می‌تواند اپ را به‌صورت اپ اندروید و آیفون بپیچد، که به تست داخلی Google Play و TestFlight فرستاده می‌شود. برای شروع، سازندهٔ اپ وب هوش مصنوعی یا قالب‌های اپ را ببینید. برای یک نمونهٔ کامل، چطور اپ ردیاب عادت بسازیم را بخوانید.

پرسش‌ها