להשתמש ב-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 wake lock מונע את כיבוי המסך של המכשיר כדי שהמשתמש יוכל לראות את המידע שמוצג במסך.

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

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

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

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

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

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

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

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

document.addEventListener('visibilitychange', handleVisibilityChange);

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

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

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

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

הדגמה (דמו)

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

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

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

משוב

קבוצת הקהילה של Web Platform Incubator‏ (WICG) וצוות Chrome רוצים לשמוע את המחשבות והחוויות שלכם לגבי Screen Wake Lock API.

תיאור של עיצוב ה-API

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

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

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

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

תמיכה ב-API

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

  • אתם יכולים לשתף את אופן השימוש שלכם ב-API בשרשור ב-Discourse של WICG.
  • אתם יכולים לשלוח ציוץ אל @ChromiumDev באמצעות ההאשטאג #WakeLock ולספר לנו איפה ואיך אתם משתמשים בו.

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

תודות

תמונה ראשית (Hero) של Kate Stone Matheson ב-Unsplash. הסרטון על מנהל המשימות פורסם באדיבות Henry Lim.