Chrome-kiosk-apps maken en implementeren

Dit artikel is bedoeld voor Chrome-beheerders en -ontwikkelaars die ervaring hebben met het ontwikkelen van Chrome-apps.

Als Chrome-beheerder kun je apparaten met Chrome OS instellen als apparaten met één functie, zoals digitale bewegwijzering of interactive display. Je kunt kant-en-klare kiosk-apps implementeren vanuit de Chrome Web Store of je kunt je eigen kiosk-app maken.

In Chrome-versie 57 en hoger worden Android-apps ondersteund op sommige apparaten met Chrome OS. Zie Android-apps gebruiken op Chrome-apparaten die als kiosk worden uitgevoerd voor meer informatie over het installeren van Android-apps op beheerde Chrome-apparaten.

Aandachtspunten

  • Voordat je kiosk-apps kunt implementeren op apparaten met Chrome OS, moet je de apparaten inschrijven. Zie Chrome-apparaten inschrijven voor meer informatie.
  • Je kunt Chrome-pakket-apps gebruiken om kiosk-apps te maken. Je kunt geen gehoste apps gebruiken.
  • Gebruik Chrome-apps die zijn ingesteld om in de modus volledig scherm te worden uitgevoerd.
  • Volg de praktische tips voor het ontwikkelen van Chrome-apps.

Stap 1: Een kiosk-app maken voor Chrome

Als ontwikkelaar kun je op twee manieren een kiosk-app maken die je kunt implementeren op Chrome-apparaten. Je kunt een bestaande web-app gebruiken en deze met Chrome App Builder verpakken als kiosk-app of een nieuwe web-app maken.

Optie 1: Een bestaande web-app gebruiken

Voordat je begint: Voeg Chrome App Builder toe aan de Chrome-browser op de computer waarop je de kiosk-app maakt.
  1. Maak op de computer waarop je de app maakt een map voor de app-bestanden.
  2. Open Chrome App Builder.
  3. Voer de naam van de app en de eerste versie in.
    Zorg dat het eerste versienummer een laag getal is, zoals 0.0.0.1. Je kunt het nummer dan verhogen bij nieuwere versies.
  4. Voer de URL in van de huidige homepage van de app.
    Dit wordt de bestemmingspagina voor de nieuwe kiosk-app.
  5. Kies navigatiefuncties, zoals 'Terug', 'Vooruit', 'Opnieuw laden' en 'Sessie opnieuw starten'.
  6. Geef time-outwaarden op:
    • Time-out bij inactieve sessie: Het aantal minuten dat de app inactief moet zijn voordat browsegegevens worden verwijderd.
    • Time-out voor homepage: Het aantal minuten dat de app inactief moet zijn voordat de homepage weer wordt weergegeven. De browsergegevens worden niet gewist.
      De standaardinstelling voor 'Time-out bij inactieve sessie' en 'Time-out voor homepage' is 0 minuten (de app wordt niet beëindigd).
  7. (Optioneel) Als je servicevoorwaarden voor app-gebruikers wilt weergeven, voer je deze in.
  8. (Optioneel) Als je de homepage wilt draaien zodat deze juist wordt weergegeven op het apparaat waarop deze wordt uitgevoerd, selecteer je een waarde.
    Draai de app bijvoorbeeld 90 graden als deze wordt uitgevoerd op een apparaat dat de portretstand gebruikt.
  9. Selecteer Kioskmodus ingeschakeld.
  10. Klik op Kiosk-app exporteren.
  11. Kies waarnaar je de app-bestanden wilt exporteren en klik op Selecteren.

Nadat je een kiosk-app hebt gemaakt met Chrome App Builder, kun je deze aanpassen door meer bestanden toe te voegen.

Optie 2: Een nieuwe app maken

Gebruik de voorbeeldbestanden die je in de stappen hieronder krijgt om een eenvoudige kiosk-app te maken.
  1. Maak op de computer waarop je de app maakt een map voor de app-bestanden. 
  2. Maak het html-bestand van de app.
    1. Gebruik een tekstverwerker om een html-bestand te maken.
      Hier zie je een voorbeeld-html-bestand.
    2. Sla het bestand in de app-map op als application.html.
  3. Maak het manifest.
    1. Maak in een tekstverwerker een JavaScript® Object Notation-bestand (JSON). Hier zie je een voorbeeld-JSON-bestand.
    2. Zorg dat kiosk_enabled is ingesteld op true: "kiosk_enabled": true.
    3. (Optioneel) Als je niet wilt dat een app wordt uitgevoerd als reguliere app, stel je kiosk_only in op true: "kiosk_only": true.
    4. (Optioneel) Als je wilt dat webpagina's sneller worden geladen wanneer deze voor de eerste keer worden geladen in de webviewfunctie van de kiosk-app, specificeer je partition="persist:" in de webview-tag.
      Zie informatie voor ontwikkelaars over het partition-kenmerk voor meer informatie.
    5. Controleer of de JSON-code de juiste indeling heeft met een JSON-validatietool van derden, zoals JSONLint.
    6. Sla het bestand in de app-map op als manifest.json.
  4. Geef de hoogte en breedte van de app op. .
    1. Maak in een tekstverwerker een CSS-bestand. Hier zie je een voorbeeld-css-bestand.
    2. Sla het bestand in de app-map op als application.css.
      Opmerking: Kiosk-apps worden automatisch vergroot tot volledig scherm.
  5. (Optioneel) Ga als volgt te werk om gebruikers toe te staan de kiosksessie te beëindigen:
    1. Maak in een tekstverwerker een JavaScript-bestand. Hier zie je een voorbeeld-JS-bestand.
    2. Sla het bestand in de app-map op als application.js.
  6. Maak het achtergrondscript:
    1. Maak in een tekstverwerker een JavaScript-bestand. Hier zie je een voorbeeld-JS-bestand.
    2. Sla het bestand in de app-map op als background.js.
  7. Maak de app-pictogrammen en sla ze op in de app-map:
    1. Maak een pictogram van 128 bij 128p en sla het op als 128.png.
    2. Maak een pictogram van 96 bij 96p en sla het op als 96.png.

Je kunt ook dit voorbeeld-zip-bestand gebruiken dat app-bestanden bevat voor een test-app met navigatiefuncties en een resetknop. Een live versie van de app, Chrome Browser Kiosk App 1.0, is gepubliceerd in de Chrome Web Store. Je kunt de bestanden bewerken met elke tekstverwerker.

Stap 2. De kiosk-app testen

Controleer als ontwikkelaar of de kiosk-app werkt op een apparaat met Chrome OS.

  1. Log op een Chrome-apparaat in op je Google-account.
  2. Sla de app-map op het testapparaat op.
  3. Ga naar chrome://extensions/.
  4. Schakel rechtsboven de Ontwikkelaarsmodus in.
  5. Klik op Uitgepakte extensie laden.
  6. Zoek en selecteer de app-map.
  7. Open een nieuw tabblad in de Chrome-browser en klik op Apps en vervolgens de app. Controleer of de app laadt en naar behoren werkt.
  8. Breng zo nodig wijzigingen aan in het bestand manifest.json. Host de app-map en test de app opnieuw. Herhaal dit totdat de app naar behoren werkt.

Stap 3: Publiceren in de Chrome Web Store

Als ontwikkelaar kun je ervoor kiezen apps en extensies voor iedereen beschikbaar te maken of te bepalen wie ze kan installeren. Je kunt kiosk-apps op twee manieren publiceren in de Chrome Web Store:

  • Openbaar: Iedereen kan de app zien en installeren.
  • Verborgen: Alleen gebruikers met de app-link kunnen de app zien en installeren. De app wordt niet weergegeven in de zoekresultaten in de Chrome Web Store. Je kunt de app-link delen met gebruikers buiten je domein.

Ga als volgt te werk om een kiosk-app toe te voegen aan de Chrome Web Store:

  1. Maak een zip-bestand van de map met de bestanden.
  2. Volg de stappen in Publish in the Chrome Web Store (Publiceren in de Chrome Web Store). 

Stap 4: De kiosk-app implementeren

Als beheerder kun je de kiosk-app toevoegen in de Googl Beheerdersconsole.

  1. Log in bij de Google Beheerdersconsole.

    Log in met uw beheerdersaccount (dit eindigt niet op @gmail.com).

  2. Ga op de homepage van de beheerdersconsole naar Apparatenen vervolgensChrome-beheer.

    Als u Apparaten niet ziet op de homepage, klikt u onderaan op Meer functies.

  3. Klik op Apps en extensies.
  4. Selecteer links de organisatie-eenheid waarvoor je instellingen wilt configureren.
    Selecteer voor alle gebruikers de organisatie op het hoogste niveau. Selecteer anders een onderliggende organisatie-eenheid. Een organisatie-eenheid neemt in eerste instantie de instellingen over van de bovenliggende organisatie-eenheid.
  5. Klik bovenaan op Kiosks.
  6. Klik op Toevoegen Vraag toevoegen en kies Toevoegen uit de Chrome Web Store.
  7. Zoek de app die je wilt implementeren en klik op Selecteren.
  8. Accepteer de app-rechten namens je organisatie als daarom wordt gevraagd.
  9. Stel in het venster aan de rechterkant het app- en extensiebeleid in. Meer informatie over elke instelling.
  10. Klik op Opslaan.

Gerelateerde onderwerpen

Was dit nuttig?
Hoe kunnen we dit verbeteren?