ใช้แผงแอปพลิเคชันเพื่อตรวจสอบ แก้ไข และแก้ไขข้อบกพร่องของไฟล์ Manifest ของเว็บแอป, Service Worker และแคช Service Worker
Progressive Web App (PWA) เป็นแอปพลิเคชันที่ทันสมัยและมีคุณภาพสูงซึ่งสร้างขึ้นโดยใช้เทคโนโลยีเว็บ PWA มีความสามารถคล้ายกับแอป iOS, Android และแอปเดสก์ท็อป ดังนี้
- เชื่อถือได้แม้ในสภาพเครือข่ายที่ไม่เสถียร
- ติดตั้งเพื่อเปิดแพลตฟอร์มของระบบปฏิบัติการได้ เช่น โฟลเดอร์แอปพลิเคชันใน Mac OS X, เมนูเริ่มใน Windows และหน้าจอหลักใน Android และ iOS
- แสดงในเครื่องมือสลับกิจกรรม เครื่องมือค้นหาในอุปกรณ์ เช่น สปอตไลท์ และในชีตการแชร์เนื้อหา
คู่มือนี้จะกล่าวถึงเฉพาะฟีเจอร์ Progressive Web App ของแผงแอปพลิเคชัน หากต้องการความช่วยเหลือเกี่ยวกับแผงอื่นๆ โปรดดูส่วนสุดท้ายของคู่มือนี้ ซึ่งก็คือคู่มือแผงแอปพลิเคชันอื่นๆ
สรุป
- ใช้แท็บไฟล์ Manifest เพื่อตรวจสอบไฟล์ Manifest ของเว็บแอป
- ใช้แท็บ Service Worker สําหรับงานต่างๆ ที่เกี่ยวข้องกับ Service Worker เช่น การยกเลิกการลงทะเบียนหรืออัปเดตบริการ การจําลองเหตุการณ์ Push สถานะออฟไลน์ หรือหยุด Service Worker
- ดูแคชของ Service Worker จากแท็บพื้นที่เก็บข้อมูลแคช
- ยกเลิกการลงทะเบียน Service Worker และล้างพื้นที่เก็บข้อมูลและแคชทั้งหมดด้วยการคลิกเพียงครั้งเดียวจากแท็บล้างพื้นที่เก็บข้อมูล
ไฟล์ Manifest ของเว็บแอป
หากต้องการให้ผู้ใช้เพิ่มแอปลงในโฟลเดอร์ Applications ใน Mac OS X, เมนู Start ใน Windows และหน้าจอหลักใน Android และ iOS คุณต้องมี Web App ไฟล์ Manifest ไฟล์ Manifest จะกำหนดลักษณะที่แอปปรากฏบนหน้าจอหลัก ตำแหน่งที่จะนำทางผู้ใช้เมื่อเปิดจากหน้าจอหลัก และลักษณะของแอปเมื่อเปิดใช้งาน
เมื่อตั้งค่าไฟล์ Manifest แล้ว คุณจะใช้แท็บ Manifest ของแผงแอปพลิเคชันเพื่อตรวจสอบไฟล์ได้
- หากต้องการดูแหล่งที่มาของไฟล์ Manifest ให้คลิกลิงก์ใต้ป้ายกํากับไฟล์ Manifest ของแอป (
manifest.webmanifestในภาพหน้าจอด้านบน) - ส่วนข้อมูลระบุตัวตนและการแสดงผลจะแสดงเฉพาะช่องจากแหล่งที่มาของไฟล์ Manifest ในลักษณะที่ใช้งานง่ายขึ้น
- ส่วนตัวแฮนเดิลโปรโตคอลช่วยให้คุณทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สําหรับ PWA ได้โดยคลิกปุ่มเดียว ดูข้อมูลเพิ่มเติมได้ที่ทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL
- ส่วนไอคอนจะแสดงไอคอนทั้งหมดที่คุณระบุไว้และให้คุณตรวจสอบหน้ากากของไอคอนได้
- ชุดส่วนทางลัด #N จะแสดงข้อมูลเกี่ยวกับออบเจ็กต์ทางลัดทั้งหมด
- ชุดส่วนภาพหน้าจอ #N จะแสดงภาพหน้าจอสำหรับ UI การติดตั้งที่สมบูรณ์ยิ่งขึ้นของแอป
นอกจากนี้ หากเครื่องมือสำหรับนักพัฒนาเว็บพบข้อผิดพลาด เช่น ไอคอนที่โหลดไม่ได้ แท็บไฟล์ Manifest จะแสดงส่วนความสามารถในการติดตั้งที่อธิบายข้อผิดพลาด
ดูและตรวจสอบไอคอนที่มาสก์ได้
ส่วนไอคอนของแท็บไฟล์ Manifest จะแสดงไอคอนทั้งหมดของแอปพลิเคชัน ในส่วนนี้ คุณยังตรวจสอบพื้นที่ปลอดภัยสำหรับไอคอนที่มาสก์ได้ ซึ่งเป็นรูปแบบไอคอนที่ปรับให้เข้ากับแพลตฟอร์มต่างๆ ได้ด้วย
หากต้องการตัดไอคอนเพื่อให้มองเห็นเฉพาะพื้นที่ปลอดภัยขั้นต่ำ ให้เลือก 
แสดงเฉพาะพื้นที่ปลอดภัยขั้นต่ำสำหรับไอคอนที่มาสก์ได้
หากเห็นโลโก้ทั้งตัวในพื้นที่ปลอดภัย แสดงว่าพร้อมแล้ว
การติดตั้งทริกเกอร์
Chrome ช่วยให้คุณเปิดใช้และโปรโมตการติดตั้ง PWA ได้โดยตรงในอินเทอร์เฟซผู้ใช้ ดูวิธีมอบประสบการณ์การติดตั้งในแอปของคุณเอง
วิธีเรียกใช้ขั้นตอนการติดตั้ง PWA
- เปิดหน้า Landing Page ของ PWA ใน Chrome
คลิก
ติดตั้ง ทางด้านขวาของแถบที่อยู่ด้านบน
ทำตามวิธีการบนหน้าจอ
ฟีเจอร์ติดตั้งแอปไม่สามารถจำลองเวิร์กโฟลว์สำหรับอุปกรณ์เคลื่อนที่ได้ สังเกตว่าเบราว์เซอร์ Chrome บนเดสก์ท็อปแสดงปุ่มติดตั้งในแถบที่อยู่ แม้ว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะอยู่ในโหมดอุปกรณ์ อย่างไรก็ตาม หากเพิ่มแอปลงในเดสก์ท็อปได้สำเร็จ แอปก็จะใช้งานได้บนอุปกรณ์เคลื่อนที่ด้วย
หากต้องการทดสอบประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่จริง คุณสามารถเชื่อมต่ออุปกรณ์เคลื่อนที่จริงกับ DevTools ผ่านการแก้ไขข้อบกพร่องระยะไกล หากต้องการเรียกให้ติดตั้งในอุปกรณ์เคลื่อนที่ที่เชื่อมต่อ ให้เปิด
เมนู 3 จุด แล้วคลิก 
ติดตั้งแอป
ตรวจสอบแป้นพิมพ์ลัด
ทางลัดของแอปช่วยให้คุณเข้าถึงการดำเนินการทั่วไปบางอย่างที่ผู้ใช้ต้องการได้อย่างรวดเร็ว
หากต้องการตรวจสอบทางลัดที่คุณกำหนดไว้ในไฟล์ Manifest ให้เลื่อนไปที่ส่วนทางลัด #N ของแท็บไฟล์ Manifest
ตรวจสอบภาพหน้าจอเพื่อดู UI การติดตั้งที่สมบูรณ์ยิ่งขึ้น
เมื่อคุณเพิ่มคำอธิบายและชุดภาพหน้าจอลงในไฟล์ Manifest แอปของคุณจะมีกล่องโต้ตอบการติดตั้งที่สมบูรณ์ยิ่งขึ้น
หากต้องการตรวจสอบภาพหน้าจอ ให้เลื่อนไปที่ส่วนภาพหน้าจอ #N ของแท็บไฟล์ Manifest
ทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL
PWA สามารถจัดการลิงก์ที่ใช้โปรโตคอลที่เฉพาะเจาะจงเพื่อให้ได้รับประสบการณ์การใช้งานแบบผสานรวมมากขึ้น ดูวิธีสร้างตัวแฮนเดิลได้ที่การลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สําหรับ PWA
วิธีทดสอบตัวแฮนเดิล
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้า Landing Page ของ PWA เช่น ลองดูPWA สาธิตนี้
- จากหน้าเดโม ให้ติดตั้ง PWA และโหลดแอปอีกครั้งหลังจากการติดตั้ง ตอนนี้เบราว์เซอร์ได้ลงทะเบียน PWA เป็นเครื่องจัดการสำหรับโปรโตคอล
web+coffeeแล้ว - ในส่วนแอปพลิเคชัน > ไฟล์ Manifest > ตัวแฮนเดิลโปรโตคอล ให้ป้อน URL ที่ต้องการให้ตัวแฮนเดิลทดสอบ แล้วคลิกทดสอบโปรโตคอล
ในตัวอย่างนี้ แฮนเดิลจะประมวลผล americano,chaiและlatte-macchiatoได้ - เมื่อ Chrome ถามว่าจะเปิดแอปได้ไหม ให้ยืนยันโดยคลิกเปิดตัวแฮนเดิลโปรโตคอล
- ในกล่องโต้ตอบถัดไป ให้อนุญาตให้แอปจัดการลิงก์
web+coffee
หากตัวแฮนเดิลประมวลผลลิงก์ได้สําเร็จ คุณจะเห็นรูปภาพถ้วยกาแฟที่เปิดอยู่ในแอป
Service Worker
Service Worker เป็นเทคโนโลยีพื้นฐานในแพลตฟอร์มเว็บในอนาคต นั่นคือสคริปต์ที่เบราว์เซอร์เรียกใช้อยู่เบื้องหลังแยกจากหน้าเว็บ สคริปต์เหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ที่ไม่ต้องใช้หน้าเว็บหรือการโต้ตอบของผู้ใช้ เช่น การแจ้งเตือนแบบพุช การซิงค์ในเบื้องหลัง และประสบการณ์การใช้งานแบบออฟไลน์
คำแนะนำที่เกี่ยวข้อง
แท็บ Service Worker ในแผงแอปพลิเคชันคือส่วนหลักในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบและแก้ไขข้อบกพร่องของ Service Worker
- หากติดตั้ง Service Worker ในหน้าที่เปิดอยู่ในปัจจุบัน คุณจะเห็น Service Worker นั้นแสดงอยู่ในแท็บนี้ เช่น ในภาพหน้าจอด้านบน มีการติดตั้ง Service Worker สําหรับขอบเขตของ
https://airhorner.com/ - ช่องทำเครื่องหมาย
ออฟไลน์ จะเปลี่ยนเครื่องมือสำหรับนักพัฒนาเว็บเป็นโหมดออฟไลน์ ซึ่งเทียบเท่ากับโหมดออฟไลน์ที่พร้อมใช้งานจากแผงเครือข่าย หรือตัวเลือก Go offlineในเมนูคำสั่ง - ช่องทําเครื่องหมาย
อัปเดตเมื่อโหลดซ้ำ จะบังคับให้ Service Worker อัปเดตเมื่อหน้าเว็บโหลดทุกครั้ง - ช่องทําเครื่องหมาย
ข้ามสําหรับเครือข่ายจะข้าม Service Worker และบังคับให้เบราว์เซอร์ไปที่เครือข่ายเพื่อขอทรัพยากรที่ขอ - ลิงก์คําขอเครือข่ายจะนำคุณไปยังแผงเครือข่ายที่มีรายการคําขอที่ขัดขวางซึ่งเกี่ยวข้องกับ Service Worker (ตัวกรอง
is:service-worker-intercepted) - ลิงก์อัปเดตจะอัปเดต Service Worker ที่ระบุแบบครั้งเดียว
- ปุ่ม Push จะจำลองข้อความ Push ที่ไม่มีเพย์โหลด (หรือที่เรียกว่า tickle)
- ปุ่มซิงค์จะจำลองเหตุการณ์การซิงค์ในเบื้องหลัง
- ลิงก์ยกเลิกการลงทะเบียนจะยกเลิกการลงทะเบียน Service Worker ที่ระบุ ดูวิธีล้างพื้นที่เก็บข้อมูลเพื่อยกเลิกการลงทะเบียน Service Worker และล้างพื้นที่เก็บข้อมูลและแคชด้วยการคลิกเพียงครั้งเดียว
- บรรทัดแหล่งที่มาจะบอกคุณว่าติดตั้ง Service Worker ที่ทำงานอยู่ในปัจจุบันเมื่อใด ลิงก์คือชื่อไฟล์ต้นทางของ Service Worker การคลิกลิงก์จะนำคุณไปยังแหล่งที่มาของบริการของผู้ให้บริการ
- บรรทัดสถานะจะบอกสถานะของ Service Worker ตัวเลขในบรรทัดนี้ (
#16ในภาพหน้าจอ) แสดงจํานวนครั้งที่อัปเดต Service Worker หากเปิดใช้ช่องทําเครื่องหมาย
อัปเดตเมื่อโหลดซ้ำ คุณจะเห็นตัวเลขเพิ่มขึ้นทุกครั้งที่โหลดหน้าเว็บ
คุณจะเห็นลิงก์เริ่ม (หากหยุด Service Worker ไว้) หรือลิงก์หยุด (หาก Service Worker ทำงานอยู่) ข้างสถานะ Service Worker ได้รับการออกแบบมาให้เบราว์เซอร์หยุดและเริ่มใช้งานได้ทุกเมื่อ การหยุด Service Worker อย่างชัดเจนโดยใช้ลิงก์ stop จะช่วยจำลองการดำเนินการดังกล่าวได้ การหยุด Service Worker เป็นวิธีที่ยอดเยี่ยมในการทดสอบลักษณะการทำงานของโค้ดเมื่อ Service Worker เริ่มทำงานอีกครั้ง ซึ่งมักแสดงข้อบกพร่องเนื่องจากมีการคาดคะเนที่ไม่ถูกต้องเกี่ยวกับสถานะแบบคงที่ทั่วโลก - บรรทัด Clients จะบอกแหล่งที่มาที่กําหนดขอบเขต 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 API (Service Worker) ซึ่งอ่านอย่างเดียว
โปรดทราบว่าเมื่อคุณเปิดแคชและเพิ่มทรัพยากรลงในแคชเป็นครั้งแรก เครื่องมือสําหรับนักพัฒนาเว็บอาจไม่ตรวจพบการเปลี่ยนแปลง โหลดหน้านี้ซ้ำแล้วคุณจะเห็นแคช
หากเปิดแคชไว้ 2 รายการขึ้นไป คุณจะเห็นแคชเหล่านั้นแสดงอยู่ในรายการใต้เมนูแบบเลื่อนลงพื้นที่เก็บข้อมูลแคช
การใช้โควต้า
คำตอบบางรายการในแท็บพื้นที่เก็บข้อมูลแคชอาจได้รับการแจ้งว่า "ทึบแสง" หมายถึงการตอบกลับที่ดึงมาจากต้นทางอื่น เช่น จาก CDN หรือ API ระยะไกล เมื่อไม่ได้เปิดใช้ CORS
ระบบจะเพิ่มการถ่วงขนาดที่มากพอลงในขนาดของคำตอบแบบทึบใช้สำหรับคำนวณขีดจำกัดโควต้าพื้นที่เก็บข้อมูล (เช่น มีการยกเว้นข้อยกเว้นหรือไม่) และรายงานโดย navigator.storage API เพื่อหลีกเลี่ยงการรั่วไหลของข้อมูลข้ามโดเมนQuotaExceeded
รายละเอียดของการถ่วงน้ำหนักนี้แตกต่างกันไปในแต่ละเบราว์เซอร์ แต่สำหรับ Google Chrome หมายความว่าขนาดขั้นต่ำที่การตอบกลับแบบทึบแสงที่แคชไว้รายการเดียวจะส่งผลต่อการใช้งานพื้นที่เก็บข้อมูลโดยรวมคือประมาณ 7 เมกะไบต์ คุณควรคำนึงถึงเรื่องนี้เมื่อกำหนดจำนวนคำตอบแบบทึบแสงที่ต้องการแคช เนื่องจากคุณอาจใช้โควต้าพื้นที่เก็บข้อมูลเกินขีดจำกัดได้เร็วกว่าที่คาดไว้โดยอิงตามขนาดจริงของทรัพยากรแบบทึบแสง
คำแนะนำที่เกี่ยวข้อง
- Stack Overflow: การตอบกลับแบบทึบมีข้อจํากัดใดบ้าง
- Workbox: ทำความเข้าใจเกี่ยวกับโควต้าพื้นที่เก็บข้อมูล
ล้างพื้นที่เก็บข้อมูล
แท็บล้างพื้นที่เก็บข้อมูลเป็นฟีเจอร์ที่มีประโยชน์มากเมื่อพัฒนา Progressive Web App แท็บนี้จะช่วยให้คุณยกเลิกการลงทะเบียน Service Worker และล้างแคชและพื้นที่เก็บข้อมูลทั้งหมดได้ในคลิกเดียว ดูข้อมูลเพิ่มเติมได้ในส่วนด้านล่าง
คำแนะนำที่เกี่ยวข้อง
คู่มืออื่นๆ เกี่ยวกับแผงแอปพลิเคชัน
ดูคู่มือด้านล่างเพื่อรับความช่วยเหลือเพิ่มเติมเกี่ยวกับแผงอื่นๆ ของแผงแอปพลิเคชัน
คำแนะนำที่เกี่ยวข้อง