להשתמש ב-Screen Wake Lock API כדי להישאר במצב ער

Pete LePage

Thomas Steiner

פורסם: 18 בדצמבר 2018

מה זה Screen Wake Lock API?

כדי למנוע את ריקון הסוללה, רוב המכשירים עוברים למצב שינה במהירות כשלא משתמשים בהם. ברוב המקרים זה בסדר, אבל יש אפליקציות שצריכות שהמסך יישאר פעיל כדי להשלים את הפעולה. לדוגמה, אפליקציות בישול שמציגות את השלבים במתכון או משחק כמו Ball Puzzle, שמשתמש בממשקי API של תנועת המכשיר לקלט.

‫Screen Wake Lock API מספק דרך למנוע מהמכשיר לעמעם ולנעול את המסך. היכולת הזו מאפשרת חוויות חדשות, שעד עכשיו נדרשה בשבילן אפליקציה ספציפית לפלטפורמה.

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

תרחישי שימוש מומלצים ב-Screen Wake Lock API

RioRun,‏ אפליקציית אינטרנט שפותחה על ידי The Guardian, הייתה מקרה שימוש מושלם (אבל היא כבר לא זמינה). האפליקציה מציעה סיור אודיו וירטואלי בריו, לאורך המסלול של המרתון האולימפי של 2016. בלי נעילות השכמה, המסכים של המשתמשים היו נכבים לעיתים קרובות בזמן שהסיור מוצג, ולכן היה קשה להשתמש בו.

כמובן שיש עוד הרבה תרחישי שימוש:

• אפליקציית מתכונים שמשאירה את המסך דולק בזמן שאתם אופים עוגה או מבשלים ארוחת ערב
• אפליקציה של כרטיס עלייה למטוס או כרטיס שמשאירה את המסך פתוח עד לסריקת הברקוד
• אפליקציה בסגנון קיוסק ששומרת על המסך דולק באופן רציף
• אפליקציה להצגת מצגות באינטרנט שמשאירה את המסך פתוח במהלך המצגת

שימוש ב-Screen Wake Lock API

‫Screen Wake Lock API מספק רק סוג אחד של נעילת מסך: screen.

screen חסימת מצב שינה

screen נעילת השהיה מונעת את כיבוי המסך של המכשיר, כדי שהמשתמש יוכל לראות את המידע שמוצג במסך.

קבלת נעילת התעוררות מסך

כדי לבקש חסימה של מצב שינה של המסך, צריך להפעיל את השיטה navigator.wakeLock.request() שמחזירה אובייקט WakeLockSentinel. אפשר גם להעביר את הסוג, screen, כפרמטר. הדפדפן יכול לדחות את הבקשה מסיבות שונות (למשל, אם רמת הטעינה של הסוללה נמוכה מדי), ולכן מומלץ להוסיף את הקריאה ל-try...catch. אם הפעולה נכשלת, ההודעה של החריגה מכילה פרטים נוספים.

ביטול חסימה של התעוררות המסך

צריך גם דרך לבטל את חסימת מצב השינה של המסך. לשם כך, קוראים לשיטת release() של האובייקט WakeLockSentinel. אם לא שומרים הפניה ל-WakeLockSentinel, אין אפשרות לבטל את הנעילה באופן ידני, אבל היא תבוטל כשהכרטיסייה הנוכחית תהיה בלתי נראית.

אם רוצים לשחרר באופן אוטומטי את נעילת ההפעלה של המסך אחרי פרק זמן מסוים, אפשר להשתמש ב-window.setTimeout() כדי להתקשר אל release(), כמו בדוגמה.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

לאובייקט WakeLockSentinel יש מאפיין בשם released שמציין אם כבר בוצע שחרור של סנטינל. הערך שלו הוא בהתחלה false, והוא משתנה ל-true אחרי שאירוע "release" נשלח. המאפיין הזה עוזר למפתחי אתרים לדעת מתי נעילה שוחררה, בלי מעקב ידני.

מחזור החיים של חסימות מצב שינה במסך

כשמפעילים את הדמו של נעילת המסך למניעת מעבר למצב שינה, אפשר לראות שנעילות המסך למניעת מעבר למצב שינה רגישות לנראות הדף. המשמעות היא שחסימת מצב השינה של המסך משתחררת באופן אוטומטי כשממזערים כרטיסייה או חלון, או כשעוברים מכרטיסייה או מחלון שבהם חסימת מצב השינה של המסך פעילה.

כדי להשיג מחדש את חסימת מצב השינה במסך, צריך להאזין לאירוע visibilitychange ולבקש חסימת מצב שינה חדשה במסך כשהוא מתרחש:

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

צמצום ההשפעה על משאבי המערכת

האם כדאי להשתמש בנעילת השכמה של המסך באפליקציה? הגישה שבה תבחרו תלויה בצרכים של האפליקציה. בכל מקרה, מומלץ להשתמש בגישה הקלה ביותר שאפשר כדי למזער את ההשפעה של האפליקציה על משאבי המערכת.

לפני שמוסיפים לאפליקציה נעילת מסך למניעת מעבר למצב שינה, כדאי לשקול אם אפשר לפתור את תרחישי השימוש באמצעות אחד מהפתרונות החלופיים הבאים:

• אם האפליקציה מבצעת הורדות ארוכות, כדאי להשתמש באחזור ברקע.
• אם האפליקציה מסנכרנת נתונים משרת חיצוני, כדאי להשתמש בסנכרון ברקע.

הדגמה (דמו)

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

חסימות מצב שינה במסך במנהל המשימות של מערכת ההפעלה

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

משוב

מצאתם באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט?

• דיווח על באג חשוב לספק כמה שיותר פרטים. צריך לתת הוראות ברורות לשחזור הבאג, ולהגדיר את Components ל-Blink>WakeLock.

משאבים

• מפרט המלצה למועמד | טיוטה של העורך
• הדגמה של Screen Wake Lock | המקור של הדגמה של Screen Wake Lock
• באג במעקב
• ערך ב-ChromeStatus.com
• ניסוי עם Wake Lock API
• רכיב Blink: Blink>WakeLock

תודות

סרטון מנהל המשימות באדיבות Henry Lim.