วิธีแก้ TypeError: Failed to fetch ใน Line LIFF บน Android

ผมมีแอพพลิเคชั่นตัวนึงที่พัฒนาโดยใช้ Line Liff SDK เพื่อทำการ Auth user กับ Line และใช้ function อื่นๆของ Liff

แต่อยู่ดีๆก็มี user จำนวนนึงที่ใช้ Android แจ้งว่าไม่สามารถเข้าใช้งานได้ และเมื่อตรวจสอบก็เจอว่ามี error throw มาว่า TypeError: Failed to fetch จาก function liff.init()

ที่แปลกก็คือถ้า user ใช้งานบนเครื่อง Android เดียวกัน แต่ใช้จาก browser ข้างนอกแอพไลน์ ก็จะสามารถเข้าใช้งานได้ปกติ และถ้า user ทำการ clear cache ในไลน์ก็จะสามารถเข้าใช้งานผ่าน browser ในไลน์ได้ช่วงเวลานึง (ผ่านลิงค์ Liff)

และเมื่อไปตรวจสอบเพิ่มเติมก็พบว่า error นั้นเกิดจากการที่ liff.init() พยายามจะไป fetch json ลิงค์นี้ https://liffsdk.line-scdn.net/xlt/manifest.json แต่ว่าไม่สามารถทำได้

ที่ผมเข้าใจคือลิงค์นี้เป็นไฟล์ที่บอกว่าควรจะดึง translation json จากที่ไหน ซึ่งถ้าสมมุติคุณใช้ภาษาไทย มันก็จะไปโหลดไฟล์ translation ตัวนี้ต่อ https://liffsdk.line-scdn.net/xlt/messages_th.7afa9cb30405f1251edecc41476e5f74.json

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

ผมเดาว่า เกิดจากการจัดการ caching แปลกๆที่อยู่ใน WebView ที่ฝังอยู่ในแอพ Line บน Android และ WebView นั้นไม่สามารถไปโหลดไฟล์จาก cache ได้เมื่อเวลาผ่านไปสักพัก ย้ำว่าเดาล้วนๆ อาจจะไม่ถูกประเด็นเลย เพราะไม่ได้เอา Android มา debug ด้วยซ้ำ

หนึ่งในวิธีแก้ที่ง่ายที่สุดวิธีนึง ที่ผมได้มาจากคุณ Somsak จากใน Line Developer FB Group ก็คือให้มันไม่โดน cache ไปเลย โดยเติม random query string ต่อท้าย url json 2 อันนั้น 😂

ในเมื่อ Liff package ใช้ fetch API ของ browser ในการโหลดไฟล์ json สองอันนั้น เราก็ override fetch ใน browser มันซะเลย ว่าถ้าเจอ url ที่เป็น json และ url เป็นอันที่เราสนใจ ก็ให้เติม random number ต่อท้ายไป

const originalFetch = window.fetch
function customFetch(url: RequestInfo | URL, options?: RequestInit): Promise<Response> {
if (url.toString().startsWith('https://liffsdk.line-scdn.net/xlt/') && url.toString().endsWith('.json')) {
    url = url + '?ts=' + Math.random()
}
return originalFetch(url, options)
}
window.fetch = customFetch

เอาโค้ดด้านบนไปแปะสักตรงนึงของแอพ ก่อนที่จะ call liff.init() แค่นี้แอพพลิเคชั่นของคุณก็จะกลับมาใช้งานบน Android ได้แล้ว

เหมือนว่าปัญหานี้เกิดขึ้นมาสักพักแล้ว ดูจากโพสคุณ Somsak ก็ตั้งแต่เดือน 6 ปี 2023 และเมื่อไม่กี่วันก่อนก็มีคนโพสในกลุ่มเดียวกันว่าเจอปัญหาแบบนี้ คงต้องรอให้ไลน์อัพเดทแอพพลิเคชั่นใน Android ให้แก้ปัญหานี้หรือว่าแก้ตัว CDN เราถึงจะเอาโค้ดด้านบนออกได้จากแอพพลิเคชั่นของเราได้