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

Kayce Basques

Sofia Emelianova

ใช้แผงแอปพลิเคชันเพื่อตรวจสอบ แก้ไข และแก้ไขข้อบกพร่องไฟล์ 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

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

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

   

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

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

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

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

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

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

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

หมายเหตุ: หมายเหตุ: ภาพหน้าจอนี้มาจากหน้าสาธิต ตรวจสอบเพื่อดูตัวอย่างเพิ่มเติม

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

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

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

ทดสอบการลงทะเบียนเครื่องจัดการโปรโตคอล URL

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

วิธีทดสอบเครื่องจัดการ

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

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

Service Worker

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

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

• ข้อมูลเบื้องต้นเกี่ยวกับ 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 เมกะไบต์ โปรดคำนึงถึงเรื่องนี้เมื่อกำหนดจำนวนการตอบสนองที่ไม่ชัดเจนที่ต้องการแคช เนื่องจากคุณอาจใช้งานเกินโควต้าพื้นที่เก็บข้อมูลเร็วกว่าที่คาดไว้ โดยอิงจากขนาดจริงของทรัพยากรที่ทึบแสง

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

• Stack Overflow: มีข้อจำกัดอะไรบ้างกับคำตอบที่ไม่ชัดเจน
• Workbox: ทำความเข้าใจโควต้าพื้นที่เก็บข้อมูล

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

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

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

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

คำแนะนำอื่นๆ เกี่ยวกับแผงแอปพลิเคชัน

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

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

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