หน้านี้ได้รับการแปลโดย Cloud Translation API

คู่มือการผสานรวม

André Cipriani Bandarra

การตั้งค่ากิจกรรมในเว็บที่เชื่อถือได้ไม่ได้กำหนดให้นักพัฒนาแอปต้องเขียน แต่ Android Studio เป็นโค้ด Java ต้องระบุ คู่มือนี้สร้างขึ้นโดยใช้ 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 แล้วคลิกเสร็จสิ้น

รับไลบรารีการสนับสนุนกิจกรรมบนเว็บที่เชื่อถือได้

คุณจะต้องแก้ไขแอปพลิเคชันเพื่อตั้งค่าไลบรารีกิจกรรมบนเว็บที่เชื่อถือได้ในโปรเจ็กต์ ไฟล์บิลด์ ค้นหาส่วนสคริปต์ Gradle ใน Project Navigator มีไฟล์ 2 ไฟล์ที่ชื่อว่า build.gradle ซึ่งอาจจะสับสนเล็กน้อยและ คำอธิบายต่างๆ ในวงเล็บจะช่วยระบุข้อที่ถูกต้อง

ไฟล์ที่เรากำลังมองหาคือไฟล์ที่มีโมดูล Module อยู่ข้างๆ ชื่อ

ไลบรารีกิจกรรมบนเว็บที่เชื่อถือได้ใช้ ฟีเจอร์ของ Java 8 และการเปลี่ยนแปลงแรกจะเปิดใช้ Java 8 เพิ่มส่วน compileOptions ไปยัง ด้านล่างของส่วน android ดังต่อไปนี้

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

ขั้นตอนต่อไปจะเพิ่มไลบรารีการสนับสนุนกิจกรรมบนเว็บที่เชื่อถือได้ลงในโปรเจ็กต์ เพิ่มใหม่ ขึ้นกับส่วน 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 ออก

การเชื่อมโยงนี้สร้างผ่าน ลิงก์เนื้อหาดิจิทัล และการเชื่อมโยงต้องได้รับการจัดตั้งขึ้นทั้ง 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 ค้นหา สำหรับรายการเปิดใช้บรรทัดคำสั่งในอุปกรณ์ที่ไม่ได้รูท แล้วเปลี่ยน เป็น Enabled จากนั้นรีสตาร์ทเบราว์เซอร์
ถัดไป ในแอปพลิเคชันเทอร์มินัลของระบบปฏิบัติการ ให้ใช้ 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 > Build.gradle (โมดูล: app) และเป็นค่าของ applicationId
ลายนิ้วมือ SHA-256: ต้องลงชื่อเข้าใช้แอปพลิเคชัน Android จึงจะ มีการอัปโหลดไปยัง Play Store ลายเซ็นเดียวกันนี้ยังใช้ในการสร้าง การเชื่อมต่อระหว่างเว็บไซต์กับแอปผ่านลายนิ้วมือ SHA-256 ของ คีย์การอัปโหลด

เอกสารประกอบของ Android อธิบายวิธีสร้างคีย์โดยใช้ Android Studio โดยละเอียด อย่าลืมจดเส้นทาง ชื่อแทน และรหัสผ่านสำหรับแหล่งเก็บคีย์ เป็น คุณจะต้องใช้คีย์นี้สำหรับขั้นตอนถัดไป

แยกลายนิ้วมือ SHA-256 โดยใช้ เครื่องมือคีย์ ด้วยคำสั่งต่อไปนี้

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

เมื่อมีข้อมูลทั้งสองแล้ว ให้ไปที่เครื่องมือสร้าง 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 เป็นต้นไป ทั้งนี้ คุณสามารถตั้งค่าหน้าจอเริ่มต้นได้ด้วยการเพิ่มไฟล์ภาพใหม่และการกำหนดค่าลงในไฟล์

ตรวจสอบว่าคุณอัปเดตเป็น 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 ลงใน Android Manifest (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

การทำให้กิจกรรม Launcher มีความโปร่งใส

รวมทั้งตรวจสอบว่า LauncherActivity โปร่งใสเพื่อหลีกเลี่ยงหน้าจอสีขาว แสดงก่อนเริ่มหน้าจอโดยการตั้งค่าธีมโปร่งแสงสำหรับกิจกรรม Launcher ดังนี้

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

เราหวังว่าจะได้เห็นว่านักพัฒนาซอฟต์แวร์สร้างอะไรด้วยเว็บที่เชื่อถือได้ กิจกรรม หากต้องการแสดงความคิดเห็น โปรดติดต่อเราที่ @ChromiumDev