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

อันเดร ซิปรีอานี่ บันดาร์ร่า

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

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

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

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

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

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

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

ส่วน 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

ต้องการการเปลี่ยนแปลงบางอย่างในไฟล์ 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 ที่กำหนดไว้ในstring.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 ได้อย่างแนบเนียนยิ่งขึ้น

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

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

การแก้ปัญหา

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

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

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

มีสาเหตุ 2-3 ประการที่ทำให้เกิดเหตุการณ์นี้ได้ ต่อไปนี้คือรายการตรวจสอบของสิ่งที่ควรพิจารณา

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