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

André Cipriani Bandarra

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

ตั้งแต่ Chrome 86 เป็นต้นไป ตอนนี้ Web Share Target พร้อมให้บริการแก่แอปพลิเคชันที่ใช้ Trusted Web Activity แล้ว แม้ว่า 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://googlechrome.github.io/samples/scrapbook-pwa/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 อย่างใน Android Manifest ก่อนอื่น เราต้องตรวจสอบว่ามีการประกาศ ส่งออก และเปิดใช้ 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 ที่ประกาศไว้ ใน JSON ของ 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