เผยแพร่เมื่อวันที่ 2 ธันวาคม 2020
ตั้งแต่เปิดตัวกิจกรรมในเว็บซึ่งเชื่อถือได้ ทีม Chrome ได้ทำให้กิจกรรมนี้ใช้งานกับ Bubblewrap ได้ง่ายขึ้น เราได้เพิ่มฟีเจอร์อื่นๆ เช่น การผสานรวม Google Play Billing และเปิดใช้ให้ทำงานในแพลตฟอร์มอื่นๆ ได้ เช่น ChromeOS
ฟีเจอร์ Bubblewrap และกิจกรรมในเว็บซึ่งเชื่อถือได้
Bubblewrap ช่วยคุณสร้างแอปที่เปิดใช้งาน PWA ภายในกิจกรรมในเว็บซึ่งเชื่อถือได้ โดยไม่จำเป็นต้องมีความรู้เกี่ยวกับเครื่องมือเฉพาะแพลตฟอร์ม
ขั้นตอนการตั้งค่าที่เรียบง่ายขึ้น
ก่อนหน้านี้ การใช้ Bubblewrap จำเป็นต้องตั้งค่า Java Development Kit และ Android SDK ด้วยตนเอง ซึ่งทั้ง 2 อย่างนี้มีแนวโน้มที่จะเกิดข้อผิดพลาดได้ง่าย ตอนนี้เครื่องมือจะเสนอให้ดาวน์โหลดทรัพยากรภายนอกโดยอัตโนมัติเมื่อเรียกใช้เป็นครั้งแรก
คุณยังคงเลือกใช้การติดตั้งทรัพยากร Dependency ที่มีอยู่ได้หากต้องการ และคำสั่ง doctor ใหม่จะช่วยค้นหาปัญหาและแนะนำวิธีแก้ไขการกำหนดค่า ซึ่งตอนนี้สามารถอัปเดตจากบรรทัดคำสั่งได้โดยใช้คำสั่ง updateConfig
วิซาร์ดที่ปรับปรุงใหม่
เมื่อสร้างโปรเจ็กต์ด้วย init Bubblewrap ต้องใช้ข้อมูลเพื่อสร้างแอป Android เครื่องมือจะดึงค่าจากไฟล์ Manifest ของเว็บแอปและระบุค่าเริ่มต้นหากเป็นไปได้
คุณสามารถเปลี่ยนค่าเหล่านั้นได้เมื่อสร้างโปรเจ็กต์ใหม่ แต่ก่อนหน้านี้ความหมายของแต่ละฟิลด์ไม่ชัดเจน กล่องโต้ตอบการเริ่มต้นได้รับการสร้างขึ้นใหม่พร้อมคำอธิบายและการตรวจสอบความถูกต้องที่ดีขึ้นสำหรับช่องป้อนข้อมูลแต่ละช่อง
การรองรับการแสดงผลแบบเต็มหน้าจอและการวางแนว
ในบางกรณี คุณอาจต้องการให้แอปพลิเคชันใช้พื้นที่หน้าจอให้มากที่สุด และเมื่อสร้าง PWA คุณสามารถทำได้โดยตั้งค่าช่อง display จากไฟล์ Manifest ของเว็บแอปเป็น fullscreen
เมื่อ Bubblewrap ตรวจพบตัวเลือกแบบเต็มหน้าจอในไฟล์ Manifest ของเว็บแอป ก็จะกำหนดค่าแอปพลิเคชัน Android ให้เปิดแบบเต็มหน้าจอหรือโหมดใหญ่พิเศษด้วยในแง่ของ Android โดยเฉพาะ
ช่อง orientation จากไฟล์ Manifest ของเว็บแอปจะกำหนดว่าควรเริ่มแอปพลิเคชันในโหมดแนวตั้ง โหมดแนวนอน หรือในการวางแนวที่อุปกรณ์ใช้อยู่ในปัจจุบัน ตอนนี้ Bubblewrap จะอ่านช่องไฟล์ Manifest ของเว็บแอปและใช้เป็นค่าเริ่มต้นเมื่อสร้างแอป Android
คุณปรับแต่งการกำหนดค่าทั้ง 2 แบบได้ในขั้นตอน bubblewrap init
เอาต์พุต AppBundles
App Bundle คือรูปแบบการเผยแพร่สำหรับแอปที่มอบสิทธิ์การสร้างและลงนาม APK ขั้นสุดท้ายให้กับ Play ในทางปฏิบัติ วิธีนี้จะช่วยให้ผู้ใช้ดาวน์โหลดไฟล์ขนาดเล็กลงเมื่อดาวน์โหลดแอปจาก Store
ตอนนี้ Bubblewrap จะแพ็กเกจแอปพลิเคชันเป็น App Bundle ในไฟล์ชื่อ app-release-bundle.aab คุณควรใช้รูปแบบนี้เมื่อเผยแพร่แอปไปยัง Play Store เนื่องจากเป็นรูปแบบที่ทาง Store กำหนดให้ใช้ตั้งแต่ปี 2021
การมอบสิทธิ์ตำแหน่งทางภูมิศาสตร์
ผู้ใช้คาดหวังว่าแอปพลิเคชันที่ติดตั้งในอุปกรณ์จะทำงานอย่างสอดคล้องกัน ไม่ว่าจะใช้เทคโนโลยีใดก็ตาม เมื่อใช้ภายในกิจกรรมในเว็บซึ่งเชื่อถือได้ ตอนนี้คุณสามารถมอบสิทธิ์ GeoLocation ให้กับระบบปฏิบัติการได้แล้ว และเมื่อเปิดใช้ ผู้ใช้จะเห็นกล่องโต้ตอบเดียวกับแอปที่สร้างด้วย Kotlin หรือ Java และจะเห็นการควบคุมเพื่อจัดการสิทธิ์ในที่เดียวกัน
คุณเพิ่มฟีเจอร์นี้ได้ผ่าน Bubblewrap และเนื่องจากฟีเจอร์นี้จะเพิ่มทรัพยากร Dependency เพิ่มเติมลงในโปรเจ็กต์ Android คุณจึงควรเปิดใช้เฉพาะเมื่อเว็บแอปใช้สิทธิ์ตำแหน่งทางภูมิศาสตร์เท่านั้น
ไบนารีที่เพิ่มประสิทธิภาพแล้ว
อุปกรณ์ที่มีพื้นที่เก็บข้อมูลจำกัดเป็นที่นิยมในบางพื้นที่ของโลก และเจ้าของอุปกรณ์เหล่านั้นมักจะชอบแอปพลิเคชันที่มีขนาดเล็ก แอปพลิเคชันที่ใช้กิจกรรมในเว็บซึ่งเชื่อถือได้จะสร้างไบนารีขนาดเล็ก ซึ่งช่วยลดความกังวลของผู้ใช้เหล่านั้นได้
Bubblewrap ได้รับการเพิ่มประสิทธิภาพโดยการลดรายการไลบรารี Android ที่จำเป็น ส่งผลให้ไบนารีที่สร้างขึ้นมีขนาดเล็กลง 800k ในทางปฏิบัติแล้ว ขนาดดังกล่าวมีขนาดน้อยกว่าครึ่งหนึ่งของขนาดเฉลี่ยที่สร้างโดยเวอร์ชันก่อนหน้า หากต้องการใช้ประโยชน์จากไบนารีขนาดเล็กลง คุณเพียงแค่อัปเดตแอปโดยใช้ Bubblewrap เวอร์ชันล่าสุด
วิธีอัปเดตแอปที่มีอยู่
แอปพลิเคชันที่สร้างโดย Bubblewrap ประกอบด้วยเว็บแอปพลิเคชันและ Wrapper ของ Android แบบ Lightweight ที่เปิด PWA แม้ว่า PWA ที่เปิดภายในกิจกรรมในเว็บซึ่งเชื่อถือได้จะเป็นไปตามรอบการอัปเดตเดียวกันกับเว็บแอปใดๆ แต่ Wrapper แบบเนทีฟก็สามารถและควรได้รับการอัปเดต
คุณควรอัปเดตแอปเพื่อให้แน่ใจว่าแอปใช้ Wrapper เวอร์ชันล่าสุดซึ่งมีการแก้ไขข้อบกพร่องและฟีเจอร์ล่าสุด เมื่อติดตั้ง Bubblewrap เวอร์ชันล่าสุดแล้ว คำสั่ง update จะใช้ Wrapper เวอร์ชันล่าสุดกับโปรเจ็กต์ที่มีอยู่
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
อีกเหตุผลหนึ่งในการอัปเดตแอปพลิเคชันเหล่านั้นคือเพื่อให้แน่ใจว่าการเปลี่ยนแปลงในไฟล์ Manifest ของเว็บมีผลกับแอปพลิเคชัน ใช้คำสั่ง merge ใหม่เพื่อดำเนินการดังกล่าว
bubblewrap merge
bubblewrap update
bubblewrap build
การปรับปรุงเกณฑ์คุณภาพ
Chrome 86 ได้เปิดตัวการเปลี่ยนแปลงเกณฑ์คุณภาพของกิจกรรมในเว็บซึ่งเชื่อถือได้ ซึ่งอธิบายไว้อย่างละเอียดในการเปลี่ยนแปลงเกณฑ์คุณภาพสำหรับ PWA ที่ใช้กิจกรรมในเว็บซึ่งเชื่อถือได้
สรุปสั้นๆ คือคุณควรตรวจสอบว่าแอปพลิเคชันของคุณจัดการกับสถานการณ์ต่อไปนี้เพื่อป้องกันไม่ให้แอปขัดข้อง
- ยืนยันลิงก์เนื้อหาดิจิทัลไม่สำเร็จเมื่อเปิดแอปพลิเคชัน
- ไม่สามารถแสดงผล HTTP 200 สำหรับคำขอทรัพยากรเครือข่ายแบบออฟไลน์
- การแสดงข้อผิดพลาด HTTP 404 หรือ 5xx ในแอปพลิเคชัน
นอกจากการตรวจสอบว่าแอปพลิเคชันผ่านการตรวจสอบความถูกต้องของ Digital Asset Links แล้ว Service Worker ยังจัดการสถานการณ์ที่เหลือได้ด้วย ดังนี้
self.addEventListener('fetch', event => {
event.respondWith((async () => {
try {
return await fetchAndHandleError(event.request);
} catch {
// Failed to load from the network. User is offline or the response
// has a status code that triggers the Quality Criteria.
// Try loading from cache.
const cachedResponse = await caches.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
// Response was not found on the cache. Send the error / offline
// page. OFFLINE_PAGE should be pre-cached when the service worker
// is activated.
return await caches.match(OFFLINE_PAGE);
}
})());
});
async function fetchAndHandleError(request) {
const cache = await caches.open(RUNTIME_CACHE);
const response = await fetch(request);
// Throw an error if the response returns one of the status
// that trigger the Quality Criteria.
if (response.status === 404 ||
response.status >= 500 && response.status < 600) {
throw new Error(`Server responded with status: ${response.status}`);
}
// Cache the response if the request is successful.
cache.put(request, response.clone());
return response;
}
Workbox มีแนวทางปฏิบัติแนะนำและนำต้นแบบออกเมื่อใช้ Service Worker หรือลองใช้ปลั๊กอิน Workbox เพื่อจัดการสถานการณ์เหล่านั้น ดังนี้
export class FallbackOnErrorPlugin {
constructor(offlineFallbackUrl, notFoundFallbackUrl, serverErrorFallbackUrl) {
this.notFoundFallbackUrl = notFoundFallbackUrl;
this.offlineFallbackUrl = offlineFallbackUrl;
this.serverErrorFallbackUrl = serverErrorFallbackUrl;
}
checkTrustedWebActivityCrash(response) {
if (response.status === 404 || response.status >= 500 && response.status <= 600) {
const type = response.status === 404 ? 'E_NOT_FOUND' : 'E_SERVER_ERROR';
const error = new Error(`Invalid response status (${response.status})`);
error.type = type;
throw error;
}
}
// This is called whenever there's a network response,
// but we want special behavior for 404 and 5**.
fetchDidSucceed({response}) {
// Cause a crash if this is a Trusted Web Activity crash.
this.checkTrustedWebActivityCrash(response);
// If it's a good response, it can be used as-is.
return response;
}
// This callback is new in Workbox v6, and is triggered whenever
// an error (including a NetworkError) is thrown when a handler runs.
handlerDidError(details) {
let fallbackURL;
switch (details.error.details.error.type) {
case 'E_NOT_FOUND': fallbackURL = this.notFoundFallbackUrl; break;
case 'E_SERVER_ERROR': fallbackURL = this.serverErrorFallbackUrl; break;
default: fallbackURL = this.offlineFallbackUrl;
}
return caches.match(fallbackURL, {
// Use ignoreSearch as a shortcut to work with precached URLs
// that have _WB_REVISION parameters.
ignoreSearch: true,
});
}
}