ใช้แผงแอปพลิเคชันเพื่อตรวจสอบ แก้ไข และแก้ไขข้อบกพร่องไฟล์ 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 ของเว็บแอป
หากต้องการให้ผู้ใช้เพิ่มแอปลงในโฟลเดอร์แอปพลิเคชันใน Mac OS X ได้ เมนูเริ่มต้นใน Windows และหน้าจอหลักใน Android และ iOS คุณต้องมีไฟล์ 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 บนเดสก์ท็อปแสดงปุ่มติดตั้งในแถบที่อยู่ แม้ว่าเครื่องมือสําหรับนักพัฒนาเว็บจะอยู่ในโหมดอุปกรณ์ อย่างไรก็ตาม หากเพิ่มแอปลงในเดสก์ท็อปได้สำเร็จ แอปก็จะใช้งานได้บนอุปกรณ์เคลื่อนที่ด้วย
หากต้องการทดสอบประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่อย่างแท้จริง คุณสามารถเชื่อมต่ออุปกรณ์เคลื่อนที่จริงกับเครื่องมือสำหรับนักพัฒนาเว็บผ่านการแก้ไขข้อบกพร่องระยะไกล หากต้องการทริกเกอร์การติดตั้งในอุปกรณ์เคลื่อนที่ที่เชื่อมต่อ ให้เปิดเมนู 3 จุด 
แล้วคลิก 
ติดตั้งแอป
ตรวจสอบแป้นพิมพ์ลัด
ทางลัดของแอปช่วยให้คุณเข้าถึงการดำเนินการทั่วไปบางอย่างที่ผู้ใช้ต้องการได้อย่างรวดเร็ว
หากต้องการตรวจสอบแป้นพิมพ์ลัดที่กำหนดไว้ในไฟล์ Manifest ให้เลื่อนไปที่ส่วน แป้นพิมพ์ลัด #N ของแท็บไฟล์ Manifest
ตรวจสอบภาพหน้าจอเพื่อดู UI การติดตั้งที่สมบูรณ์ยิ่งขึ้น
เมื่อคุณเพิ่มคำอธิบายและชุดภาพหน้าจอลงในไฟล์ Manifest แอปจะได้รับกล่องโต้ตอบการติดตั้งที่สมบูรณ์ยิ่งขึ้น
หากต้องการตรวจสอบภาพหน้าจอ ให้เลื่อนไปที่ส่วนภาพหน้าจอ #N ของแท็บไฟล์ Manifest
ทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL
PWA สามารถจัดการลิงก์ที่ใช้โปรโตคอลที่เฉพาะเจาะจงเพื่อให้ได้รับประสบการณ์การใช้งานแบบผสานรวมมากขึ้น ดูวิธีสร้างตัวแฮนเดิลได้ที่การลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สําหรับ PWA
วิธีทดสอบตัวแฮนเดิล
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้า Landing Page ของ PWA เช่น ลองดูPWA สาธิตนี้
- จากหน้าสาธิต ให้ติดตั้ง PWA แล้วโหลดแอปซ้ำหลังการติดตั้ง ตอนนี้เบราว์เซอร์ได้ลงทะเบียน PWA เป็นตัวแฮนเดิลสำหรับโปรโตคอล
web+coffeeแล้ว - ในส่วน Application > Manifest > Protocol Handler ให้ป้อน URL ที่คุณต้องการให้ตัวแฮนเดิลทดสอบ แล้วคลิกทดสอบโปรโตคอล
ในตัวอย่างนี้ เครื่องจัดการจะประมวลผล americano,chaiและlatte-macchiatoได้ - เมื่อ Chrome ถามว่าจะเปิดแอปได้ไหม ให้ยืนยันโดยคลิก Open Protocol Handler
- อนุญาตให้แอปจัดการลิงก์ของ
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 โดยไม่มีเพย์โหลด (หรือที่เรียกว่าจั๊กจี้)
- ปุ่มซิงค์จะจำลองเหตุการณ์การซิงค์ในเบื้องหลัง
- ลิงก์ยกเลิกการลงทะเบียนจะยกเลิกการลงทะเบียน Service Worker ที่ระบุ โปรดดูล้างพื้นที่เก็บข้อมูลเพื่อดูวิธียกเลิกการลงทะเบียน Service Worker รวมถึงล้างพื้นที่เก็บข้อมูลและแคชด้วยการคลิกปุ่มเพียงครั้งเดียว
- บรรทัดแหล่งที่มาจะบอกให้คุณทราบเมื่อมีการติดตั้ง Service Worker ที่ทำงานอยู่ในปัจจุบัน ลิงก์คือชื่อไฟล์ต้นทางของ Service Worker การคลิกลิงก์จะนำคุณไปยังต้นทางของผู้ปฏิบัติงานบริการ
- บรรทัดสถานะจะบอกสถานะของโปรแกรมทำงานของบริการ ตัวเลขในบรรทัดนี้ (
#16ในภาพหน้าจอ) แสดงจํานวนครั้งที่อัปเดต Service Worker หากเปิดใช้ช่องทําเครื่องหมาย
อัปเดตเมื่อโหลดซ้ำ คุณจะเห็นตัวเลขเพิ่มขึ้นทุกครั้งที่โหลดหน้าเว็บ
คุณจะเห็นลิงก์เริ่มข้างสถานะ (หากมีการหยุด Service Worker) หรือลิงก์หยุด (หาก Service Worker ทำงานอยู่) Service Worker ได้รับการออกแบบมาให้เบราว์เซอร์หยุดและเริ่มใช้งานได้ทุกเมื่อ การหยุด Service Worker อย่างชัดเจนโดยใช้ลิงก์ stop จะช่วยจำลองการดำเนินการดังกล่าวได้ การหยุดโปรแกรมทำงานของบริการเป็นวิธีที่ดีในการทดสอบลักษณะการทำงานของโค้ดเมื่อโปรแกรมทำงานของบริการเริ่มต้นสำรองข้อมูลอีกครั้ง ซึ่งมักแสดงข้อบกพร่องเนื่องจากมีการคาดคะเนที่ไม่ถูกต้องเกี่ยวกับสถานะแบบคงที่ทั่วโลก - บรรทัดไคลเอ็นต์จะบอกต้นทางที่มีขอบเขตการทำงานของ Service Worker ปุ่มโฟกัสจะมีประโยชน์เป็นส่วนใหญ่เมื่อคุณมี Service Worker ที่ลงทะเบียนหลายคน หากคุณคลิกปุ่มโฟกัสข้าง Service Worker ที่ทำงานอยู่ในแท็บอื่น Chrome จะโฟกัสที่แท็บนั้น
ตารางรอบการอัปเดตจะแสดงกิจกรรมของ Service Worker และเวลาผ่านไป เช่น การติดตั้ง รอ และเปิดใช้งาน หากต้องการดูการประทับเวลาที่แน่นอนของแต่ละกิจกรรม ให้คลิกปุ่มขยาย
โปรดดูข้อมูลเพิ่มเติมที่หัวข้อวงจรชีวิตของโปรแกรมทำงานของบริการ
หากโปรแกรมทำงานของบริการทำให้เกิดข้อผิดพลาดใดๆ แท็บ Service Workers จะแสดงไอคอน ข้อผิดพลาด 
พร้อมจำนวนข้อผิดพลาดถัดจากบรรทัด Source
ลิงก์ที่มีหมายเลขจะนำคุณไปยังคอนโซลที่มีข้อผิดพลาดที่บันทึกไว้ทั้งหมด
หากต้องการดูข้อมูลเกี่ยวกับ Service Worker ทั้งหมด ให้คลิกดูการลงทะเบียนทั้งหมดที่ด้านล่างของแท็บ Service Worker ลิงก์นี้จะนําคุณไปยัง chrome://serviceworker-internals/?devtools ซึ่งคุณสามารถแก้ไขข้อบกพร่องของ Service Worker ได้
แคช Service Worker
แท็บพื้นที่เก็บข้อมูลแคชจะแสดงรายการแบบอ่านอย่างเดียวของทรัพยากรที่มีการแคชโดยใช้ Cache API (โปรแกรมทำงานของบริการ)
โปรดทราบว่าเมื่อเปิดแคชและเพิ่มทรัพยากรลงในแคชเป็นครั้งแรก เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์อาจไม่ตรวจพบการเปลี่ยนแปลง โหลดหน้าเว็บซ้ำและคุณจะเห็นแคช
หากเปิดแคชไว้ 2 รายการขึ้นไป คุณจะเห็นแคชเหล่านั้นแสดงอยู่ในรายการใต้เมนูแบบเลื่อนลงพื้นที่เก็บข้อมูลแคช
การใช้โควต้า
คำตอบบางรายการในแท็บพื้นที่เก็บข้อมูลแคชอาจได้รับการแจ้งว่า "ทึบแสง" หมายถึงการตอบกลับที่ดึงมาจากต้นทางอื่น เช่น จาก CDN หรือ API ระยะไกลเมื่อไม่ได้เปิดใช้ CORS
เพื่อหลีกเลี่ยงการรั่วไหลของข้อมูลข้ามโดเมน ระบบจึงมีการเพิ่มระยะห่างจากขอบที่สำคัญในขนาดของการตอบสนองแบบทึบแสงที่ใช้ในการคำนวณขีดจำกัดโควต้าพื้นที่เก็บข้อมูล (กล่าวคือ มีข้อยกเว้น QuotaExceeded หรือไม่) และรายงานโดย navigator.storage API
รายละเอียดของการถ่วงน้ำหนักนี้แตกต่างกันไปในแต่ละเบราว์เซอร์ แต่สำหรับ Google Chrome หมายความว่าขนาดขั้นต่ำที่การตอบกลับแบบทึบแสงที่แคชไว้รายการเดียวจะส่งผลต่อการใช้งานพื้นที่เก็บข้อมูลโดยรวมคือประมาณ 7 เมกะไบต์ คุณควรคำนึงถึงเรื่องนี้เมื่อพิจารณาจำนวนการตอบกลับที่คลุมเครือที่ต้องการแคช เนื่องจากคุณอาจใช้งานเกินขีดจำกัดโควต้าพื้นที่เก็บข้อมูลได้ง่ายเร็วกว่าที่คาดไว้ โดยอิงจากขนาดจริงของทรัพยากรที่คลุมเครือ
คำแนะนำที่เกี่ยวข้อง:
- Stack Overflow: มีการใช้ข้อจำกัดอะไรกับคำตอบที่ไม่ชัดเจน
- กล่องทำงาน: ทำความเข้าใจโควต้าพื้นที่เก็บข้อมูล
ล้างพื้นที่เก็บข้อมูล
แท็บล้างพื้นที่เก็บข้อมูลเป็นฟีเจอร์ที่มีประโยชน์มากเมื่อพัฒนา Progressive Web App แท็บนี้จะช่วยให้คุณยกเลิกการลงทะเบียน Service Worker รวมถึงล้างแคชและพื้นที่เก็บข้อมูลทั้งหมดได้ด้วยการคลิกปุ่มเพียงครั้งเดียว โปรดดูข้อมูลเพิ่มเติมที่ส่วนด้านล่าง
คำแนะนำที่เกี่ยวข้อง:
คู่มือแผงแอปพลิเคชันอื่นๆ
ดูความช่วยเหลือเพิ่มเติมเกี่ยวกับแผงอื่นๆ ของแผงแอปพลิเคชันได้ในคู่มือด้านล่าง
คู่มือที่เกี่ยวข้อง