تبدیل pwa به apk با اندروید استدیو

قدم اول : ساخت پروژه
یه پروژه جدید می سازیم packagename و اسم میذاریم بهتره که baseurl وب اپمون باشه باید توجه داشته باشیم که بعضی موارد روی api 23 به بعد کار می کنن و no activity رو انتخاب می کنیم.

قدم دوم: اضافه کردن dependency
داخل Project build.gradle > allprojects > repositories خط زیر رو اضافه می کنیم

1maven { url "https://jitpack.io" }

داخل Module build.gradle برای androidX

12implementation 'androidx.browser:browser:1.2.0'
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:1.4.0'

قدم سوم : انجام تنظیمات PWA
داخل Project build.gradle > defaultConfig خطوط زیر رو اضافه می کنیم

12345manifestPlaceholders = [
  hostName: "example.com",
  defaultUrl: "https://example.com",
  launcherName: "Example"
 ]

در اینجا launcherName باید همان short_name داخل مانیفست وب اپ باشد

قدم چهارم : انجام تنظیمات manifest
داخل app > manifests > AndroidManifest.xml خطوط صفحه بعد را اضافه کنید.

12345678910111213141516171819202122232425262728293031323334<application
  android:allowBackup="true"
  android:icon="@mipmap/ic_launcher"
  android:label="${launcherName}"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:supportsRtl="true"
  android:theme="@style/AppTheme">
 
  <meta-data
  android:name="asset_statements"
  android:value="${assetStatements}" />
 
  <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
  android:configChanges="orientation"
  android:screenOrientation="portrait"
  android:label="${launcherName}">
 
  <meta-data android:name="android.support.customtabs.trusted.DEFAULT_URL"
  android:value="${defaultUrl}" />
 
  <intent-filter>
  <action android:name="android.intent.action.MAIN" />
  <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
 
  <intent-filter android:autoVerify="true">
  <action android:name="android.intent.action.VIEW"/>
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE"/>
  <data android:scheme="https"
  android:host="${hostName}"/>
  </intent-filter>
 
  </activity>

* اگر بعد از سینک کردن به
Error: Invoke-customs are only supported starting with Android O
برخوردید خطوط زیر را به Module build.gradle > android اضافه کنید

1234compileOptions {
  sourceCompatibility JavaVersion.VERSION_1_8
  targetCompatibility JavaVersion.VERSION_1_8
 }

قدم پنجم : تنظیم آیکون اپ
لازم است آیکون مورد نظر را به صورت دستی و مطابق روند همیشگی تنظیم کنید

قدم ششم : تنظیم تم برای pwa
لازم است تغییر زیر را در استایل پروژه انجام دهید

برای شما

1234567<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
  <item name="windowNoTitle">true</item>
  <item name="android:backgroundDimEnabled">false</item>
</style>

قدم هفتم : تنظیم orientation
اگر برای وب اپ orientation محدود کرده اید باید این کار را در androidManifest هم روی activity اعمال کنید

قدم هشتم : برقراری ارتباط بین اپ و سایت
حالا باید ارتباط بین سایت و اپ رو از طریق Digital Asset Links برقرار کنیم و اینکار باید دو طرف انجام شود
برای سمت موبایل به Project build.gradle > defaultConfig > manifestPlaceholders خطوط زیر را اضافه کنید

123assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
  '"target": {"namespace": "web", 
  "site": "https://example.com"}}]'

پارامتر assetStatements همان Digital Asset Links است که امکانات زیر را در اختیار می گذارد:
وبسایت A مشخص می کند که لینک های سایت در صورت نصب بودن اپ متناظر باید داخل اپ باز شود
وبسایت A مشخص می کند که اعتبار یوزر کروم یوزر را می تواند با وبسایت B به اشتراک بگذارد تا اگر در وبسایت A لاگین بود نیازبه لاگین مجدد برای وبسایت B نباشد
اپلیکیشن A می تواند تنظیماتی از دستگاه مانند لوکیشن را با وبسایت B به اشتراک بگذارد

برای سمت وب باید از keystore مون sha256 بگیریم به این ترتیب که :
داخل اندروید استودیو از منوی Tools → App Links Assistant
آیتم سوم رو انتخاب می کنیم associate website و select key store file رو میزنیم و آدرس فایل jks رو بهش میدیم وقتی generate رو بزنیم ممکنه بگه ولید نیست دومین سایت که در این صورت آدرس سایت رو به صورت دستی وارد کنید حالا می تونید فایل تولیدی رو سیو کنید و همون رو به بکعند دولوپر بدید تا در مسیر
https://www.example.com/.well-known/assetlinks.json قرار بده و بعد هم link and verify

* توجه داشته باشید که apk روی ریلیز ساین می شه و اگر apk دیباگ را نصب کنید آدرس بار هنوز نمایش داده میشه ولی وقتی apk ریلیز را نصب می کنید آدرس باری دیگه دیده نمی شه.

منابع :
https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc

https://css-tricks.com/how-to-get-a-progressive-web-app-into-the-google-play-store/

https://developers.google.com/digital-asset-links/v1/getting-started

نویسنده مطلب: فاطمه زیرکی

منبع مطلب

تبدیل pwa به apk با اندروید استدیو

به فکر سرمایه‌گذاری هستی؟