เผยแพร่: 2 ธันวาคม 2020
นับตั้งแต่เปิดตัวกิจกรรมบนเว็บที่เชื่อถือได้ ทีม Chrome ได้ทำให้การใช้งาน Bubblewrap ง่ายขึ้น เราได้เพิ่มฟีเจอร์อื่นๆ เช่น การผสานรวมการเรียกเก็บเงินของ Google Play และทำให้แอปทำงานได้บนแพลตฟอร์มอื่นๆ มากขึ้น เช่น 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
การมอบสิทธิ์ตำแหน่งทางภูมิศาสตร์
ผู้ใช้คาดหวังให้แอปพลิเคชันที่ติดตั้งในอุปกรณ์ทำงานอย่างสม่ำเสมอ ไม่ว่าจะใช้เทคโนโลยีใดก็ตาม เมื่อใช้ภายในกิจกรรมบนเว็บที่เชื่อถือได้ ตอนนี้คุณจะสามารถมอบสิทธิ์ตำแหน่งทางภูมิศาสตร์ให้กับระบบปฏิบัติการได้แล้ว และเมื่อเปิดใช้ ผู้ใช้จะเห็นกล่องโต้ตอบเดียวกับแอปที่สร้างด้วย Kotlin หรือ Java และพบตัวควบคุมสำหรับจัดการสิทธิ์ในที่เดียวกัน
คุณสามารถเพิ่มฟีเจอร์นี้ผ่าน Bubblewrap และเนื่องจากฟีเจอร์นี้จะเพิ่มการพึ่งพาเพิ่มเติมลงในโปรเจ็กต์ Android คุณจึงควรเปิดใช้เฉพาะเมื่อเว็บแอปใช้สิทธิ์เข้าถึงตำแหน่งทางภูมิศาสตร์เท่านั้น
ไบนารีที่เพิ่มประสิทธิภาพ
อุปกรณ์ที่มีพื้นที่เก็บข้อมูลจำกัดมีการใช้งานกันทั่วไปในบางพื้นที่และเจ้าของอุปกรณ์เหล่านั้นมักชอบแอปพลิเคชันขนาดเล็กกว่า แอปพลิเคชันที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้จะสร้างไฟล์ไบนารีขนาดเล็ก ซึ่งช่วยลดความกังวลของผู้ใช้เหล่านั้นได้
Bubblewrap ได้รับการปรับประสิทธิภาพโดยการลดรายการไลบรารี Android ที่จำเป็น ซึ่งส่งผลให้ไฟล์ไบนารีที่สร้างขึ้นมีขนาดเล็กลง 800 KB ในทางปฏิบัติ ไฟล์มีขนาดน้อยกว่าครึ่งหนึ่งของขนาดเฉลี่ยที่สร้างขึ้นโดยเวอร์ชันก่อนหน้า หากต้องการใช้ประโยชน์จากไบนารีขนาดเล็กลง คุณเพียงแค่อัปเดตแอปโดยใช้ Bubblewrap เวอร์ชันล่าสุด
วิธีอัปเดตแอปที่มีอยู่
แอปพลิเคชันที่ Bubblewrap สร้างขึ้นประกอบด้วยเว็บแอปพลิเคชันและรันไทม์ Android น้ำหนักเบาที่เปิด 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 ในแอปพลิเคชัน
นอกจากการตรวจสอบว่าแอปพลิเคชันผ่านการตรวจสอบลิงก์เนื้อหาดิจิทัลแล้ว เวิร์กเกอร์บริการยังจัดการสถานการณ์ที่เหลือได้ ดังนี้
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,
});
}
}