แก้ไขข้อบกพร่อง Progressive Web App

Kayce Basques

Sofia Emelianova

ใช้แผงแอปพลิเคชัน เพื่อตรวจสอบ แก้ไข และแก้ไขข้อบกพร่องของไฟล์ Manifest ของเว็บแอป, Service Worker และแคชของ Service Worker

Progressive Web App (PWA) เป็นแอปพลิเคชันคุณภาพสูงที่ทันสมัยซึ่งสร้างขึ้นโดยใช้เทคโนโลยีเว็บ PWA มีความสามารถคล้ายกับแอป iOS, Android และเดสก์ท็อป โดยมีลักษณะดังนี้

• เชื่อถือได้แม้ในสภาพเครือข่ายที่ไม่เสถียร
• ติดตั้งได้เพื่อเปิดใช้พื้นที่แสดงผลของระบบปฏิบัติการ เช่น โฟลเดอร์แอปพลิเคชัน ใน Mac OS X, เมนูเริ่ม ใน Windows และหน้าจอหลักใน Android และ iOS
• ปรากฏในตัวสลับกิจกรรม, เครื่องมือค้นหาของอุปกรณ์ เช่น Spotlight และในชีตการแชร์เนื้อหา

คู่มือนี้จะกล่าวถึงเฉพาะฟีเจอร์ Progressive Web App ของแผงแอปพลิเคชัน หากคุณ กำลังมองหาความช่วยเหลือเกี่ยวกับบานหน้าต่างอื่นๆ โปรดดูส่วนสุดท้ายของคู่มือนี้ ซึ่งก็คือคู่มือแผงแอปพลิเคชันอื่นๆ

สรุป

• ใช้แท็บ Manifest เพื่อตรวจสอบไฟล์ Manifest ของเว็บแอป
• ใช้แท็บ Service Worker สำหรับงานที่เกี่ยวข้องกับ Service Worker ทั้งหมด เช่น การยกเลิกการลงทะเบียนหรืออัปเดตบริการ การจำลองเหตุการณ์ Push การเปลี่ยนเป็นออฟไลน์ หรือการหยุด Service Worker
• ดูแคชของ Service Worker ได้จากแท็บ Cache Storage
• ยกเลิกการลงทะเบียน Service Worker และล้างพื้นที่เก็บข้อมูลและแคชทั้งหมดด้วยการคลิกปุ่มเพียงครั้งเดียวจากแท็บ Clear Storage

ไฟล์ Manifest ของเว็บแอป

หากต้องการให้ผู้ใช้เพิ่มแอปของคุณลงในโฟลเดอร์แอปพลิเคชัน ใน Mac OS X, เมนูเริ่ม ใน Windows และหน้าจอหลักใน Android และ iOS ได้ คุณต้องมีไฟล์ Manifest ของเว็บแอป ไฟล์ Manifest จะกำหนดลักษณะที่แอปปรากฏบนหน้าจอหลัก ตำแหน่งที่จะนำผู้ใช้ไปเมื่อเปิดแอปจากหน้าจอหลัก และลักษณะของแอปเมื่อเปิดใช้งาน

เมื่อตั้งค่าไฟล์ Manifest แล้ว คุณจะใช้แท็บ Manifest ของแผงแอปพลิเคชัน เพื่อตรวจสอบไฟล์ดังกล่าวได้

• หากต้องการดูซอร์สของไฟล์ Manifest ให้คลิกลิงก์ใต้ป้ายกำกับ App Manifest (manifest.webmanifest ในภาพหน้าจอด้านบน)
• ส่วนข้อมูลประจำตัว และการนำเสนอ จะแสดงช่องจากซอร์สของไฟล์ Manifest ในรูปแบบที่ใช้งานง่ายขึ้น
• ส่วนตัวแฮนเดิลโปรโตคอล ช่วยให้คุณทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL ของ PWA ได้ด้วยการคลิกปุ่ม ดูข้อมูลเพิ่มเติมได้ที่หัวข้อทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL
• ส่วนIcons จะแสดงไอคอนทุกรายการที่คุณระบุไว้และช่วยให้คุณตรวจสอบมาสก์ของไอคอนเหล่านั้นได้
• ส่วนชุดทางลัด #N จะแสดงข้อมูลเกี่ยวกับออบเจ็กต์ทางลัดทั้งหมด
• ส่วนชุดภาพหน้าจอ #N จะแสดงภาพหน้าจอสำหรับ UI การติดตั้งที่สมบูรณ์ยิ่งขึ้นของแอป

นอกจากนี้ หาก DevTools พบข้อผิดพลาด เช่น ไอคอนที่โหลดไม่ได้ แท็บ Manifest จะแสดงส่วนความสามารถในการติดตั้ง ซึ่งอธิบายข้อผิดพลาด

ดูและตรวจสอบไอคอนที่มาสก์ได้

ส่วนไอคอน ของแท็บ Manifest จะแสดงไอคอนทั้งหมดของแอปพลิเคชัน ในส่วนนี้ คุณยังสามารถตรวจสอบพื้นที่ปลอดภัยสำหรับ ไอคอนที่มาสก์ได้ ซึ่งเป็นรูปแบบของไอคอนที่ปรับให้เข้ากับแพลตฟอร์ม

หากต้องการตัดไอคอนเพื่อให้เห็นเฉพาะพื้นที่ปลอดภัยขั้นต่ำ ให้เลือก แสดงเฉพาะพื้นที่ปลอดภัยขั้นต่ำสำหรับไอคอนที่มาสก์ได้

หากโลโก้ทั้งหมดของคุณปรากฏในพื้นที่ปลอดภัย แสดงว่าคุณพร้อมใช้งานแล้ว

เรียกใช้การติดตั้ง

Chrome ช่วยให้คุณเปิดใช้และโปรโมตการติดตั้ง PWA ได้โดยตรงภายในอินเทอร์เฟซผู้ใช้ ดูวิธีมอบประสบการณ์การติดตั้งในแอปของคุณเอง

วิธีเรียกใช้โฟลว์การติดตั้ง PWA

1. เปิดหน้า Landing Page ของ PWA ใน Chrome

2. คลิก ติดตั้ง ทางด้านขวาของแถบที่อยู่ด้านบน

   

3. ทำตามวิธีการบนหน้าจอ

ประเด็นสำคัญ: เปิดลิ้นชักคอนโซล ไว้เมื่อเรียกใช้การติดตั้ง คอนโซล จะแจ้งให้คุณทราบหากไฟล์ Manifest มีปัญหาและบันทึกข้อมูลอื่นๆ เกี่ยวกับวงจรการติดตั้ง

ฟีเจอร์ติดตั้งแอป (หรือเพิ่มลงในหน้าจอหลัก ในอุปกรณ์บางเครื่อง) ไม่สามารถจำลองเวิร์กโฟลว์สำหรับอุปกรณ์เคลื่อนที่ได้ โปรดสังเกตว่า เบราว์เซอร์ Chrome บนเดสก์ท็อปจะแสดงปุ่มติดตั้งในแถบที่อยู่ แม้ว่า DevTools จะอยู่ใน โหมดอุปกรณ์ก็ตาม อย่างไรก็ตาม หากคุณเพิ่มแอปลงในเดสก์ท็อปได้สำเร็จ แอปก็จะทำงานในอุปกรณ์เคลื่อนที่ด้วย

หากต้องการทดสอบประสบการณ์การใช้งานอุปกรณ์เคลื่อนที่จริง คุณสามารถเชื่อมต่ออุปกรณ์เคลื่อนที่จริงกับ DevTools ผ่าน การแก้ไขข้อบกพร่องระยะไกล หากต้องการเรียกใช้การติดตั้งในอุปกรณ์เคลื่อนที่ที่เชื่อมต่อ ให้เปิดเมนู 3 จุด แล้วคลิก ติดตั้งแอป (หรือ เพิ่มลงในหน้าจอหลัก)

ตรวจสอบทางลัด

ทางลัดของแอปช่วยให้คุณเข้าถึงการดำเนินการทั่วไป 2-3 อย่างที่ผู้ใช้ต้องการบ่อยๆ ได้อย่างรวดเร็ว

หากต้องการตรวจสอบทางลัดที่คุณกำหนดไว้ในไฟล์ Manifest ให้เลื่อนไปที่ส่วน ทางลัด #N ของแท็บ Manifest

หมายเหตุ: หมายเหตุ: ภาพหน้าจอนี้มาจากหน้าเดโมนี้ ดูตัวอย่างเพิ่มเติม

ตรวจสอบภาพหน้าจอสำหรับ UI การติดตั้งที่สมบูรณ์ยิ่งขึ้น

เมื่อคุณเพิ่มคำอธิบายและชุดภาพหน้าจอลงในไฟล์ Manifest แอปของคุณจะมีกล่องโต้ตอบการติดตั้งที่สมบูรณ์ยิ่งขึ้น

หากต้องการตรวจสอบภาพหน้าจอ ให้เลื่อนไปที่ส่วนภาพหน้าจอ #N ของแท็บ Manifest

ทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL

PWA สามารถจัดการลิงก์ที่ใช้โปรโตคอลที่เฉพาะเจาะจงเพื่อประสบการณ์การใช้งานที่ผสานรวมมากขึ้น ดูวิธีสร้างตัวแฮนเดิลได้ที่หัวข้อการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สำหรับ PWA

วิธีทดสอบตัวแฮนเดิล

1. เปิด DevTools ในหน้า Landing Page ของ PWA เช่น ลองดู PWA เดโมนี้
2. จากหน้าเดโม ให้ติดตั้ง PWA แล้วโหลดแอปซ้ำหลังการติดตั้ง ตอนนี้เบราว์เซอร์ได้ลงทะเบียน PWA เป็นตัวแฮนเดิลสำหรับโปรโตคอล web+coffee แล้ว
3. ในส่วนแอปพลิเคชัน > Manifest > ตัวแฮนเดิลโปรโตคอล ให้ป้อน URL ที่ต้องการให้ตัวแฮนเดิลทดสอบ แล้วคลิกทดสอบโปรโตคอล ในตัวอย่างนี้ ตัวแฮนเดิลสามารถประมวลผล americano, chai และ latte-macchiato ได้
4. เมื่อ Chrome ถามว่าเปิดแอปได้ไหม ให้ยืนยันโดยคลิกเปิดตัวแฮนเดิลโปรโตคอล
5. ในกล่องโต้ตอบถัดไป ให้แอปจัดการลิงก์ web+coffee

หากตัวแฮนเดิลประมวลผลลิงก์ได้สำเร็จ คุณจะเห็นรูปถ้วยกาแฟที่เปิดอยู่ในแอป

Service Worker

Service Worker เป็นเทคโนโลยีพื้นฐานในแพลตฟอร์มเว็บในอนาคต โดยเป็นสคริปต์ที่เบราว์เซอร์เรียกใช้ในเบื้องหลังแยกจากหน้าเว็บ สคริปต์เหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ที่ไม่จำเป็นต้องมีหน้าเว็บหรือการโต้ตอบของผู้ใช้ เช่น ข้อความ Push, การซิงค์เบื้องหลัง และประสบการณ์การใช้งานแบบออฟไลน์

คู่มือที่เกี่ยวข้อง

• ข้อมูลเบื้องต้นเกี่ยวกับ Service Worker
• ข้อความ Push: ทันเวลา เกี่ยวข้อง และแม่นยำ

แท็บ Service Worker ในแผงแอปพลิเคชัน เป็นตำแหน่งหลักใน DevTools สำหรับตรวจสอบและแก้ไขข้อบกพร่องของ Service Worker

• หากมีการติดตั้ง Service Worker ในหน้าที่เปิดอยู่ คุณจะเห็น Service Worker แสดงอยู่ในแท็บนี้ ตัวอย่างเช่น ในภาพหน้าจอด้านบน มีการติดตั้ง Service Worker สำหรับขอบเขต https://airhorner.com/
• ช่องทำเครื่องหมาย ออฟไลน์ จะเปลี่ยน DevTools เป็นโหมดออฟไลน์ ซึ่งเทียบเท่ากับโหมดออฟไลน์ ที่ใช้ได้จากแผงเครือข่าย หรือตัวเลือก Go offline ในเมนูคำสั่ง
• ช่องทำเครื่องหมาย อัปเดตเมื่อโหลดซ้ำ จะบังคับให้ Service Worker อัปเดตทุกครั้งที่การโหลดหน้าเว็บ
• ช่องทำเครื่องหมาย ข้ามสำหรับเครือข่าย จะข้าม Service Worker และบังคับให้เบราว์เซอร์ไปที่ เครือข่ายเพื่อขอทรัพยากร
• ลิงก์คำขอเครือข่าย จะนำคุณไปยังแผงเครือข่าย พร้อมรายการคำขอที่ถูกดักจับซึ่งเกี่ยวข้องกับ Service Worker (ตัวกรอง is:service-worker-intercepted)
• ลิงก์อัปเดต จะทำการอัปเดต Service Worker ที่ระบุเพียงครั้งเดียว
• ปุ่ม Push จะจำลองข้อความ Push ที่ไม่มีเพย์โหลด (หรือที่เรียกว่าการ กระตุ้น)
• ปุ่ม Sync จะจำลองเหตุการณ์การซิงค์เบื้องหลัง
• ลิงก์ยกเลิกการลงทะเบียน จะยกเลิกการลงทะเบียน Service Worker ที่ระบุ ดูหัวข้อ ล้างพื้นที่เก็บข้อมูล เพื่อดูวิธียกเลิกการลงทะเบียน Service Worker และล้างพื้นที่เก็บข้อมูลและแคชด้วยการคลิกปุ่มเพียงครั้งเดียว
• บรรทัดซอร์ส จะบอกคุณว่ามีการติดตั้ง Service Worker ที่กำลังทำงานอยู่เมื่อใด ลิงก์คือชื่อไฟล์ซอร์สของ Service Worker การคลิกลิงก์จะนำคุณไปยังซอร์สของ Service Worker
• บรรทัดสถานะ จะบอกสถานะของ Service Worker ตัวเลขในบรรทัดนี้ (#16 ในภาพหน้าจอ) จะระบุจำนวนครั้งที่ Service Worker ได้รับการอัปเดต หากคุณเลือกช่องทำเครื่องหมาย อัปเดตเมื่อโหลดซ้ำ คุณจะเห็นว่าตัวเลขเพิ่มขึ้นทุกครั้งที่การโหลดหน้าเว็บ ข้างสถานะ คุณจะเห็นลิงก์เริ่ม (หาก Service Worker หยุดทำงาน) หรือลิงก์หยุด (หาก Service Worker กำลังทำงาน) Service Worker ได้รับการออกแบบมาให้เบราว์เซอร์หยุดและเริ่มทำงานได้ทุกเมื่อ การหยุด Service Worker อย่างชัดเจนโดยใช้ลิงก์หยุด จะจำลองการทำงานดังกล่าวได้ การหยุด Service Worker เป็นวิธีที่ยอดเยี่ยมในการทดสอบลักษณะการทำงานของโค้ดเมื่อ Service Worker เริ่มทำงานอีกครั้ง ซึ่งมักจะเผยให้เห็นข้อบกพร่องเนื่องจากสมมติฐานที่ไม่ถูกต้องเกี่ยวกับสถานะส่วนกลางที่คงอยู่
• บรรทัดไคลเอ็นต์ จะบอกต้นทางที่ Service Worker มีขอบเขต ปุ่มโฟกัส มีประโยชน์มากที่สุดเมื่อคุณมี Service Worker ที่ลงทะเบียนไว้หลายรายการ หากคุณคลิกปุ่มโฟกัส ข้าง Service Worker ที่กำลังทำงานอยู่ในแท็บอื่น Chrome จะโฟกัสที่แท็บนั้น

• ตารางรอบการอัปเดต จะแสดงกิจกรรมของ Service Worker และเวลาที่ผ่านไป เช่น การติดตั้ง การรอ และการเปิดใช้งาน หากต้องการดูการประทับเวลาที่แน่นอนของแต่ละกิจกรรม ให้คลิกปุ่ม ขยาย

  

  ดูข้อมูลเพิ่มเติมได้ที่หัวข้อวงจรการทำงานของ Service Worker

หาก Service Worker ทำให้เกิดข้อผิดพลาด แท็บ Service Worker จะแสดงไอคอน ข้อผิดพลาด พร้อมจำนวนข้อผิดพลาดข้างบรรทัดซอร์ส ลิงก์ที่มีตัวเลขจะนำคุณไปยังคอนโซล พร้อมข้อผิดพลาดที่บันทึกไว้ทั้งหมด

หากต้องการดูข้อมูลเกี่ยวกับ Service Worker ทั้งหมด ให้คลิกดูการลงทะเบียนทั้งหมด ที่ด้านล่างของแท็บ Service Worker ลิงก์นี้จะนำคุณไปยัง chrome://serviceworker-internals/?devtools ซึ่งคุณสามารถแก้ไขข้อบกพร่องของ Service Worker เพิ่มเติมได้

แคชของ Service Worker

แท็บ Cache Storage จะแสดงรายการแบบอ่านอย่างเดียวของทรัพยากรที่แคชไว้โดยใช้ Cache API(Service Worker)

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

หากคุณเปิดแคชไว้ 2 รายการขึ้นไป คุณจะเห็นแคชเหล่านั้นแสดงอยู่ใต้เมนูแบบเลื่อนลง Cache Storage

การใช้โควต้า

การตอบสนองบางอย่างในแท็บ Cache Storage อาจมีการติดแฟล็กเป็น "ทึบแสง" ซึ่งหมายถึง การตอบสนองที่ดึงมาจากต้นทางอื่น เช่น จาก CDN หรือ API ระยะไกล เมื่อ CORS ไม่ได้เปิดใช้

เพื่อหลีกเลี่ยงการรั่วไหลของข้อมูลข้ามโดเมน ระบบจึงเพิ่มระยะห่างที่สำคัญลงในขนาด ของการตอบสนองแบบทึบแสงที่ใช้ในการคำนวณขีดจำกัดโควต้าพื้นที่เก็บข้อมูล (เช่น มีการส่งข้อยกเว้น QuotaExceeded หรือไม่) และ navigator.storage จะรายงาน

รายละเอียดของระยะห่างนี้จะแตกต่างกันไปในแต่ละเบราว์เซอร์ แต่สำหรับ Google Chrome หมายความว่าขนาด ขั้นต่ำ ที่การตอบสนองแบบทึบแสงที่แคชไว้รายการเดียวมีส่วนทำให้เกิดการใช้พื้นที่เก็บข้อมูลโดยรวมคือ ประมาณ 7 เมกะไบต์ คุณควรคำนึงถึงข้อนี้เมื่อกำหนดจำนวนการตอบสนองแบบทึบแสงที่ต้องการแคช เนื่องจากคุณอาจใช้โควต้าพื้นที่เก็บข้อมูลเกินขีดจำกัดได้ง่ายๆ เร็วกว่าที่คาดไว้ตามขนาดจริงของทรัพยากรแบบทึบแสง

คู่มือที่เกี่ยวข้อง

• Stack Overflow: What limitations apply to opaque responses?
• Workbox: Understanding Storage Quota

ล้างพื้นที่เก็บข้อมูล

แท็บ Clear Storage เป็นฟีเจอร์ที่มีประโยชน์มากเมื่อพัฒนา Progressive Web App แท็บนี้ช่วยให้คุณยกเลิกการลงทะเบียน Service Worker และล้างแคชและพื้นที่เก็บข้อมูลทั้งหมดได้ด้วยการคลิกปุ่มเพียงครั้งเดียว ดูข้อมูลเพิ่มเติมได้ในส่วนด้านล่าง

คู่มือที่เกี่ยวข้อง

• ล้างพื้นที่เก็บข้อมูล

คู่มือแผงแอปพลิเคชันอื่นๆ

ดูคู่มือด้านล่างเพื่อขอความช่วยเหลือเพิ่มเติมเกี่ยวกับบานหน้าต่างอื่นๆ ของแผงแอปพลิเคชัน

คู่มือที่เกี่ยวข้อง

• ตรวจสอบทรัพยากรของหน้าเว็บ
• ตรวจสอบและจัดการพื้นที่เก็บข้อมูลในเครื่องและแคช