אפליקציות Progressive Web App: שיפור האפליקציה

1. שלום

בשיעור ה-Lab הזה, תיקחו אפליקציית אינטרנט קיימת ותוסיפו לה יכולות מתקדמות. זוהי הסדנה השישית בסדרת סדנאות קוד שנועדו ללוות את סדנת Progressive Web App. ה-codelab הקודם היה Prompting & Measuring Install. יש עוד שני שיעורי Codelab בסדרה הזו.

מה תלמדו

  • פתיחה ושמירה של קבצים ממערכת הקבצים של המשתמש באמצעות File System Access API
  • רישום של PWA מותקן כ-handler של קבצים באמצעות 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 כדי להפעיל את שרת הפיתוח של ה-codelab.

קובץ README.md של קוד המקור מספק הסבר לכל הקבצים המופצים. בנוסף, אלה הקבצים הקיימים העיקריים שתעבדו איתם במהלך ה-codelab הזה:

קבצים חשובים

  • ‫js/lib/actions.js – מספק מחלקה בסיסית לתפריט

הערה חשובה בנושא ארכיטקטורה

במהלך ה-codelab הזה, תערכו את js/lib/action.js שמנהל את הפעולות של הלחצנים השונים בתפריט של האפליקציה. אתם יכולים לגשת לכל נכס בבונה של התפריט שאותחל, שיכלול this.editor עבור מופע של כלי העריכה הראשי של הטקסט. שתי שיטות חשובות של העורך שבהן תשתמשו במהלך ה-codelab הן:

  • ‫this.editor.setContent(content) – מגדיר את התוכן של העורך לתוכן שמועבר בארגומנט
  • ‫this.editor.content() – קבלת התוכן הנוכחי של כלי העריכה

3. ניהול קבצים

עכשיו אפשר לפתוח, לשמור וליצור קבצים חדשים במחשב של המשתמש באמצעות File System Access API. בנוסף, אפשר לשלב את ה-PWA בצורה חלקה בחיי היומיום של המשתמשים באמצעות File Handling API, שמאפשר למשתמשים לפתוח קבצים ישירות ב-PWA.

פתיחה מתוך האפליקציה

הפעולה הראשונה שצריך להגדיר היא האפשרות לפתוח קובץ ממערכת הקבצים של המשתמש מתוך האפליקציה. ב-js/lib/actions.js, בשיטה open של המחלקה Actions, כותבים קוד שמבצע את הפעולות הבאות:

  • פותחים את כלי בחירת הקבצים שיקבל קובץ text/markdown עם הסיומות .md או .markdown
  • הגדרת שם הדף לשם הקבצים הפתוחים, בתוספת PWA Edit
  • שמירת רכיב ה-handler של הקובץ בתיקייה this.handler
  • הגדרת התוכן של העורך לתוכן הטקסט של הקובץ
  • שומרים את ה-handler במאגר האובייקטים settings במסד הנתונים settings-store IndexedDB.

חיובי : חשוב לזכור: קונסטרקטורים של מחלקות לא יכולים להיות פונקציות async, אבל אפשר לקרוא ל-Promises בתוכם.

עכשיו אפשר לפתוח קובץ ולשמור את הקובץ הפתוח בין טעינות. יש עוד שני דברים שצריך לעשות: להגדיר מחדש את ה-handler כשהאפליקציה נטענת, ולבטל את ההגדרה שלו כשהמשתמש מאפס את האפליקציה.

כדי לבצע את הפעולה הראשונה, בקונסטרוקטור של המחלקה Actions ב-js/lib/actions.js, מבצעים את הפעולות הבאות:

  • פתיחת מסד הנתונים settings-store
  • קבלת ה-handler השמור מחנות האובייקטים settings
  • מגדירים את this.handler לערך שאוחזר ואת הכותרת של הדף לשם הקובץ של ה-handler (בתוספת PWA Edit) אם יש handler שמור

כדי לאפס את מצב האפליקציה (אפשר לעשות זאת באמצעות CTRL/CMD+Shift+R), צריך לעדכן את השיטה reset של המחלקה Actions בקובץ js/lib/actions.js באופן הבא:

  • הגדרת שם המסמך לPWA Edit
  • הגדרת התוכן של העורך למחרוזת ריקה
  • הגדרה של this.handler לערך null
  • מחיקת ה-handler השמור ממאגר האובייקטים settings

פתיחה ממערכת הקבצים של המשתמש

עכשיו, אחרי שיש לך אפשרות לפתוח קובץ מהאפליקציה, כדאי לאפשר למשתמשים לפתוח את האפליקציה עם הקובץ שלהם. הרשמה כ-handler של קבצים במכשיר מאפשרת למשתמש לפתוח קבצים באפליקציה מכל מקום במערכת הקבצים.

שלילי : יכול להיות שתצטרכו להפעיל גרסת ניסיון למפתחים או גרסת ניסיון למקור כדי שהפעולה הזו תעבוד. אם אתם צריכים להפעיל גרסת ניסיון למפתחים, מומלץ לעשות זאת בעותק של Chrome Canary ולא בדפדפן הרגיל. אם אתם צריכים להפעיל תקופת ניסיון של תכונה חדשה, עליכם להירשם אליה כרגיל ולהוסיף את התג אל index.html

כדי להתחיל, מוסיפים ב-manifest.json רשומה של file_handlers שמבצעת את הפעולות הבאות:

  • פתיחה: /
  • מקבל קבצים מסוג text/markdown עם סיומות הקבצים .md או .markdown.

הפעולה הזו תאפשר למשתמשים לפתוח קבצים באמצעות האפליקציה שלכם, אבל לא תפתח את הקבצים באפליקציה. כדי לעשות זאת, בכיתה Actions ב-js/lib/actions.js, מבצעים את הפעולות הבאות:

  • מוסיפים window.launchQueue צרכן בקונסטרוקטור, ומפעילים את this.open עם ה-handler, אם יש כזה.
  • צריך לעדכן את this.open כדי לאשר את השימוש ב-handler אופציונלי להפעלת האפליקציה
    • אם הוא קיים והוא מופע של FileSystemFileHandle, משתמשים בו כ-handler של הקובץ עבור הפונקציה
    • אם לא, פותחים את כלי בחירת הקבצים

אחרי שמבצעים את שני השלבים שלמעלה, מתקינים את ה-PWA ומנסים לפתוח איתו קובץ ממערכת הקבצים.

שמירת קובץ

יש שתי דרכים שבהן משתמש יכול לשמור קובץ: לשמור שינויים בקובץ שכבר פתוח, או לשמור בקובץ חדש. בעזרת File System Access API, שמירה לקובץ חדש יוצרת קובץ חדש ומקבלת בחזרה את המטפל בקובץ, אז כדי להתחיל, נשמור ממטפל קיים.

בשיטה save במחלקה Actions ב-js/lib/actions.js, מבצעים את הפעולות הבאות:

  • מקבלים את ה-handler מ-this.handler או, אם הוא לא קיים, מקבלים את ה-handler השמור ממסד הנתונים
  • יצירת FileSystemWritableFileStream של קובץ
  • כתיבת התוכן של העורך לזרם
  • סגירת השידור

אחרי ששומרים קובץ, אפשר להטמיע את האפשרות 'שמירה בשם'. כדי לעשות זאת, בשיטה saveAs במחלקה Actions ב-js/lib/actions.js, מבצעים את הפעולות הבאות:

  • תציג את הכלי לבחירת קובץ לשמירה, תתאר אותו כMarkdown File ותאפשר לו לקבל קבצים מסוג text/markdown עם סיומת .md
  • העברת this.handler ל-returned handler
  • שמירת ה-handler בחנות האובייקטים settings
  • מחכים עד שהסמל this.save ייעלם כדי לשמור את התוכן בקובץ החדש שנוצר.

אחרי שתעשו את זה, תחזרו לשיטה save, תבדקו אם handler קיים לפני שתנסו לכתוב אליו, ואם הוא לא קיים, תחכו עד שthis.saveAs יסיים.

4. הצגת תצוגה מקדימה

כשמשתמשים בעורך Markdown, הם רוצים לראות תצוגה מקדימה של הפלט המעובד. באמצעות 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