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

ה-API של נעילת מצב המסך מאפשר למנוע ממכשירים לעמעם או לנעול את המסך כשיש צורך שאפליקציה תמשיך לפעול.

Pete LePage
Thomas Steiner

מה זה Screen Wake Lock API?

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

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

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

תרחישים לדוגמה מומלצים ל-Screen Wake Lock API

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

יש עוד הרבה תרחישים לדוגמה:

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

הסטטוס הנוכחי

שלב סטטוס
1. יצירת הסבר לא רלוונטי
2. יצירת טיוטה ראשונית של מפרט הושלם
3. אוספים משוב וחוזרים על העיצוב הושלם
4. גרסת מקור לניסיון התשובה מלאה
5. הפעלה הושלם

שימוש ב-Screen Wake Lock API

סוגים של חסימת מצב שינה

בשלב הזה, ב-Screen Wake Lock API יש רק סוג אחד של נעילת מצב שינה: screen.

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

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

קבלה של נעילת המסך ממצב שינה

כדי לבקש נעילת מסך ממצב שינה, עליך לקרוא ל-method 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". המאפיין הזה עוזר למפתחי אתרים לדעת מתי משחררת נעילה, כדי שהם לא יצטרכו לעקוב אחריה באופן ידני. זמין החל מגרסה 87 של Chrome.

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

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

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

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

document.addEventListener('visibilitychange', handleVisibilityChange);

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

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

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

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

הדגמה (דמו)

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

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

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

משוב

חברי הצוות של Web Platform Incubator Community Group (WICG)וצוות Chrome רוצים לשמוע מה דעתך על חוויית השימוש ב-Screen Wake Lock API.

לספר לנו על עיצוב ה-API

האם יש משהו ב-API שלא פועל כצפוי? או האם חסרים שיטות או מאפיינים שנדרשים לכם כדי ליישם את הרעיון?

דיווח על בעיה בהטמעה

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

  • אפשר לדווח על באג בכתובת https://new.crbug.com. חשוב לכלול כמה שיותר פרטים, לספק הוראות פשוטות לשחזור הבאג ולהגדיר את הרכיבים ל-Blink>WakeLock. גליץ' הוא כלי מעולה לשיתוף גיבויים מהירים וקלים.

הבעת תמיכה ב-API

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

קישורים שימושיים

אישורים

תמונה ראשית (Hero) מאת קייט סטון מתיסון בתוכנית UnFlood. סרטון מנהל המשימות באדיבות Henry Lim.