Blijf wakker met de Screen Wake Lock API

Pete LePage
Thomas Steiner

Gepubliceerd: 18 december 2018

Browser Support

  • Chrome: 84.
  • Rand: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Wat is de Screen Wake Lock API?

Om te voorkomen dat de batterij leeg raakt, schakelen de meeste apparaten snel over naar de slaapstand wanneer ze niet worden gebruikt. Hoewel dit meestal prima is, moeten sommige applicaties het scherm actief houden om hun werk te kunnen doen. Voorbeelden hiervan zijn kookapps die de stappen van een recept laten zien of een spel zoals Ball Puzzle , dat de bewegings-API's van het apparaat gebruikt voor invoer.

De Screen Wake Lock API biedt een manier om te voorkomen dat het scherm van het apparaat dimt en vergrendelt. Deze functionaliteit maakt nieuwe ervaringen mogelijk die tot nu toe een platformspecifieke app vereisten.

De Screen Wake Lock API vermindert de noodzaak voor onorthodoxe en mogelijk energieverslindende oplossingen. Het pakt de tekortkomingen aan van een oudere API die beperkt was tot het ingeschakeld houden van het scherm en een aantal beveiligings- en privacyproblemen kende.

Voorgestelde gebruiksscenario's voor de Screen Wake Lock API

RioRun , een webapp ontwikkeld door The Guardian , was een perfect voorbeeld (hoewel deze niet meer beschikbaar is). De app nam je mee op een virtuele audiotour door Rio, langs de route van de Olympische marathon van 2016. Zonder wakelock-functionaliteit zouden de schermen van gebruikers regelmatig uitschakelen tijdens de tour, waardoor de app moeilijk te gebruiken was.

Uiteraard zijn er nog tal van andere toepassingsmogelijkheden:

  • Een recepten-app die het scherm aan laat staan ​​terwijl je een cake bakt of een maaltijd kookt.
  • Een app voor instapkaarten of tickets die het scherm aan laat staan ​​totdat de barcode is gescand.
  • Een app in kioskstijl die het scherm continu aan laat staan.
  • Een webgebaseerde presentatie-app die het scherm aan laat staan ​​tijdens een presentatie.

Gebruik de Screen Wake Lock API.

De Screen Wake Lock API biedt slechts één type wakelock: screen .

screen

Een screen voorkomt dat het scherm van het apparaat uitschakelt, zodat de gebruiker de informatie die op het scherm wordt weergegeven kan blijven zien.

Krijg een schermvergrendeling.

Om een ​​schermvergrendeling aan te vragen, moet u de methode ` navigator.wakeLock.request() aanroepen. Deze methode retourneert een WakeLockSentinel -object. Optioneel kunt u het type, screen , als parameter meegeven. De browser kan het verzoek om verschillende redenen weigeren (bijvoorbeeld omdat de batterij bijna leeg is), dus het is raadzaam om de aanroep in een try...catch -blok te plaatsen. Het uitzonderingsbericht bevat meer details in geval van een fout.

Ontgrendel het scherm.

Je hebt ook een manier nodig om de schermvergrendeling op te heffen. Dit doe je door de release() -methode van het WakeLockSentinel -object aan te roepen. Als je geen verwijzing naar de WakeLockSentinel opslaat, is er geen manier om de vergrendeling handmatig op te heffen, maar deze wordt automatisch opgeheven zodra het huidige tabblad onzichtbaar is.

Als je de schermvergrendeling na een bepaalde tijd automatisch wilt opheffen, kun je window.setTimeout() gebruiken om release() aan te roepen, zoals in het voorbeeld wordt getoond.

// 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);

Het WakeLockSentinel object heeft een eigenschap genaamd released die aangeeft of een sentinel al is vrijgegeven. De waarde is aanvankelijk false en verandert in true zodra een "release" gebeurtenis wordt verzonden. Deze eigenschap helpt webontwikkelaars te weten wanneer een vergrendeling is vrijgegeven, zonder dat ze dit handmatig hoeven bij te houden.

De levenscyclus van de schermontgrendeling

Als je de demo van de schermvergrendeling uitprobeert, zie je dat schermvergrendelingen gevoelig zijn voor de zichtbaarheid van de pagina . Dit betekent dat de schermvergrendeling automatisch wordt opgeheven wanneer je een tabblad of venster minimaliseert, of wanneer je overschakelt naar een ander tabblad of venster waar een schermvergrendeling actief is.

Om de schermontgrendeling opnieuw te verkrijgen, moet u luisteren naar de gebeurtenis visibilitychange en een nieuwe schermontgrendeling aanvragen wanneer deze zich voordoet.

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

document.addEventListener('visibilitychange', handleVisibilityChange);

Minimaliseer uw impact op de systeembronnen.

Moet je een schermvergrendeling gebruiken in je app? De aanpak die je kiest, hangt af van de behoeften van je app. Hoe dan ook, je moet de meest efficiënte methode gebruiken om de impact op de systeembronnen van je app te minimaliseren.

Voordat je een schermvergrendeling aan je app toevoegt, overweeg dan of je specifieke gebruiksscenario's niet ook met een van de volgende alternatieve oplossingen kunnen worden opgelost:

  • Als uw app langdurige downloads uitvoert, kunt u overwegen om background fetch te gebruiken.
  • Als uw app gegevens synchroniseert met een externe server, overweeg dan om achtergrondsynchronisatie te gebruiken.

Demo

Bekijk de demo en de broncode van de Screen Wake Lock . Let op hoe de schermvergrendeling automatisch wordt opgeheven wanneer je van tabblad of app wisselt.

Schermontgrendeling in Taakbeheer van het besturingssysteem

Je kunt Taakbeheer van je besturingssysteem gebruiken om te controleren of een applicatie voorkomt dat je computer in de slaapstand gaat. In de video is te zien dat de Activiteitenmonitor van macOS aangeeft dat Chrome een actieve schermontgrendeling heeft die het systeem wakker houdt.

Feedback

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie?

  • Meld een bug . Geef zoveel mogelijk details. Geef duidelijke instructies voor het reproduceren van de bug en stel Components in op Blink>WakeLock .

Bronnen

Dankbetuigingen

Video over taakbeheer met dank aan Henry Lim .