Progressive Web App: เพิ่มประสิทธิภาพ PWA

1. ยินดีต้อนรับ

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

สิ่งที่คุณจะได้เรียนรู้

  • เปิดและบันทึกไฟล์จากระบบไฟล์ของผู้ใช้โดยใช้ File System Access API
  • ลงทะเบียน PWA ที่ติดตั้งเป็นตัวแฮนเดิลไฟล์ด้วย File Handling API
  • เลือกหน้าจอที่เหมาะสมเพื่อเปิดหน้าต่างโดยใช้ Multi-Screen Window Placement API
  • ป้องกันไม่ให้หน้าจอเข้าสู่โหมดสลีปโดยใช้ Screen Wake Lock API

สิ่งที่ควรทราบ

  • JavaScript

สิ่งที่คุณจะต้องมี

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

2. เตรียมตัว

เริ่มต้นด้วยการโคลนหรือดาวน์โหลดโค้ดเริ่มต้นที่จำเป็นต่อการทำ Codelab นี้ให้เสร็จสมบูรณ์

หากโคลนที่เก็บ โปรดตรวจสอบว่าคุณอยู่ในสาขา pwa05--empowering-your-pwa ไฟล์ ZIP มีโค้ดสำหรับสาขานั้นด้วย

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

ไฟล์ README.md ของซอร์สโค้ดจะอธิบายไฟล์ที่เผยแพร่ทั้งหมด นอกจากนี้ ไฟล์สำคัญที่มีอยู่ซึ่งคุณจะต้องใช้ตลอดทั้งโค้ดแล็บนี้มีดังนี้

ไฟล์สำคัญ

  • js/lib/actions.js - จัดเตรียมคลาสพื้นฐานสำหรับเมนู

หมายเหตุสำคัญเกี่ยวกับสถาปัตยกรรม

ตลอดทั้งโค้ดแล็บนี้ คุณจะได้แก้ไข js/lib/action.js ซึ่งจัดการการดำเนินการสำหรับปุ่มต่างๆ ในเมนูของแอป คุณเข้าถึงพร็อพเพอร์ตี้ใดก็ได้ในตัวสร้างของเมนูที่เริ่มต้น ซึ่งจะมี this.editor สำหรับอินสแตนซ์ของโปรแกรมแก้ไขข้อความหลัก เมธอดของเอดิเตอร์ที่สำคัญ 2 อย่างที่คุณจะใช้ตลอดทั้งโค้ดแล็บนี้คือ

  • this.editor.setContent(content) - ตั้งค่าเนื้อหาของเอดิเตอร์เป็นอาร์กิวเมนต์เนื้อหาที่ระบุ
  • this.editor.content() - Gets the current content of the editor

3. จัดการไฟล์

ตอนนี้คุณสามารถเปิด บันทึก และสร้างไฟล์ใหม่ในคอมพิวเตอร์ของผู้ใช้ได้แล้วด้วย File System Access API เมื่อใช้ร่วมกับ File Handling API ซึ่งช่วยให้ผู้ใช้เปิดไฟล์ใน PWA ได้โดยตรง PWA ของคุณจะผสานรวมเข้ากับชีวิตประจำวันของผู้ใช้ได้อย่างราบรื่น

เปิดจากภายในแอป

การดำเนินการแรกในการเชื่อมต่อคือการเปิดไฟล์จากระบบไฟล์ของผู้ใช้ภายในแอปได้ ใน js/lib/actions.js ในเมธอด open ของคลาส Actions ให้เขียนโค้ดที่ทำสิ่งต่อไปนี้

  • เปิดเครื่องมือเลือกไฟล์ที่จะรับไฟล์ text/markdown ที่มีนามสกุล .md หรือ .markdown
  • ตั้งชื่อหน้าเว็บเป็นชื่อไฟล์ที่เปิดอยู่บวก PWA Edit
  • จัดเก็บตัวแฮนเดิลไฟล์ไว้ใน this.handler
  • ตั้งค่าเนื้อหาของเอดิเตอร์เป็นเนื้อหาข้อความของไฟล์
  • บันทึกแฮนเดิลไปยังที่เก็บออบเจ็กต์ settings ในฐานข้อมูล settings-store IndexedDB

เชิงบวก : โปรดทราบว่าตัวสร้างคลาสต้องไม่ใช่ฟังก์ชัน async แต่คุณเรียกใช้ Promise ภายในได้

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

หากต้องการทำอย่างแรก ในตัวสร้างของคลาส Actions ใน js/lib/actions.js ให้ทำดังนี้

  • เปิดฐานข้อมูล settings-store
  • รับตัวแฮนเดิลที่บันทึกไว้จากที่เก็บออบเจ็กต์ settings
  • ตั้งค่า this.handler เป็นค่าที่ดึงมาและชื่อของหน้าเป็นชื่อไฟล์ของตัวแฮนเดิล (บวก PWA Edit) หากมีตัวแฮนเดิลที่บันทึกไว้

หากต้องการรีเซ็ตสถานะของแอป (ซึ่งทำได้ด้วย CTRL/CMD+Shift+R) ให้อัปเดตเมธอด reset ของคลาส Actions ใน js/lib/actions.js เพื่อทำสิ่งต่อไปนี้

  • ตั้งชื่อเอกสารเป็น PWA Edit
  • ตั้งค่าเนื้อหาของเอดิเตอร์เป็นสตริงว่างเปล่า
  • ตั้งค่า this.handler เป็น null
  • ลบตัวแฮนเดิลที่บันทึกไว้จากที่เก็บข้อมูลออบเจ็กต์ settings

เปิดจากระบบไฟล์ของผู้ใช้

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

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

เริ่มต้นโดยเพิ่มรายการ file_handlers ใน manifest.json ซึ่งทำสิ่งต่อไปนี้

  • เปิดเวลา /
  • ยอมรับ text/markdown ที่มีนามสกุลไฟล์ .md หรือ .markdown

ซึ่งจะช่วยให้ผู้ใช้เปิดไฟล์ด้วยแอปของคุณได้ แต่จะไม่เปิดไฟล์ในแอปของคุณจริงๆ หากต้องการทำเช่นนั้น ให้ทำดังนี้ในคลาส Actions ใน js/lib/actions.js

  • เพิ่ม window.launchQueue ในเครื่องมือสร้างโดยเรียก this.open ด้วยตัวแฮนเดิล หากมี
  • อัปเดต this.open เพื่อยอมรับตัวแฮนเดิลการเปิดตัวที่ไม่บังคับ
    • หากมีอยู่และเป็นอินสแตนซ์ของ FileSystemFileHandle ให้ใช้เป็นตัวแฮนเดิลไฟล์สำหรับฟังก์ชัน
    • หากไม่พบ ให้เปิดเครื่องมือเลือกไฟล์

หลังจากทำทั้ง 2 อย่างข้างต้นแล้ว ให้ติดตั้ง PWA แล้วลองเปิดไฟล์ด้วย PWA จากระบบไฟล์

การบันทึกไฟล์

เส้นทางการบันทึกมี 2 เส้นทางที่ผู้ใช้อาจต้องการใช้ ได้แก่ การบันทึกการเปลี่ยนแปลงลงในไฟล์ที่เปิดอยู่แล้ว หรือการบันทึกลงในไฟล์ใหม่ เมื่อใช้ File System Access API การบันทึกลงในไฟล์ใหม่คือการสร้างไฟล์ใหม่และรับตัวแฮนเดิลไฟล์กลับมา ดังนั้นเรามาเริ่มด้วยการบันทึกจากตัวแฮนเดิลที่มีอยู่กัน

ในsaveเมธอดในคลาส Actions ใน js/lib/actions.js ให้ทำดังนี้

  • รับแฮนเดิลจาก this.handler หรือหากไม่มี ให้รับแฮนเดิลที่บันทึกไว้จากฐานข้อมูล
  • สร้าง FileSystemWritableFileStream ของตัวแฮนเดิลไฟล์
  • เขียนเนื้อหาของเอดิเตอร์ไปยังสตรีม
  • ปิดสตรีม

เมื่อบันทึกไฟล์ได้แล้ว ก็ถึงเวลาใช้ฟีเจอร์บันทึกเป็น โดยทำดังนี้ในเมธอด saveAs ในคลาส Actions ใน js/lib/actions.js

  • แสดงตัวเลือกไฟล์บันทึก โดยอธิบายว่าเป็น Markdown File และให้ยอมรับไฟล์ text/markdown ที่มีนามสกุล .md
  • ตั้งค่า this.handler เป็นแฮนเดิลที่ส่งคืน
  • บันทึกตัวแฮนเดิลไปยังที่เก็บออบเจ็กต์ settings
  • รอให้ this.save เสร็จสิ้นเพื่อบันทึกเนื้อหาลงในไฟล์ที่สร้างใหม่

เมื่อทำเสร็จแล้ว ให้กลับไปที่save ตรวจสอบว่ามีhandlerอยู่หรือไม่ก่อนที่จะพยายามเขียนลงในhandler และหากไม่มี ให้รอจนกว่าthis.saveAsจะเสร็จสิ้น

4. แสดงตัวอย่าง

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

ก่อนเริ่มต้น ให้สร้างไฟล์ js/preview.js แล้วเพิ่มโค้ดต่อไปนี้เพื่อให้แสดงตัวอย่างเมื่อโหลด

import { openDB } from 'idb';
import { marked } from 'marked';

window.addEventListener('DOMContentLoaded', async () => {
  const preview = document.querySelector('.preview');
  const db = await openDB('settings-store');
  const content = (await db.get('settings', 'content')) || '';

  preview.innerHTML = marked(content);
});

ตัวอย่างควรทำงานในลักษณะต่อไปนี้

  • เมื่อผู้ใช้คลิกปุ่มแสดงตัวอย่างและตัวอย่างยังไม่เปิด ระบบควรเปิดตัวอย่าง
  • เมื่อผู้ใช้คลิกปุ่มแสดงตัวอย่างและตัวอย่างเปิดอยู่ ระบบควรปิดตัวอย่าง
  • เมื่อผู้ใช้ปิดหรือรีเฟรช PWA ตัวอย่างควรปิด

เริ่มจากการแก้ไขเมธอด preview ในคลาส Actions ใน js/lib/actions.js เพื่อทำสิ่งต่อไปนี้

  • รับหน้าจอที่พร้อมใช้งานโดยใช้ Window Management API
  • กรองหน้าจอเพื่อค้นหาหน้าจอหลัก
  • เปิดหน้าต่างสำหรับ /preview ที่มีชื่อว่า Markdown preview ซึ่งใช้ความกว้างครึ่งหนึ่งของความกว้างที่มีอยู่ และความสูงทั้งหมดที่มีอยู่ของหน้าจอหลัก โดยวางตำแหน่งให้ใช้ครึ่งขวาของหน้าจอนั้นทั้งหมด ขนาดที่ใช้ได้จะไม่รวมพื้นที่ที่สงวนไว้ของหน้าจอ เช่น แถบเมนูของระบบ แถบเครื่องมือ สถานะ หรือตำแหน่ง
  • บันทึกหน้าต่างที่เปิดอยู่นี้ไปยัง this.previewWindow
  • ที่ด้านบนของเมธอด ให้ตรวจสอบว่ามี this.previewWindow หรือไม่ หากมี ให้ปิดหน้าต่างและยกเลิกการตั้งค่า this.previewWindow แทนที่จะเปิดตัวอย่างหน้าต่าง

สุดท้าย ให้ทำดังนี้ที่ส่วนท้ายของตัวสร้างของคลาส Actions ใน js/lib/actions.js

  • ปิด this.previewWindow ระหว่างการแข่งขัน beforeunload

5. โฟกัส

สุดท้ายนี้ เราต้องการมอบโหมดการเขียนที่ไม่มีสิ่งรบกวนให้แก่ผู้ใช้ โหมดไร้สิ่งรบกวนไม่ได้หมายความว่าไม่มีสิ่งรบกวนจากแอปอื่นๆ เท่านั้น แต่ยังหมายถึงการป้องกันไม่ให้หน้าจอของผู้ใช้เข้าสู่โหมดสลีปด้วย โดยคุณจะใช้ Screen Wake Lock API เพื่อดำเนินการนี้

ปุ่มล็อกการปลุกจะทำงานเหมือนกับปุ่มแสดงตัวอย่าง โดยจะสลับระหว่างสถานะเปิดและปิด โดยทำดังนี้ในfocusเมธอดของคลาส Actions ใน js/lib/actions.js

  • ตรวจสอบว่าเอกสารมีองค์ประกอบแบบเต็มหน้าจอหรือไม่
  • หากมี ให้ทำดังนี้
    • ออกจากโหมดเต็มหน้าจอ
    • หาก this.wakeLock มีอยู่ ให้ปล่อยการทำงานขณะล็อกและรีเซ็ต this.wakeLock
  • หากไม่มี ให้ทำดังนี้
    • ขอ Wake Lock Sentinel และตั้งค่าเป็น this.wakeLock
    • ขอให้เนื้อหาของเอกสารแสดงแบบเต็มหน้าจอ

6. ยินดีด้วย

คุณได้เรียนรู้วิธีจัดการไฟล์ระบบและผสานรวม PWA กับระบบโดยใช้ File System Access API และ File Handling API, เปิดหน้าต่างในหน้าจอต่างๆ ด้วย Window Management API และป้องกันไม่ให้หน้าจอปิดด้วย Screen Wake Lock API

Codelab ถัดไปในชุดนี้คือ Service Worker Includes