موارد جدید برای وب در Android 2023

Adriana Jara

Sebastian Benz

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

در اینجا آخرین به روز رسانی این ابزارها وجود دارد. مثلا:

• بهبود حریم خصوصی و پشتیبانی بهتر از صفحه نمایش های بزرگ، مانند پشتیبانی از کشیدن و رها کردن تصویر در WebView .
• Custom Tabs اکنون از برگه های سفارشی جزئی پشتیبانی می کند.
• ویژگی‌های یکپارچه برای PWA ، مانند Richer Install UI و Play billing API در Trusted Web Activities .

بیایید شیرجه بزنیم و بیشتر بیاموزیم.

WebView

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

X-درخواست شده-با هدر

بیایید با حریم خصوصی و حذف هدر X-Requested-With شروع کنیم. وقتی کاربر برنامه‌ای را نصب و اجرا می‌کند که از WebView برای جاسازی محتوای وب استفاده می‌کند، WebView هدر X-Requested-With را به هر درخواستی که به سرور ارسال می‌شود اضافه می‌کند. مقدار این هدر نام APK برنامه است. این بدان معنی است که هر درخواست شامل اطلاعات خاصی در مورد زمینه ای است که کاربر در آن محتوای وب را مصرف می کند و هویت برنامه را به سرویس آنلاین فاش می کند. برای محافظت از حریم خصوصی کاربر، تیم WebView آزمایشی را شروع کرد که این هدر را از تمام درخواست‌های WebView حذف می‌کند.

اما اگر برنامه شما به هدر X-Requested-With متکی باشد، چه؟ روش پیشنهادی ما استفاده از آپت در API جدید است که به شما امکان می‌دهد هدر درخواست را به صورت انتخابی به مبداهای خاص ارسال کنید. این بدان معنی است که شما بهترین هر دو جهان را دریافت می کنید: می توانید به پشتیبانی از ویژگی های موجود در بالای این هدر ادامه دهید، در حالی که مطمئن شوید که حریم خصوصی کاربر در سایر موارد حفظ می شود. اگر می‌خواهید رفتار موجود را حفظ کنید، می‌توانید برای آزمایش اولیه X-Requested-With Deprecation نیز ثبت‌نام کنید.

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("https://example.com")
);

تست WebView

موضوع بعدی تست است. اگر شما یک توسعه دهنده وب هستید و وب سایت های شما ترافیک زیادی از WebViews دریافت می کنند، دو به روز رسانی برای شما وجود دارد:

1. WebView اکنون از آزمایش‌های اولیه Chrome پشتیبانی می‌کند. آزمایش‌های اولیه به شما امکان دسترسی به ویژگی‌های جدید یا آزمایشی در Chrome را می‌دهد. قبل از اینکه این ویژگی در دسترس همه قرار گیرد، می‌توانید از اینها برای آزمایش یک ویژگی جدید استفاده کنید. تا به حال، نسخه آزمایشی اصلی فقط در کروم دسکتاپ و موبایل در دسترس بوده است، اما با شروع کروم M110، نسخه آزمایشی اصلی در WebView نیز کار می‌کند.

2. اکنون نصب WebView بتا بسیار ساده تر است. ما به شدت توصیه می کنیم وب سایت خود را با استفاده از کانال WebView Beta آزمایش کنید تا مطمئن شوید که وب سایت شما در نسخه های WebView آینده به خوبی کار می کند. برای انجام این کار، به برنامه آزمایش WebView Beta در فروشگاه Google Play بپیوندید و دستگاه شما به طور خودکار ثبت نام می شود.

پشتیبانی از دستگاه با صفحه نمایش بزرگ

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

اضافه کردن کشیدن و رها کردن به WebViews بسیار آسان است: فقط باید یک DropDataProvider را در AndroidManifest خود اعلام کنید.

<application...>
     ...
     <provider
         android:authorities="com.example.webviewdemo.DropDataProvider"
         android:name="androidx.webkit.DropDataContentProvider"
         android:exported="false"
         android:grantUriPermissions="true"/>
 </application>

صحبت از دستگاه‌های صفحه‌نمایش بزرگ، Chrome و WebView در Android U با پشتیبانی کامل از دست‌نویسی در فیلدهای ورودی متن HTML، و با حرکات ورودی برای حذف متن یا افزودن فاصله ارائه می‌شود. پشتیبانی از دست خط از قبل برای همه دستگاه های سامسونگ با One UI 5.1 مانند S23 Ultra در دسترس است. برای سایر دستگاه‌هایی که از Android T استفاده می‌کنند، می‌توانید دست‌نویسی را در ورودی‌های HTML در گزینه‌های برنامه‌نویس فعال کنید.

موتور جاوا اسکریپت جت پک

گاهی اوقات ممکن است لازم باشد جاوا اسکریپت را بدون نمایش محتوای وب در برنامه خود اجرا کنید. به عنوان مثال، هنگام به اشتراک گذاری منطق تجاری در بین برنامه های وب و تلفن همراه. برای آسان‌تر کردن این کار، سال گذشته نسخه آلفا موتور جاوا اسکریپت جدید JetPack را راه‌اندازی کردیم. این کتابخانه از V8، موتور جاوا اسکریپت Chrome استفاده می‌کند و به برنامه شما اجازه می‌دهد کد جاوا اسکریپت یا WebAssembly را بدون ایجاد نمونه WebView ارزیابی کند. نکته مهم در مورد موتور جاوا اسکریپت جدید این است که جاوا اسکریپت شما را در یک فرآیند متفاوت اجرا می کند و آن را راهی امن و پایدار برای اجرای جاوا اسکریپت در برنامه شما می کند. همچنین به منابع کمتری نسبت به یک نمونه WebView نیاز دارد.

ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…

برگه های سفارشی

WebView برای ادغام رابط کاربری وب در برنامه شما عالی است. اما در مورد اجازه دادن به کاربران برای مرور محتوای وب در برنامه شما چیست؟

این یک مورد استفاده عالی برای تب های سفارشی است. آنها یک راه امن و کاربر پسند برای اجازه دادن به کاربران برای مشاهده محتوای وب در برنامه شما هستند. مزیت بزرگ آنها این است که کاربران نیازی به ورود مجدد به وب سایت های مورد علاقه خود ندارند. این به این دلیل است که آنها نمونه‌ای از مرورگر و کوکی‌های پیش‌فرض کاربر هستند که به اشتراک گذاشته می‌شوند، و همه ویژگی‌های پلتفرم وب و APIهایی را ارائه می‌دهند که توسط مرورگر تأمین‌کننده آن پشتیبانی می‌شوند.

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

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

برگه های سفارشی جزئی

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

تنها کاری که باید انجام دهید این است که به سرویس Custom Tabs متصل شوید، جلسه را به CustomTabsBuilder منتقل کنید و setActivityHeight را فراخوانی کنید.

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
  .setInitialActivityHeightPx(500)
  .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
  // ...
  .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

YouTube با موفقیت تب های سفارشی درون خطی قابل تغییر اندازه را در تبلیغات پاسخ مستقیم راه اندازی کرد. به این ترتیب، آنها توانسته‌اند روش جدیدی را برای تعامل با تبلیغات و محتوای وب بدون وقفه در تجربه ارگانیک در برنامه پیاده‌سازی کنند.

اما در مورد تبلت ها و سایر دستگاه های صفحه نمایش بزرگ چطور؟ تیم Chrome در حال حاضر روی یک تجربه جدید از Tabs سفارشی کنار هم برای حالت افقی و دستگاه‌های صفحه بزرگ کار می‌کند. با تعیین حداکثر عرض برگه، همراه با یک نقطه شکست، تجربه برگه سفارشی به طور خودکار بین پوشش صفحه پایین و تجربه کنار هم جابه‌جا می‌شود. این ویژگی در حال حاضر در Canary در دسترس است و در حدود ژوئیه 2003 راه اندازی خواهد شد. اگر می خواهید آن را امتحان کنید، کد منبع برنامه نمونه Chromium Custom Tabs را بررسی کنید.

اندازه گیری سیگنال های تعامل

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

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

سیگنال‌های تعامل با Chrome 114 در دسترس هستند و به کتابخانه پشتیبانی androidx.browser:browser:1.6.0-alpha01 یا بالاتر نیاز دارند. برای کسب اطلاعات بیشتر، راهنمای شروع سیگنال‌های تعامل را بررسی کنید.

PWA

همچنین به‌روزرسانی‌هایی در PWA وجود دارد - مجموعه‌ای از فناوری‌ها که ایجاد تجربیات برنامه‌مانند، ساخته‌شده و مستقر در وب را ممکن می‌سازد.

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

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

بیایید چند ویژگی را بررسی کنیم که باعث می‌شود برنامه وب قابل نصب شما در اندروید احساس راحتی کند.

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

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

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

البته، Service worker API هنوز برای ایجاد تجربیات آفلاین سفارشی و پیاده‌سازی ویژگی‌های دیگری مانند کش برای بهبود عملکرد در دسترس است.

برخی از ویژگی‌های دیگری که می‌توانند تجربه اپلیکیشن وب را برای اندروید به ارمغان بیاورند عبارتند از Richer Install UI . با افزودن description فیلدها و screenshots به مانیفست وب خود، کاربران شما تجربه نصبی خواهند داشت که به آنچه فروشگاه های برنامه برای توصیف برنامه شما نشان می دهند نزدیک تر است.

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

با استفاده از Web Share و Web Share Target API، برنامه شما می تواند مانند هر برنامه پلتفرمی دیگر با برنامه های دیگر تعامل داشته باشد. برنامه شما یک گزینه در برگه های اشتراک گذاری خواهد بود و می تواند عکس ها، متن ها و فایل های دیگر را به اشتراک بگذارد و دریافت کند.

برای اطلاعات بیشتر در مورد اینکه چگونه کسب‌وکارها از این فناوری‌ها استفاده می‌کنند، می‌توانید بحث I/O را بررسی کنید.

فعالیت وب مورد اعتماد

راه دیگر برای آوردن وب به Android استفاده از فعالیت وب مورد اعتماد (TWA) است.

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

توجه داشته باشید که TWA به نظر می رسد که به شدت با PWA مرتبط است، اما اینطور نیست. بله، با استفاده از TWA می‌توانید برنامه وب قابل نصب خود را در Google Play منتشر کنید، اما همچنین می‌توانید یک فعالیت واحد را در وب ایجاد کنید و آن را در برنامه Android خود قرار دهید.

یک فعالیت وب مورد اعتماد توسط مرورگر کاربر دقیقاً به همان شکلی ارائه می شود که کاربر آن را در مرورگر خود می بیند، با این تفاوت که تمام صفحه اجرا می شود و نوار URL نمایش داده نمی شود. این بدان معنی است که آنها از تمام ویژگی های پلت فرم وب و API های پشتیبانی شده توسط مرورگر که آن را تامین می کند پشتیبانی می کنند.

چند مزیت بسته بندی برنامه وب با استفاده از TWA عبارتند از:

انتشار در Google Play ، که به برنامه شما امکان می‌دهد به قابلیت مشاهده و توزیع Google Play دسترسی داشته باشد. دسترسی به Play Billing API ، که به توسعه دهندگان امکان می دهد فروش کالاهای دیجیتال را در برنامه های خود مدیریت کنند و راه اندازی محصولات، فروش، اشتراک و موارد دیگر را آسان تر می کند. واگذاری اعلان ها و مجوزهای موقعیت جغرافیایی به برنامه اندروید به جای وب سایت.

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

نتیجه

همانطور که دیدید، گزینه های مختلفی برای جاسازی محتوای وب در برنامه شما وجود دارد و همه این گزینه ها به طور مداوم در حال بهبود هستند.