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

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

ใช้แผงแอปพลิเคชันเพื่อตรวจสอบ แก้ไข และแก้ไขข้อบกพร่องไฟล์ 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 ของแอป (manifest.webmanifest ในภาพหน้าจอด้านบน)
  • ส่วนข้อมูลประจำตัวและงานนำเสนอจะแสดงช่องจากแหล่งที่มาของไฟล์ Manifest ด้วยวิธีที่ใช้งานง่ายมากขึ้น
  • ส่วนตัวแฮนเดิลโปรโตคอลช่วยให้คุณทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL สําหรับ PWA ได้โดยคลิกปุ่มเดียว ดูข้อมูลเพิ่มเติมได้ที่ทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอลของ URL
  • ส่วนไอคอนจะแสดงไอคอนทั้งหมดที่คุณระบุ และให้คุณตรวจสอบมาสก์ได้
  • ชุดส่วนทางลัด #N จะแสดงข้อมูลในออบเจ็กต์ทางลัดทั้งหมด
  • ชุดส่วนภาพหน้าจอ #N จะแสดงภาพหน้าจอสำหรับ UI การติดตั้งที่สมบูรณ์ยิ่งขึ้นของแอป

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

ส่วนความสามารถในการติดตั้งในแท็บไฟล์ Manifest

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

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

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

การดูพื้นที่ปลอดภัยขั้นต่ำสำหรับไอคอนที่มาสก์ได้

หากเห็นโลโก้ทั้งตัวในพื้นที่ปลอดภัย แสดงว่าพร้อมแล้ว

ทริกเกอร์การติดตั้ง

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

วิธีเรียกใช้ขั้นตอนการติดตั้ง PWA

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

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

    ปุ่มติดตั้ง

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

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

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

ตรวจสอบแป้นพิมพ์ลัด

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

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

ส่วนทางลัดในแท็บไฟล์ Manifest

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

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

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

กล่องโต้ตอบการติดตั้งและภาพหน้าจอในแท็บไฟล์ Manifest

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

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

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

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

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

Service Worker

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 ทั้งหมด ให้คลิกดูการลงทะเบียนทั้งหมดที่ด้านล่างของแท็บ Service Worker ลิงก์นี้จะนําคุณไปยัง chrome://serviceworker-internals/?devtools ซึ่งคุณส��มารถแก้ไขข้อบกพร่องของ Service Worker ได้

การลงทะเบียน Service Worker ที่ serviceworker-internals

แคช Service Worker

แท็บพื้นที่เก็บข้อมูลแคชจะแสดงรายการแบบอ่านอย่างเดียวของทรัพยากรที่มีการแคชโดยใช้ Cache API (โปรแกรมทำงานของบริการ)

แท็บแคชของ Service Worker

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

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

แคช Service Worker หลายรายการ

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

คำตอบบางรายการในแท็บพื้นที่เก็บข้อมูลแคชอาจได้รับการแจ้งว่า "ทึบแสง" หมายถึงการตอบกลับที่ดึงมาจากต้นทางอื่น เช่น จาก CDN หรือ API ระยะไกลเมื่อไม่ได้เปิดใช้ CORS

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

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

คำแนะนำที่เกี่ยวข้อง:

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

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

คำแนะนำที่เกี่ยวข้อง:

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

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

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