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

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

บทสรุป

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

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

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

การแก้ปัญหา

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

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

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

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

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