เป้าหมายการแชร์เว็บช่วยให้ 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 ประการดังนี้
- ค่าของแอตทริบิวต์การดำเนินการต้องเป็น URL แบบเต็มซึ่งมีต้นทางด้วย
- ต้องกำหนดเครื่องหมายคำพูดแบบ 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