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

André Cipriani Bandarra

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

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

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

ในทำนองเดียวกัน คำอธิบายแบบเต็มของการใช้ Web Share Target ใน PWA ก็อยู่ภายนอก และนักพัฒนาซอฟต์แวร์จะดูข้อมูลเพิ่มเติมได้จากบทความนี้

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

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

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

build.gradle

ไลบรารี android-browser-helper ได้รับการอัปเดตให้รองรับ Web Share Target เพื่อ ขั้นแรก ให้อัปเดตแอปพลิเคชันให้ใช้เวอร์ชันที่สูงกว่าหรือเท่ากับ 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 รายการในไฟล์ 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 ที่กำหนดไว้ในสตริง .xml - intent-filter ที่ประกาศว่าแอปพลิเคชันประเภท MIME สามารถจัดการกับประเภท 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

บทสรุป

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

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

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

การแก้ปัญหา

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

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

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

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

• ตรวจสอบว่าการตรวจสอบลิงก์เนื้อหาดิจิทัล (Digital Asset Links) เสร็จสมบูรณ์
• โปรดตรวจสอบความถูกต้องของ JSON ภายใน string.xml