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