نویسنده : مهدی میرزایی
98/02/10


مقاله شماره 7

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



سئو مقدماتی  | آموزش سئو  | اخبار

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

در اسفند و فروردین 1398 با اعمال تغییرات گسترده در سیاست های شرکت اپل امکان استفاده از مجوز انترپرایز به دلیل سوءاستفاده های فراوانی که از آن شده بود مورد بازبینی قرار گرفت و تعداد زیادی از اپ های ایرانی که از مراجعی مانند SibApp.com دانلود شده بودند بار دیگر از کار افتادند. علیرغم تلاش های فراوان برای یافتن راه حلی، هرچند موقت برای اپ های ایرانی، هنوز راه حلی عمومی و فراگیر برای این کار ارائه نشده است و از طرف دیگر، با محدود شدن اپلیکیشن های SibApp.com امکان دسترسی کاربران ایرانی به اپلیکیشن ها باز هم محدودتر شده است.

این برای ما پایان این ماجرا نیست.

ما برنامه نویس هستیم و ما میتوانیم راهی هرچند پر پیچ و خم برای هموطنانمان پیدا کنیم و یا تولید کنیم.

یکی از راه حل هایی که تا کنون وبسایت هایی مانند DigiKala.com و Snapp.ir از آن استفاده کرده اند استفاده از WebApp است.

به زبان ساده WebApp به معنای یک shortcut به وبسایت مورد نظر است تا همیشه از Home Screen کاربر به سرعت در دسترس باشد. شما میتوانید هر وبسایتی را به صفحه موبایل خود برای دسترسی سریع قرار دهید و آیفون و یا آیپد شما آن را با Safari به راحتی اجرا کند و حتی میتوانید با برنامه نویسی که بر روی وبسایت خود انجام میدهید WebApp خود را به یک WebClip تبدیل کنید.

اگر تا کنون نام WebClip را نشنیده اید، WebClip به این معناست که دیوایس iOS کاربر، یک وبسایت را مانند یک اپلیکیشن اصلی (Native App) به کاربر خود نمایش میدهد.

برای آنکه وبسایت خود را به عنوان webclip در دیوایس (مخصوصاً گوشی iOS) کاربر با ظاهر یک اپلیکیشن native نمایش دهید ابتدا باید وبسایت خود را با استاندارد های روز برای گوشی کاربران خود بهینه سازی کرده باشید و با استفاده از استانداردهایی مانند Bootstrap وبسایت خود را واکنشگرا کنید، سپس با انجام مراحل قید شده در ادامه کد های مورد نیاز اپل را در وبسایت خود وارد کنید :

1. آیکون مورد استفاده در iOS به عنوان اپلیکیشن

اولین مرحله در طراحی web Clip طراحی یک آیکون برای استفاده بر روی گوشی کاربران است که اگر کاربر وبسایت شما را بر روی home screen دیوایس خود اضافه کرد، لوگویی زیبا و حرفه ای از وبسایت شما بر روی گوشی خود داشته باشد. بدون اضافه کردن این لوگو به وبسایت خود، کاربر در زمان ذخیره کردن وبسایت شما به عنوان وب کلیپ آیکون favicon وبسایت شما را خواهد دید و یا اسکرین شات از وبسایت برای مثال به عکس های زیر توجه کنید:

آیکون مورد نیاز را در اندازه 152*152 پیکسل و در فرمت png طراحی کنید و در روت فولدر وبسایت خود آپلود نمایید. ما در این مثال از آیکونی با نام apple-touch-icon.png استفاده میکنیم. شما میتوانید برای راحتی کار خود از نام های مورد نیاز خود استفاده کنید و در تمامی مثال های این صفحه نام آیکون خود را قرار دهید.

حال برای آنکه دیوایس های iOS آیکون طراحی شده را در وب کلیپ های خود استفاده کنند، آیکون مورد نظر خود را در دیوایس های iOS به وبسایت خود اختصاص دهید. برای این کار، کد زیر را در <head> وبسایت خود قرار دهید:

<link rel="apple-touch-icon" href="/custom_icon.png">

میتوانید با توجه به رزولوشن دیوایس کاربر، آیکون های مختلفی را طراحی کنید که در دیوایس های مختلف آیکون مناسب را به دیوایس مناسب ارائه کنید. برای این کار، برای هر دیوایس آیکون منحصر به فرد (اندازه) طراحی کنید و با استفاده از Attribute برای هر روزولوشن به هر دیوایس لوگوی مناسب را ارائه نمایید.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">

<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

با استفاده از این روش میتوانید برای هر دیوایس مانند آیپد و یا آیفون آیکون مناسبی را ارائه کنید ولی استفاده از این روش کاملاً اختیاری است و اجباری در به کار بردن آیکون های مختلف برای هر دیوایس وجود ندارد. میتوانید به راحتی از یک آیکون برای تمامی دیوایس ها نیز استفاده کنید.

2. نمایش صفحه انتظار (splash screen) پیش از بارگذاری وبسایت وب کلیپ ها

واژه Splash Screen برای برنامه نویسان اپلیکیشن آشناست. ولی اگر شما برنامه نویس وبسایت هستید، اجازه بدهید اندکی برای شما توضیح دهیم که splash screen چیست.

اگر اپلیکیشن هایی مانند اسنپ، دیوار، بانک شهر و یا توییتررا بر روی دیوایس خود داشته باشید، هنگامی که آیکون اپلیکیشن را لمس کنید، قبل از آن که اپلیکیشن به شما نمایش داده شود صفحه ای با رنگ و آیکون آن اپلیکیشن برای مدت کوتاهی (در حد دو یا سه ثانیه) به کاربر نمایش داده میشود تا اپلیکیشن به طور کامل بارگذاری شود. نام این صفحه splash screen است.

در ادامه splash Screen هایی از دیوار، بانک شهر و اسنپ را میبینید که به صورت یک عکس طراحی میشوند.

استفاده از splash screen اختیاری است ولی از آنجایی که در تلاش هستیم به کاربران خود احساس اپلیکیشن را القاء کنیم، استفاده از آن به کاربر کمک میکند تا احساس استفاده از اپلیکیشن داشته باشد تا استفاده از وبسایت در دیوایس خود.

در iOS، شبیه به اپلیکیش ها شما می توانید یک تصویر splash screen را طراحی کنید که در هنگام اجرای وبسایت شما به کاربر نمایش داده شود. این ویژگی هنگامی مفید است که برنامه وب شما در دسترس نباشد و یا بارگذاری آن طولانی شود. به طور پیش فرض، یک تصویر از آخرین صفحه وبسایت شما که آخرین بار راه اندازی شده است نیز به کاربر نمایش داده میشود.

برای اضافه کردن Splash Screen به webclip خود کد زیر را به <head> وبسایت خود اضاف نمایید:

<link rel="apple-touch-startup-image" href="/launch.png">

استفاده از splash screen نیاز به آن دارد که شما برای هر رزولوشن در دیوایس های مختلف یک عکس منحصر به فرد طراحی نمایید در غیر این صورت اگر تصویر splash screen با رزولوشن دیوایس کاربر یکسان نباشد آن تصویر به کاربر نمایش داده نمیشود. برای انجام این کار باید چندین عکس برای هریک از رزولوشن ها طراحی کرده و در فولدر اصلی وبسایت آپلود کنید.با این که رزولوشن های تمامی دیوایس های اپل در اینترنت موجود است ولی با این حال در فهرست زیر میتوانید رزولوشن های مختلف اپل را بررسی و تصاویر مناسب برای هر یک را طراحی نمایید:

1. Iphone Xs Max 1242*2688
3. Iphone Xr 828*1792
4. Iphone X 1125*2436
5. Iphone X 1125*2436
6. Iphone 8 Plus 1242*2208
7. Iphone 8 750*1334
8. Iphone 7 Plus 1242*2208
9. Iphone 7 750*1334
10. Iphone 6S Plus 1242*2208
11. Iphone 6S 750*1334
12. Iphone 6 Plus 1242*2208
13. Iphone 6 750*1334
14. Ipad Pro12.9" 2048*2732
15. Ipad Pro11" 1668*2388
16. Ipad Pro10.5" 1668*2224
17. Ipad Mini 1536*2048
18. Ipad Air 1536*2048

حال برای تعیین هرکدام از رزولوشن های مناسب برای دیوایس کاربر، کد زیر را در <head> وبسایت خود قرار دهید.

<!-- iPhone Xs Max (1242px x 2688px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2688.png">


<!-- iPhone Xr (828px x 1792px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-828x1792.png">


<!-- iPhone X, Xs (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png">


<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png">


<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">


<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png">


<!-- iPad Pro 11” (1668px x 2388px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2388.png">


<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png">


<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">


3. تعریف کردن یک نام برای وب کلیپ در دیوایس کاربر

شما میتوانید برای استفاده توسط دیوایس های iOS نامی را برای webclip خود اختصاص دهید که با اضافه کردن وبسایت شما به home screen آن نام به عنوان نام اپلیکیشن به کاربر نمایش داده شود.

شما میتوانید برای استفاده توسط دیوایس های iOS نامی را برای webclip خود اختصاص دهید که با اضافه کردن وبسایت شما به home screen آن نام به عنوان نام اپلیکیشن به کاربر نمایش داده شود. در صورتی که نامی برای webclip خود تعریف نکنید، دیوایس کاربر از نوشته های داخل تگ <title> به عنوان نام اپلیکیشن استفاده خواهد کرد.

<meta name="apple-mobile-web-app-title" content="AppTitle">

حال به جای AppTitle نام اپلیکیشن مورد نیاز خود را بنویسید.

4. مخفی کردن اینترفیس های کاربری در سافاری

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

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

برای این هدف تگ apple-mobile-web-app-capable را به yes تغییر دهید. به عنوان کد نهایی میتوانید کد زیر را بر روی <head> وبسایت خود قرار دهید.

<meta name="apple-mobile-web-app-capable" content="yes">

5. تغییر ظاهر Status Bar در وب کلیپ

همانگونه که در عکس زیر میبینید status bar به نوار باریکی در بالای صفحه نمایش قرار دارد گفته میشود که ساعت، باتری و وضعیت اینترنت و میزان آنتن دهی را در گوشی کاربر نمایش میدهد.

هنگامی که وبسایت شما در دیوایس کاربر به عنوان web clip ذخیره سازی میشود شما میتوانید رفتار status bar را نیز با توجه به رنگبندی وبسایت خود تغییر دهید.

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

<meta name="apple-mobile-web-app-status-bar-style" content="black">

برای اعمال تغییرات در status bar سه انتخاب روبروی برنامه نویسان قرار دارد:

به ترتیب کد هریک از موارد بالا به قرار زیر است که میتوانید آنها را در head وبسایت خود وارد کنید.

<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-status-bar-style" content="Black-translucent">

6. لینک کردن به دیگر اپلیکیشن های iOS

هنگامی که Web clip وبسایت شما بر روی گوشی کاربران اجرا میشود، شما میتوانید برای اجرای دیگر اپلیکیشن های iOS نیز از دیوایس کاربر آن اپلیکیشن را درخواست کنید. برای مثال تماس تلفنی، اینستاگرام، واتساپ، تلگرام و دیگر اپلیکیشن ها را میتوانید از web clip خود اجرا کنید.

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

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

<a href="tel:1-408-555-5555">Call me</a>

برای لینک اینستاگرام

<a href="https://www.instagram.com/sweetweb.ir/">Instagram</a>

برای لینک فیسبوک

<a href="https://www.facebook.com/sweetweb.ir/">Facebook</a>

7. لینک های داخلی و لینک های خارجی

هنگامی که وبسایت خود را تبدیل به webclip میکنید، یکی از مواردی که باید در نظر داشته باشید این است که با کلیک کردن بر روی هر لینک داخلی در وبسایت خود دیوایس شما webclip را ترک میکند و لینک های جدید را در safari باز خواهد کرد. برای جلوگیری از این امر باید کد زیر را در <head> تمامی صفحات وبسایت خود قرار دهید :

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

تماس با ما



SweetWeb.Ir@Gmail.com



22793514


تهران پاسداران دولت رحمانی غفاری بن بست تفضلی پلاک 7



خانه

درباره ما

وبلاگ

قیمتها

تیم ما

نمونه کار ها

شبکه های اجتماعی




All Rights reserved for SweetWEB.ir