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

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

André Cipriani Bandarra

Twitter GitHub Glitch Mastodon หน้าแรก

นักพัฒนาซอฟต์แวร์ไม่จำเป็นต้องเขียนโค้ด 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