นักพัฒนาซอฟต์แวร์ไม่จำเป็นต้องเขียนโค้ด Java ในการตั้งค่ากิจกรรมบนเว็บและเว็บที่เชื่อถือได้ แต่ต้องใช้ Android Studio คู่มือนี้สร้างโดยใช้ Android Studio 3.3 อ่านเอกสารเกี่ยวกับวิธีติดตั้ง
สร้างโปรเจ็กต์กิจกรรมบนเว็บที่เชื่อถือได้
เมื่อใช้กิจกรรมบนเว็บที่เชื่อถือได้ โปรเจ็กต์ต้องกำหนดเป้าหมายเป็น API ระดับ 16 ขึ้นไป
เปิด Android Studio แล้วคลิกเริ่มโปรเจ็กต์ Android Studio ใหม่
Android Studio จะแสดงข้อความแจ้งให้เลือกประเภทกิจกรรม เนื่องจากกิจกรรมบนเว็บที่เชื่อถือได้จะใช้กิจกรรม ที่ไลบรารีการสนับสนุนมีให้ ให้เลือกเพิ่มไม่มีกิจกรรม แล้วคลิกถัดไป
ขั้นตอนถัดไป วิซาร์ดจะแจ้งให้กำหนดค่าสำหรับโปรเจ็กต์ นี่คือคำอธิบายสั้นๆ ของแต่ละช่อง
- ชื่อ: ชื่อที่ใช้สำหรับแอปพลิเคชันใน Android Launcher
- ชื่อแพ็กเกจ:ตัวระบุที่ไม่ซ้ำสำหรับแอปพลิเคชัน Android ใน Play Store และในอุปกรณ์ Android อ่านเอกสารประกอบเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับข้อกำหนดและแนวทางปฏิบัติที่ดีที่สุดในการสร้างชื่อแพ็กเกจสำหรับแอป Android
- บันทึกตำแหน่ง: ตำแหน่งที่ Android Studio จะสร้างโปรเจ็กต์ในระบบไฟล์
- ภาษา: โปรเจ็กต์ไม่จําเป็นต้องเขียนโค้ด Java หรือ Kotlin ใดๆ เลือก Java เป็นค่าเริ่มต้น
- ระดับ API ขั้นต่ำ: ไลบรารีการสนับสนุนต้องการ API ระดับ 16 เป็นอย่างน้อย เลือก API 16 เวอร์ชันใดก็ได้ข้างต้น
ไม่ต้องเลือกช่องทำเครื่องหมายที่เหลือ เนื่องจากเราจะไม่ใช้ Instant Apps หรืออาร์ติแฟกต์ AndroidX แล้วคลิก Finish
ดาวน์โหลดไลบรารีการสนับสนุนกิจกรรมบนเว็บที่เชื่อถือได้
หากต้องการตั้งค่าไลบรารีกิจกรรมบนเว็บที่เชื่อถือได้ในโปรเจ็กต์ คุณจะต้องแก้ไขไฟล์บิลด์ของแอปพลิเคชัน ค้นหาส่วน Gradle Scripts ใน Project Navigator
มีไฟล์ 2 รายการที่ชื่อ build.gradle
ซึ่งอาจฟังดูสับสนเล็กน้อย และคำอธิบายในวงเล็บจะช่วยระบุไฟล์ที่ถูกต้อง
ไฟล์ที่เรากำลังมองหาคือไฟล์ที่มีโมดูล Module อยู่ข้างชื่อไฟล์
ไลบรารีกิจกรรมบนเว็บที่เชื่อถือได้ใช้ฟีเจอร์ Java 8 และการเปลี่ยนแปลงครั้งแรกจะเปิดใช้ Java 8 เพิ่มส่วน compileOptions
ไว้ที่ด้านล่างของส่วน android
ดังต่อไปนี้
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
ขั้นตอนต่อไปคือเพิ่มไลบรารีการสนับสนุนกิจกรรมบนเว็บที่เชื่อถือได้ลงในโปรเจ็กต์ เพิ่มทรัพยากร Dependency ใหม่ไปยังส่วน dependencies
ดังนี้
dependencies {
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}
Android Studio จะแสดงข้อความแจ้งให้ซิงค์โปรเจ็กต์อีกครั้ง คลิกลิงก์ ซิงค์เดี๋ยวนี้ และซิงค์ข้อมูล
เปิดกิจกรรมในเว็บซึ่งเชื่อถือได้
คุณสร้างกิจกรรมในเว็บที่เชื่อถือได้โดยแก้ไขไฟล์ Manifest ของแอป Android
ใน Project Navigator ให้ขยายส่วนแอป ตามด้วยไฟล์ Manifest และดับเบิลคลิก AndroidManifest.xml
เพื่อเปิดไฟล์
เนื่องจากเราได้ขอให้ Android Studio ไม่เพิ่มกิจกรรมใดๆ ลงในโปรเจ็กต์ของเราเมื่อสร้างโปรเจ็กต์ ไฟล์ Manifest จึงว่างเปล่าและมีเฉพาะแท็กแอปพลิเคชันเท่านั้น
เพิ่มกิจกรรมบนเว็บและที่เชื่อถือได้โดยแทรกแท็ก activity
ลงในแท็ก application
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example.twa.myapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
tools:ignore="GoogleAppIndexingWarning">
<activity
android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
<!-- Edit android:value to change the url opened by the Trusted Web Activity -->
<meta-data
android:name="android.support.customtabs.trusted.DEFAULT_URL"
android:value="https://airhorner.com" />
<!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<!--
This intent-filter allows the Trusted Web Activity to handle Intents to open
airhorner.com.
-->
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE"/>
<!-- Edit android:host to handle links to the target URL-->
<data
android:scheme="https"
android:host="airhorner.com"/>
</intent-filter>
</activity>
</application>
</manifest>
แท็กที่เพิ่มใน XML เป็นไฟล์ Manifest ของแอป Android มาตรฐาน ข้อมูลที่เกี่ยวข้อง 2 ส่วนสำหรับบริบทของกิจกรรมบนเว็บที่เชื่อถือได้มีดังนี้
- แท็ก
meta-data
จะบอกกิจกรรมในเว็บที่เชื่อถือได้ว่าควรเปิด URL ใด เปลี่ยนแอตทริบิวต์android:value
ด้วย URL ของ PWA ที่ต้องการเปิด ในตัวอย่างนี้คือhttps://airhorner.com
- แท็ก
intent-filter
ที่ 2 จะอนุญาตให้กิจกรรมบนเว็บและที่เชื่อถือได้สกัดกั้น Android Intent ที่เปิดhttps://airhorner.com
แอตทริบิวต์android:host
ในแท็กdata
ต้องชี้ไปยังโดเมนที่เปิดโดยกิจกรรมในเว็บที่เชื่อถือได้
ส่วนถัดไปจะแสดงวิธีตั้งค่า Digital AssetLinks เพื่อยืนยันความสัมพันธ์ระหว่างเว็บไซต์และแอป รวมถึงนำแถบ URL ออก
นำแถบ URL ออก
กิจกรรมบนเว็บที่เชื่อถือได้กำหนดให้มีการเชื่อมโยงระหว่างแอปพลิเคชัน Android กับเว็บไซต์เพื่อนำแถบ URL ออก
การเชื่อมโยงนี้สร้างผ่านลิงก์เนื้อหาดิจิทัล (Digital Asset Links) และจะต้องสร้างการเชื่อมโยงทั้ง 2 วิธี โดยลิงก์จากแอปไปยังเว็บไซต์และจากเว็บไซต์ไปยังแอป
คุณสามารถตั้งค่าแอปให้ตรวจสอบความถูกต้องของเว็บไซต์ และตั้งค่า Chrome ให้ข้ามเว็บไซต์ไปยังการตรวจสอบแอปเพื่อจุดประสงค์ในการแก้ไขข้อบกพร่องได้
สร้างการเชื่อมโยงจากแอปไปยังเว็บไซต์
เปิดไฟล์ทรัพยากรสตริง app > res > values > strings.xml
แล้วเพิ่มคำสั่ง Digital AssetLinks ด้านล่าง
<resources>
<string name="app_name">AirHorner Trusted Web Activity</string>
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://airhorner.com\"}
}]
</string>
</resources>
เปลี่ยนเนื้อหาสำหรับแอตทริบิวต์ site
ให้ตรงกับสคีมาและโดเมนที่เปิดโดยกิจกรรมบนเว็บที่เชื่อถือได้
กลับไปที่ไฟล์ Manifest ของแอป Android ชื่อ AndroidManifest.xml
แล้วลิงก์ไปยังคำสั่งดังกล่าวโดยการเพิ่มแท็ก meta-data
ใหม่ แต่ครั้งนี้เป็นแท็กย่อยของแท็ก application
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.twa.myapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<meta-data
android:name="asset_statements"
android:resource="@string/asset_statements" />
<activity>
...
</activity>
</application>
</manifest>
ตอนนี้เราได้สร้างความสัมพันธ์จากแอปพลิเคชัน Android กับ เว็บไซต์แล้ว การแก้ไขข้อบกพร่องของความสัมพันธ์ส่วนนี้จะเป็นประโยชน์โดยไม่ต้องสร้างเว็บไซต์เพื่อตรวจสอบแอปพลิเคชัน
วิธีทดสอบบนอุปกรณ์การพัฒนามีดังนี้
เปิดใช้โหมดแก้ไขข้อบกพร่อง
- เปิด Chrome ในอุปกรณ์การพัฒนา แล้วไปที่
chrome://flags
ค้นหารายการที่ชื่อเปิดใช้บรรทัดคำสั่งในอุปกรณ์ที่ไม่ได้รูท แล้วเปลี่ยนเป็นเปิดใช้ จากนั้นรีสตาร์ทเบราว์เซอร์ - ถัดไป ให้ใช้ Android Debug Bridge (ติดตั้งแล้วใน Android Studio) ในแอปพลิเคชันเทอร์มินัลของระบบปฏิบัติการ แล้วเรียกใช้คำสั่งต่อไปนี้
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"
ปิด Chrome และเปิดแอปพลิเคชันอีกครั้งจาก Android Studio แอปพลิเคชันควรแสดงแบบเต็มหน้าจอแล้ว
สร้างการเชื่อมโยงจากเว็บไซต์กับแอป
นักพัฒนาแอปต้องรวบรวมข้อมูล 2 อย่างจากแอปเพื่อสร้างการเชื่อมโยง ได้แก่
- ชื่อแพ็กเกจ: ข้อมูลแรกคือชื่อแพ็กเกจของแอป ซึ่งเป็นชื่อแพ็กเกจเดียวกับที่สร้างขึ้นเมื่อสร้างแอป และยังสามารถดูได้ในโมดูล
build.gradle
ใน สคริปต์ Gradle > create.gradle (โมดูล: แอป) และเป็นค่าของแอตทริบิวต์applicationId
- ลายนิ้วมือ SHA-256: ต้องลงชื่อเข้าใช้แอปพลิเคชัน Android จึงจะอัปโหลดไปยัง Play Store ได้ ลายเซ็นเดียวกันนี้จะใช้ในการสร้างการเชื่อมต่อระหว่างเว็บไซต์กับแอปผ่านลายนิ้วมือ SHA-256 ของคีย์การอัปโหลด
เอกสารประกอบของ Android จะอธิบายวิธีการสร้างคีย์โดยใช้ Android Studio โดยละเอียด อย่าลืมจดเส้นทาง ชื่อแทน และรหัสผ่านของแหล่งเก็บคีย์ไว้เพราะจะต้องใช้ในขั้นตอนถัดไป
แยกลายนิ้วมือ SHA-256 โดยใช้keytool โดยใช้คำสั่งต่อไปนี้
keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]
ค่าสำหรับลายนิ้วมือ SHA-256 จะพิมพ์อยู่ใต้ส่วนลายนิ้วมือใบรับรอง ต่อไปนี้เป็นตัวอย่างเอาต์พุต
keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password
Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3
เมื่อมีข้อมูลทั้ง 2 ชิ้นพร้อมแล้ว ให้ไปที่โปรแกรมสร้าง assetlinks
กรอกข้อมูลในช่อง และกดสร้างคำสั่ง คัดลอกคำสั่งที่สร้างขึ้นและแสดงจากโดเมนของคุณจาก URL /.well-known/assetlinks.json
การสร้างไอคอน
เมื่อ Android Studio สร้างโปรเจ็กต์ใหม่ โปรเจ็กต์ดังกล่าวจะมาพร้อมกับไอคอนเริ่มต้น ในฐานะนักพัฒนาซอฟต์แวร์ คุณจะต้องสร้างไอคอนของตนเองและทำให้แอปพลิเคชันของคุณแตกต่างจากแอปอื่นๆ ใน Android Launcher
Android Studio มี Image Asset Studio ซึ่งมีเครื่องมือที่จำเป็นในการสร้างไอคอนที่ถูกต้องเพื่อ ความละเอียดและรูปร่างทุกรูปแบบที่แอปพลิเคชันของคุณต้องการ
ใน Android Studio ให้ไปที่ File > New > Image Asset
เลือก Launcher Icons (Adaptative and Legacy)
และทำตามขั้นตอนจากวิซาร์ดเพื่อสร้างไอคอนที่กำหนดเองสำหรับแอปพลิเคชัน
การสร้าง APK ที่รับรองแล้ว
เมื่อมีไฟล์ assetlinks
ในโดเมนและแท็ก asset_statements
ที่กำหนดค่าในแอปพลิเคชัน Android ขั้นตอนต่อไปคือการสร้างแอปที่ลงนามแล้ว ขั้นตอนสำหรับเรื่องนี้
มีการบันทึกไว้อย่างชัดเจน
คุณสามารถติดตั้ง APK เอาต์พุตในอุปกรณ์ทดสอบโดยใช้ adb:
adb install app-release.apk
หากขั้นตอนการยืนยันไม่สำเร็จ คุณสามารถตรวจหาข้อความแสดงข้อผิดพลาดโดยใช้ Android Debug Bridge จากเทอร์มินัลของระบบปฏิบัติการและอุปกรณ์ทดสอบที่เชื่อมต่ออยู่
adb logcat | grep -e OriginVerifier -e digital_asset_links
ด้วย APK การอัปโหลดที่สร้างขึ้น ตอนนี้คุณสามารถอัปโหลดแอปไปยัง Play Store ได้แล้ว
การเพิ่มหน้าจอแนะนำ
กิจกรรมบนเว็บที่เชื่อถือได้ตั้งแต่ Chrome 75 เป็นต้นไปจะรองรับหน้าจอแนะนำ คุณตั้งค่าหน้าจอแนะนำได้ด้วยการเพิ่มไฟล์ภาพและการกำหนดค่าใหม่ 2-3 รายการลงในโปรเจ็กต์
โปรดอัปเดตเป็น Chrome 75 ขึ้นไปและใช้ไลบรารีการสนับสนุนกิจกรรมบนเว็บที่เชื่อถือได้เวอร์ชันล่าสุด
การสร้างรูปภาพสำหรับหน้าจอแนะนำ
อุปกรณ์ Android อาจมีขนาดหน้าจอและความหนาแน่นของพิกเซลที่แตกต่างกัน เพื่อให้หน้าจอแนะนำดูดีบนอุปกรณ์ทุกเครื่อง คุณต้องสร้างรูปภาพสำหรับความหนาแน่นพิกเซลแต่ละพิกเซล
คำอธิบายโดยละเอียดเกี่ยวกับพิกเซลอิสระดิสเพลย์ (dp หรือ dip) อยู่นอกเหนือขอบเขตของบทความนี้ แต่ตัวอย่างหนึ่งคือการสร้างรูปภาพขนาด 320x320dp ที่แสดงขนาดสี่เหลี่ยมจัตุรัสขนาด 2x2 นิ้วบนหน้าจออุปกรณ์ที่มีความหนาแน่นเท่าใดก็ได้และเท่ากับ 320x320 พิกเซลที่ความหนาแน่น mdpi
จากตรงนั้นเราสามารถแปลงขนาดที่จำเป็นสำหรับความหนาแน่นของพิกเซลอื่นๆ ด้านล่างนี้คือรายการที่มีความหนาแน่นของพิกเซล ตัวคูณที่ใช้กับขนาดฐาน (320x320dp) ขนาดที่เป็นพิกเซล และตำแหน่งที่ควรเพิ่มรูปภาพในโปรเจ็กต์ Android Studio
ความหนาแน่น | ตัวคูณ | ขนาด | ตำแหน่งของโปรเจ็กต์ |
---|---|---|---|
mdpi (เกณฑ์พื้นฐาน) | 1.0x | 320x320 พิกเซล | /res/drawable-mdpi/ |
ldpi | 0.75x | 240x240 พิกเซล | /res/drawable-ldpi/ |
HDPI | 1.5x | 480x480 พิกเซล | /res/drawable-hdpi/ |
XHDPI | 2.0x | 640x640 พิกเซล | /res/drawable-xhdpi/ |
xxhdpi | 3.0 เท่า | 960x960 พิกเซล | /res/drawable-xxhdpi/ |
xxxhdpi | 4.0 เท่า | 1280x1280 พิกเซล | /res/drawable-xxxhdpi/ |
กำลังอัปเดตแอปพลิเคชัน
เมื่อสร้างรูปภาพสำหรับหน้าจอแนะนำแล้ว ก็ถึงเวลาเพิ่มการกำหนดค่าที่จำเป็นลงในโปรเจ็กต์
ก่อนอื่นให้เพิ่ม content-provider
ลงในไฟล์ Manifest ของ Android (AndroidManifest.xml
)
<application>
...
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="com.example.twa.myapplication.fileprovider"
android:grantUriPermissions="true"
android:exported="false">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/filepaths" />
</provider>
</application>
จากนั้นเพิ่มทรัพยากร res/xml/filepaths.xml
และระบุเส้นทางไปยังหน้าจอแนะนำของ twa ดังนี้
<paths>
<files-path path="twa_splash/" name="twa_splash" />
</paths>
สุดท้าย ให้เพิ่ม meta-tags
ลงในไฟล์ Manifest ของ Android เพื่อปรับแต่ง LauncherActivity ดังนี้
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
...
<meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
android:resource="@drawable/splash"/>
<meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
android:resource="@color/colorPrimary"/>
<meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
android:value="300"/>
<meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
android:value="com.example.twa.myapplication.fileprovider"/>
...
</activity>
ตรวจสอบว่าค่าของแท็ก android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY
ตรงกับค่าที่กำหนดไว้ของแอตทริบิวต์ android:authorities
ในแท็ก provider
การทำให้ LauncherActivity โปร่งใส
นอกจากนี้ โปรดตรวจสอบว่า LauncherActivity มีความโปร่งใสเพื่อหลีกเลี่ยงหน้าจอสีขาวที่แสดงก่อนหน้าจอเริ่มต้นโดยการตั้งค่าธีมโปร่งแสงสำหรับ LauncherActivity
<application>
...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar">
...
</activity>
</application>
เราหวังว่าจะได้เห็นสิ่งที่นักพัฒนาซอฟต์แวร์สร้างขึ้นด้วยกิจกรรมบนเว็บที่เชื่อถือได้ หากต้องการแสดงความคิดเห็น โปรดติดต่อเราที่ @ChromiumDev