เปิดใช้เป้าหมายการแชร์เว็บในกิจกรรมบนเว็บและเว็บที่เชื่อถือได้

André Cipriani Bandarra

เป้าหมายการแชร์เว็บช่วยให้ PWA รับเนื้อหาที่แชร์จากแอปพลิเคชันอื่นๆ ที่ติดตั้งในอุปกรณ์ได้ ฟีเจอร์นี้สามารถใช้ได้กับแอปพลิเคชันต่างๆ เช่น โปรแกรมแก้ไขรูปภาพเพื่อรับรูปภาพจากแอปกล้อง หรือโซเชียลเน็ตเวิร์กเพื่อรับรูปภาพหรือวิดีโอเพื่อแชร์

ตั้งแต่ Chrome 86 เป็นต้นไป เป้าหมายการแชร์เว็บจะพร้อมใช้งานสำหรับแอปพลิเคชันที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้ด้วย แม้ว่า PWA ควรทํางานได้ทันที แต่แอปพลิเคชัน Android ต้องมีการเปลี่ยนแปลงบางอย่าง

บทความนี้จะถือว่านักพัฒนาแอปคุ้นเคยกับกิจกรรมบนเว็บที่เชื่อถือได้ ผู้อ่านที่ไม่เคยใช้เทคโนโลยีมาก่อน สามารถเริ่มต้นใช้งานคู่มือการผสานรวม

ในทํานองเดียวกัน คำอธิบายทั้งหมดของการติดตั้งใช้งานเป้าหมายการแชร์เว็บใน PWA อยู่นอกขอบเขต และนักพัฒนาแอปสามารถดูข้อมูลเพิ่มเติมได้ในบทความนี้

เราจะใช้แอปพลิเคชันสาธิตที่ https://scrapbook-pwa.web.app/ เป็น PWA สำหรับบทความนี้ และซอร์สโค้ดของแอปพลิเคชันดังกล่าวมีอยู่ใน GitHub ส่วนแอปพลิเคชัน Android จะอิงตามการสาธิตกิจกรรมบนเว็บที่เชื่อถือได้แบบพื้นฐาน

เพิ่มเป้าหมายการแชร์เว็บลงในแอป Android

หากต้องการแก้ไขแอปพลิเคชันตามกิจกรรมในเว็บซึ่งเชื่อถือได้ที่มีอยู่เพื่อใช้ Web Share Target คุณต้องแก้ไขไฟล์ 3 ไฟล์ต่อไปนี้

build.gradle

ไลบรารี android-browser-helper ได้รับการอัปเดตให้รองรับเป้าหมายการแชร์ทางเว็บ ขั้นแรก ให้อัปเดตแอปพลิเคชันให้ใช้เวอร์ชันที่สูงกว่าหรือเท่ากับ 2.0.1

dependencies {
    ...
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}

res/strings.xml

แอปพลิเคชันต้องบอกรายละเอียดการแชร์ที่รองรับการรับให้กับกิจกรรมบนเว็บที่เชื่อถือได้ เช่น URL ที่ควรเปิด วิธีที่จะใช้ และประเภท MIME ที่รองรับ

ซึ่งทำได้ผ่าน JSON ที่พร้อมใช้งานสําหรับกิจกรรมในเว็บซึ่งเชื่อถือได้พร้อมทรัพยากรสตริง ช่องเหล่านี้เหมือนกับช่อง share_target ที่มีอยู่ในไฟล์ Manifest ของเว็บ และสามารถเพิ่มลงในสตริงภายใน strings.xml ได้เกือบจะเหมือนเดิม โดยมีหมายเหตุสำคัญ 2 ข้อดังนี้

1. ค่าของแอตทริบิวต์การดำเนินการต้องเป็น URL แบบเต็ม รวมถึงต้นทาง
2. ต้องหลีกเครื่องหมายคำพูดคู่เพื่อให้ " แต่ละรายการกลายเป็น \"

ส่วน share_target ของ https://scrapbook-pwa.web.app/manifest.json มีลักษณะดังนี้

{
  ...
  "share_target": {
    "action": "/_share-target",
    "enctype": "multipart/form-data",
    "method": "POST",
    "params": {
      "files": [{
        "name": "media",
        "accept": [
          "audio/*",
          "image/*",
          "video/*"
        ]
      }]
    }
  },
  ...
}

และองค์ประกอบสตริงใหม่จะมีลักษณะดังต่อไปนี้

<string name="share_target">
{
    \"action\": \"https://twa-web-scrapbook.web.app/_share-target\",
    \"method\": \"POST\",
    \"enctype\": \"multipart/form-data\",
    \"params\": {
      \"files\": [{
          \"name\": \"media\",
          \"accept\": [\"image/*\", \"audio/*\", \"video/*\"]
      }]
    }
}
</string>

AndroidManifest.xml

คุณต้องทําการเปลี่ยนแปลง 2-3 อย่างในไฟล์ Manifest ของ Android ก่อนอื่นเราต้องตรวจสอบว่ามีการประกาศ ส่งออก และเปิดใช้ DelegationService แล้ว

นักพัฒนาแอปที่สร้างแอปพลิเคชันตามการสาธิตพื้นฐานจะมีบริการรวมอยู่ด้วยอยู่แล้ว และมาร์กอัปควรอยู่ภายในแท็กแอปพลิเคชันและมีลักษณะดังต่อไปนี้

<service
    android:name="com.google.androidbrowserhelper.trusted.DelegationService"
    android:enabled="true"
    android:exported="true">

    <intent-filter>
        <action android:name="android.support.customtabs.trusted.TRUSTED_WEB_ACTIVITY_SERVICE"/>
        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>
</service>

สุดท้าย คุณต้องเพิ่มรายการใหม่ 2 รายการลงในแท็กกิจกรรม LauncherActivity ดังนี้ - แท็ก meta-data ที่อ้างอิง JSON ที่กําหนดไว้ใน strings.xml - intent-filter ที่ประกาศประเภท mime ที่แอปพลิเคชันจัดการได้สำหรับแอปอื่นๆ ในอุปกรณ์

<meta-data
    android:name="android.support.customtabs.trusted.METADATA_SHARE_TARGET"
    android:resource="@string/share_target"/>

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <action android:name="android.intent.action.SEND_MULTIPLE" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="audio/*" />
    <data android:mimeType="image/*" />
    <data android:mimeType="video/*" />
</intent-filter>

ดังที่เห็นในมาร์กอัปด้านบน คุณควรเพิ่มองค์ประกอบ data สำหรับ mime-type แต่ละรายการที่ประกาศใน share_target JSON

บทสรุป

การผสานรวม Web Share Target จะทำให้ PWA ภายในกิจกรรมบนเว็บที่เชื่อถือได้ผสานรวมกับแอปพลิเคชันอื่นๆ ที่ติดตั้งในอุปกรณ์ Android ได้ดียิ่งขึ้น

ตามที่อธิบายไว้ในขั้นตอนข้างต้น การใช้ android-browser-helper จะช่วยให้มาร์กอัปเพิ่มเติมที่จําเป็นในการเพิ่มการรองรับ API ในแอป Android ที่มีอยู่ซึ่งใช้กิจกรรมบนเว็บที่เชื่อถือได้นั้นง่ายขึ้น

อ่านบทความเกี่ยวกับเป้าหมายการแชร์เว็บเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ API ใน PWA และอ่านWeb Share API เพื่อดูวิธีแชร์เนื้อหาจาก Progressive Web App

การแก้ปัญหา

แอปพลิเคชันของฉันไม่แสดงเป็นตัวเลือกเมื่อฉันพยายามแชร์ไฟล์จากแอปพลิเคชันอื่น

หากแอปพลิเคชันไม่แสดงเป็นตัวเลือก แสดงว่า intent-filter ไม่ถูกต้อง ตรวจสอบมาร์กอัป intent-filter อีกครั้งว่ามีการดําเนินการ หมวดหมู่ และ mime-types ที่ถูกต้องซึ่งแอปพลิเคชันจัดการ

แอปพลิเคชันของฉันแสดงเป็นตัวเลือก ระบบเริ่ม PWA แล้ว แต่ไม่มีการแชร์ข้อมูล

มีสาเหตุบางประการที่ทำให้เกิดปัญหานี้ ต่อไปนี้คือเช็กลิสต์สิ่งที่ควรพิจารณา

• ตรวจสอบว่าการตรวจสอบลิงก์เนื้อหาดิจิทัลสำเร็จ
• ตรวจสอบความถูกต้องของ JSON ใน strings.xml