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