Delen via

Aan de slag met het ontwikkelen van een PWA- of hybride web-app voor Android

Deze handleiding helpt u om aan de slag te gaan met het maken van een hybride web-app of Progressive Web App (PWA) in Windows met behulp van één HTML/CSS/JavaScript-codebasis die op internet en op verschillende apparaatplatforms (Android, iOS, Windows) kan worden gebruikt.

Door de juiste frameworks en onderdelen te gebruiken, kunnen webtoepassingen op een Android-apparaat werken op een manier die voor gebruikers zeer vergelijkbaar is met een systeemeigen app.

Functies van een PWA- of hybride web-app

Er zijn twee hoofdtypen web-apps die kunnen worden geïnstalleerd op Android-apparaten. Het belangrijkste verschil is of uw toepassingscode is ingesloten in een app-pakket (hybride) of gehost op een webserver (pwa).

  • Hybride web-apps: Code (HTML, JS, CSS) is verpakt in een APK en kan worden gedistribueerd via de Google Play Store. De weergave-engine is geïsoleerd van de internetbrowser van de gebruikers, geen sessie- of cachedeling.

  • Progressive Web Apps (PWA's): Code (HTML, JS, CSS) bevindt zich op het web en hoeft niet als APK te worden verpakt. Resources worden naar behoefte gedownload en bijgewerkt met behulp van een Service Worker. De Chrome-browser zal uw app weergeven, maar het zal eruitzien als een native app en bevat niet de normale adresbalk van een browser, etc. U kunt opslag, cache en sessies delen met de browser. Dit is in feite vergelijkbaar met het installeren van een snelkoppeling naar de Chrome-browser in een speciale modus. PWA's kunnen ook worden vermeld in de Google Play Store met behulp van vertrouwde webactiviteit.

PWA's en hybride web-apps zijn vergelijkbaar met een systeemeigen Android-app in dat ze:

  • Kan worden geïnstalleerd via de App Store (Google Play Store en/of Microsoft Store)
  • Toegang hebben tot systeemeigen apparaatfuncties zoals camera, GPS, Bluetooth, meldingen en lijst met contactpersonen
  • Offline werken (geen internetverbinding)

PWA's hebben ook enkele unieke functies:

  • Kan rechtstreeks vanaf het web worden geïnstalleerd op het Android-startscherm (zonder een App Store)
  • Kan ook worden geïnstalleerd via de Google Play Store met behulp van een vertrouwde webactiviteit
  • Kan worden gedetecteerd via webzoekopdrachten of gedeeld via een URL-koppeling
  • Vertrouw op een Service Worker- om te voorkomen dat systeemeigen code hoeft te worden verpakt

U hebt geen framework nodig om een hybride app of PWA te maken, maar er zijn enkele populaire frameworks die in deze handleiding worden behandeld, waaronder PhoneGap (met Cordova) en Ionic (met Cordova of Condensacitor met behulp van Angular of React).

Apache Cordova

Apache Cordova is een opensource-framework dat de communicatie tussen uw JavaScript-code in een systeemeigen WebView en het systeemeigen Android-platform kan vereenvoudigen met behulp van invoegtoepassingen. Deze invoegtoepassingen maken JavaScript-eindpunten beschikbaar die kunnen worden aangeroepen vanuit uw code en worden gebruikt om systeemeigen Android-apparaat-API's aan te roepen. Enkele voorbeelden van Cordova-invoegtoepassingen zijn toegang tot apparaatservices zoals batterijstatus, bestandstoegang, trillingen/ ringtonen, enzovoort. Deze functies zijn doorgaans niet beschikbaar voor web-apps of browsers.

Er zijn twee populaire distributies van Cordova:

  • PhoneGap: Ondersteuning is stopgezet door Adobe.

  • Ionisch

Ionische

Ionic is een framework waarmee de gebruikersinterface (UI) van uw app wordt aangepast aan de ontwerptaal van elk platform (Android, iOS, Windows). Met Ionic kunt u Angular of React gebruiken.

Opmerking

Er is een nieuwe versie van Ionic die gebruikmaakt van een alternatief voor Cordova, capacitor genoemd. In dit alternatief worden containers gebruikt om uw app webvriendelijker te maken.

Aan de slag met Ionic door vereiste hulpprogramma's te installeren

Als u aan de slag wilt gaan met het bouwen van een PWA- of hybride web-app met Ionic, moet u eerst de volgende hulpprogramma's installeren:

Een nieuw project maken met Ionic Cordova en Angular

Installeer Ionic en Cordova door het volgende in uw opdrachtregel in te voeren:

npm install -g @ionic/cli cordova

Maak een Ionic Angular-app met behulp van de app-sjabloon Tabs door de opdracht in te voeren:

ionic start photo-gallery tabs

Ga naar de map van de app:

cd photo-gallery

Voer de app uit in uw webbrowser:

ionic serve

Zie de Ionic Cordova Angular-documentenvoor meer informatie. Bezoek de sectie Je Angular-app een PWA maken in de Ionic-documentatie om te leren hoe je je app kunt omzetten van een hybride app naar een PWA.

Een nieuw project maken met Ionic Capacitor en Angular

Installeer Ionic en Cordova-Res door het volgende in te voeren in de opdrachtregel:

npm install -g @ionic/cli native-run cordova-res

Maak een Ionic Angular-app met behulp van de app-sjabloon Tabs en voeg condensator toe door de opdracht in te voeren:

ionic start photo-gallery tabs --type=angular --capacitor

Ga naar de map van de app:

cd photo-gallery

Voeg onderdelen toe om de app een PWA te maken:

npm install @ionic/pwa-elements

Importeer @ionic/pwa-elements door het volgende toe te voegen aan uw src/main.ts bestand:

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

Voer de app uit in uw webbrowser:

ionic serve

Zie de Ionic Capacitor Angular docsvoor meer informatie. Ga naar de sectie Maak van je Angular-app een PWA in de Ionic-documentatie om te leren hoe je je app kunt omzetten van een hybride naar een PWA.

Een nieuw project maken met Ionic en React

Installeer de Ionic CLI door het volgende in te voeren op de opdrachtregel:

npm install -g @ionic/cli

Maak een nieuw project met React door de opdracht in te voeren:

ionic start myApp blank --type=react

Ga naar de map van de app:

cd myApp

Voer de app uit in uw webbrowser:

ionic serve

Zie de Ionic React-documentenvoor meer informatie. Ga naar de sectie over uw React-app een PWA maken in de Ionic-documenten om te leren hoe u uw app kunt omzetten van een hybride app naar een PWA.

Uw Ionic-app testen op een apparaat of emulator

Als u uw Ionic-app op een Android-apparaat wilt testen, moet u uw apparaat aansluiten (ervoor zorgen dat deze is ingeschakeld voor ontwikkeling), en voert u vervolgens op de opdrachtregel het volgende in:

ionic cordova run android

Als u uw Ionic-app wilt testen op een Android-apparaatemulator, moet u het volgende doen:

  1. Installeer de vereiste onderdelen: Java Development Kit (JDK), Gradle en de Android SDK.

  2. Een Android Virtual Device (AVD) maken: zie de [Android-ontwikkelaarshandleiding](https://developer.android.com/studio/run/managing-avds.html).

  3. Voer de opdracht voor Ionic in om uw app te bouwen en te implementeren in de emulator: ionic cordova emulate [<platform>] [options]. In dit geval moet de opdracht het volgende zijn:

ionic cordova emulate android --list

Zie de Cordova Emulator in de Ionic docs voor meer informatie.

  • Last updated on