Ausführen von Chrome -Apps auf einem mobilen Gerät mit Cordova

Key Takeaways

• Chrome-Apps können auf Android- und iOS-Geräten mit einem Toolset ausführen, das auf Apache Cordova basiert, ein Open-Source-Framework für mobile Apps mithilfe von HTML, CSS und JavaScript. Cordova wickelt diese Web -Apps mithilfe der nativen Shell ein und ermöglicht die Verteilung in Google Play, dem Apple App Store und anderen Geschäften.
• Der Prozess des Erstellens einer Chrome -App beinhaltet das Erstellen eines Projektordners, das Definieren der erforderlichen Einstellungen in einer Manifest.json -Datei, das Erstellen eines Fensters für die App zum Start und das Einrichten eines AJAX -Aufrufs zum Abrufen von Daten. Dieser Prozess wurde mit der Erstellung einer einfachen Twitter -Chrome -App demonstriert.
• Ausführen einer Chrom -App auf Android, Java JDK 7 oder höher, Android SDK 4.4.2 oder höher und Apache Ant müssen auf dem System installiert werden. Das CCA-Befehlszeilen-Tool ist ebenfalls erforderlich. Nach dem Einrichten der Umgebung kann ein neues Projekt mit den vorhandenen Chrome -Apps zum Port mit spezifischen Befehlen erstellt werden.

Chrome -Apps sind bei Chrome -Benutzern beliebt. Und warum nicht, sie bieten eine Methode zum Erstellen einer tragbaren „Anwendung“ in der vertrauten Umgebung des Chrome -Browsers.

Stellen Sie sich die Leistung von Chrome -Apps vor, die auf Ihrem Smartphone verfügbar sind. Wir können jetzt unsere Lieblings -Chrome -Apps auf Android und iOS mit einem Toolsatz ausführen, das auf Apache Cordova basiert.

Cordova ist ein Open -Source -Framework für mobile Apps mithilfe von HTML, CSS und JavaScript. Cordova wickelt die HTML-, CSS- und JavaScript -Web -App mithilfe der nativen Shell ein und ermöglicht die Verteilung auf Google Play, den Apple App Store und andere Geschäfte.

Übersicht

In diesem Tutorial erstellen wir unsere eigene Chrome -App mit HTML, CSS und JavaScript und portieren sie in den Android -Emulator. Die Anwendung, die wir erstellen, ist eine einfache App, um die neuesten Tweets basierend auf einem bestimmten Twitter -Hashtag zu holen.

Chrome -App erstellen

Wir erstellen zunächst unsere Chrome -App. Sobald wir die Chrome -App erstellt und auf dem Chrome -Browser getestet haben, werden wir sie auf Android portieren.

Quellcode aus diesem Tutorial ist auf GitHub verfügbar.

Erstellen Sie einen Projektordner namens TwitterchromeApp. Erstellen Sie im Projektordner eine Manifest -Datei namens Manifest.json, die die Konfigurationsdatei für unsere App ist. Im Inside Manifest.json definieren wir einige Einstellungen, die von der Chrome -App erforderlich sind. Chrome -Apps erfordern, dass Manifest_version 2 sein muss. Wir werden auch den Namen der App, ihre Version und den Pfad zu einem Hintergrundskript definieren, um das Starten der App auszuführen. Wir holen die Tweets von einer externen Service -URL ab, sodass wir dies auch in dieser Datei angeben. Hier ist, wie das Manifest.json aussehen sollte:

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

Wenn die Chrome -App startet, werden ein Fenster angezeigt, in dem die Tweets von Twitter angezeigt werden. Chrome -Apps haben eine Veranstaltung namens Onlaunted, mit der wir das Fenster für unsere App beim App -Start erstellen.

Innerhalb des Projektordners TwitterchromeApp erstellen Sie einen anderen Ordner namens Skripte und erstellen Sie das Hintergrundskript namens Main.js. Fügen Sie Main.js den folgenden Code hinzu:

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

Innerhalb des Onlaunted -Ereignisses erstellen wir eine Witwe für unsere Chrome -App. Fügen Sie Main.js den folgenden Code hinzu:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>  <span>// creating window for app code will be here
</span><span>});</span>

Im obigen Code haben wir das Bildschirmobjekt verwendet, um die verfügbare Bildschirmbreite und -höhe zu erhalten. Basierend auf der tatsächlichen Breite des Bildschirms setzen wir die äußeren Grenzen des neuen Chromfensters, um korrekt anzuzeigen.

Chrome.app.window.create erstellt ein neues Fenster mit dem HTML im Datei index.html.

Innerhalb des Projektordners TwitterchromeApp Erstellen Sie eine neue Datei namens Index.html wie unten gezeigt:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>
    <span>var screenWidth = screen.availWidth;
</span>    <span>var screenHeight = screen.availHeight;
</span>    <span>var width = 500;
</span>    <span>var height = 300;
</span>
    chrome<span>.app.window.create('index.html', {
</span>        <span>id: "tweetAppID",
</span>        <span>outerBounds: {
</span>            <span>width: width,
</span>            <span>height: height,
</span>            <span>left: Math.round((screenWidth - width) / 2),
</span>            <span>top: Math.round((screenHeight - height) / 2)
</span>        <span>}
</span>    <span>});
</span><span>});</span>

Versuchen Sie nun, die Chrome -App in Ihrem Chrome -Browser zu installieren. Öffnen Sie Tools -> Erweiterungen (möglicherweise mehr Tools ). Aktivieren Sie den Entwicklermodus aus dem Kontrollkästchen oben rechts und klicken Sie dann auf ausgepackte Erweiterung und wählen Sie den Projektordner aus.

Führen Sie die Erweiterung entweder durch das Fenster Apps oder Erweiterungen aus und Sie sollten die folgenden: sehen:

Als nächstes werden wir einen Ajax -Anruf erstellen, der ausgelöst wird, wenn das Fenster startet, in dem Tweets von einer Service -URL abgerufen werden. Wir werden einen Dienst nutzen, der auf Heroku gehostet wird. Der Service hat einige Einschränkungen. Es holt nur Tweets mit dem Hashtag Perkytweets , dies reicht für unser Beispiel aus.

Wir werden jQuery verwenden, um unseren Ajax -Anruf zu tätigen. Laden Sie ihn also in den Script -Ordner herunter und fügen Sie ihn in Index.html ein, zum Beispiel:

<span><span>
</span><span><span><span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><title>></title></span>Chrome Tweet App<span><span></span>></span>
</span><span><span><span></span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Tweets !!<span><span></span>></span>
</span>
<span><span><span></span>></span>
</span>
<span><span><span></span>></span></span></span></span></span></span></span></span></span>

Erstellen Sie nun eine neue Datei namens script.js im Scripts -Ordner und erstellen Sie den Ajax -Aufruf wie gezeigt:

<span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/jquery-1.11.1.min.js"</span>></span><span><span></span>></span></span>

incise script.js in index.html:

einschließen

<span>$(function() {
</span>    $<span>.ajax({
</span>        <span>type: 'GET',
</span>        <span>url: 'http://twittersearchapi.herokuapp.com/search',
</span>        <span>success: function(response) {
</span>            <span>var resObj = JSON.parse(response);
</span>            <span>console.log(resObj);
</span>        <span>},
</span>        <span>error: function(error) {
</span>            <span>console.log(error);
</span>        <span>}
</span>    <span>});
</span><span>});</span>

Öffnen Sie nun Tools -> Erweiterungen (oder Weitere Tools ) und klicken Sie auf nachladen , um die Änderungen widerzuspiegeln. Klicken Sie als nächstes auf die App, um sie neu zu gestalten. Wenn Sie die Chromkonsole überprüfen (nur die normale Konsole, auf die Sie in Chrome zugreifen), sollte die Antwort der Service -URL aus angezeigt werden.

Als nächstes zeigen wir die Antworten in index.html an. Wir werden Bootstrap zum Styling der Seite verwenden.

Erstellen Sie einen Stylesordner in Ihrem Projektordner und laden Sie die Bootstrap -CSS -Dateien in den Ordner herunter. Fügen Sie die Bootstrap -CSS -Datei in index.html zu.

ein

<span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/script.js"</span>></span><span><span></span>></span></span>

Fügen Sie ein UL -Element in Index.html ein, um die Tweets anzuzeigen. So sollte index.html jetzt aussehen:

<span><span><span><link> href<span>="styles/bootstrap.min.css"</span> rel<span>="stylesheet"</span>></span></span></span>

Innerhalb des AJAX -Erfolgsaufrufs in scripts.js enthalten der folgende Code, um die von dem Service Call in die UL in INDEX abgerufenen Elemente anzuhängen.

<span><span>
</span><span><span><span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><title>></title></span>Chrome Tweet App<span><span></span>></span>
</span>    <span><span><span><link> href<span>="styles/bootstrap.min.css"</span> rel<span>="stylesheet"</span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/jquery-1.11.1.min.js"</span>></span><span><span></span>></span> <!-- Check this matches your jQuery version and file name -->
</span>    <span><span><span><script> src<span >="scripts/script.js"</script></span>></span><span><span></span>></span>
</span>
<span><span><span></span>></span>
</span>
<span><span><span>></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Tweets !!<span><span></span>></span>
</span>    <span><span><span><ul> id<span>="ulTweets"</span> class<span>="list-group"</span>></ul></span>
</span>
    <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span>
<span><span><span></span>></span></span></span></span></span></span></span></span></span></span></span>

neu laden und neu starten, und Sie sollten in der Lage sein, einen Bildschirm voller Tweets zu sehen.

Erstellen einer Chrom -App für Android

Da wir unsere App auf Android ausführen, stellen Sie sicher, dass Sie Java Jdk 7 oder höher, Android SDK 4.4.2 oder höher und Apache -Ant in Ihrem System installiert.

Wir benötigen auch das CCA -Befehlszeilenwerkzeug. Sie können es mit

installieren

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

detaillierte Informationen zum Einrichten Ihrer Umgebung zum Portieren von Chrome -Apps in Android und iOS finden Sie in den offiziellen Dokumenten.

Sobald die Einrichtung unserer Umgebung abgeschlossen ist, werden wir ein neues Projekt von unserem vorhandenen Twitterchromeapp zum Port nach Android erstellen. Führen Sie den folgenden Befehl aus, um das Projekt zu erstellen:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>  <span>// creating window for app code will be here
</span><span>});</span>

Navigieren Sie zu TwitterAppforandroid und führen Sie den folgenden Befehl aus, um das Projekt im Android -Emulator auszuführen:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>
    <span>var screenWidth = screen.availWidth;
</span>    <span>var screenHeight = screen.availHeight;
</span>    <span>var width = 500;
</span>    <span>var height = 300;
</span>
    chrome<span>.app.window.create('index.html', {
</span>        <span>id: "tweetAppID",
</span>        <span>outerBounds: {
</span>            <span>width: width,
</span>            <span>height: height,
</span>            <span>left: Math.round((screenWidth - width) / 2),
</span>            <span>top: Math.round((screenHeight - height) / 2)
</span>        <span>}
</span>    <span>});
</span><span>});</span>

Sobald der Emulator erfolgreich gestartet wird, sollten Sie die App im Emulator sehen.

Schlussfolgerung

In diesem Tutorial haben wir gesehen, wie man eine einfache Chrome -App erstellt und auf die Android -Plattform portiert. Weitere Informationen zum Ausführen von Chrome -Apps auf mobilen Geräten mithilfe von Apache Cordova finden Sie in den Dokumenten der Beamten.

Was denkst du über diese Chrome -App -Option zum Erstellen einer mobilen App? Bietet es Vorteile gegenüber nur einer Standard -HTML-, CSS- und JavaScript -Web -App in Cordova?

häufig gestellte Fragen (FAQs) zum Ausführen von Chrome -Apps auf dem mobilen Gerät mithilfe von Cordova

Wie kann ich Cordova auf meinem System installieren? Sobald Node.js installiert ist, können Sie Cordova mit NPM (Node Package Manager) installieren, indem Sie den Befehl npm install -g cordova in Ihrem Terminal oder Eingabeaufforderung ausführen. Das -G -Flag wird verwendet, um Cordova global in Ihrem System zu installieren. Geräte mit Cordova müssen Sie Folgendes auf Ihrem System installieren: node.js, cordova, Chrome -Apps für mobile Toolchain und Android SDK oder iOS SDK Abhängig von der Plattform, die Sie abzielen.

Wie kann ich meine Chrome -App in ein Cordova -Projekt umwandeln? durch den Befehl erstellen und den Namen Ihres Projekts. Zum Beispiel erstellen CCA MyProject. Dies erstellt ein neues Cordova -Projekt in einem Verzeichnis namens MyProject.

Wie kann ich meinem Cordova -Projekt Plattformen hinzufügen? Befehl hinzufügen, gefolgt vom Namen der Plattform. Zum Beispiel wird die Cordova -Plattform hinzufügen Android die Android -Plattform zu Ihrem Projekt hinzufügen.

Wie kann ich mein Cordova -Projekt erstellen? gefolgt vom Namen der Plattform. Zum Beispiel baut Cordova Build Android Ihr Projekt für die Android -Plattform auf.

Wie kann ich mein Cordova -Projekt auf einem Gerät ausführen? Zum Beispiel wird Cordova Run Android Ihr Projekt auf einem Android -Gerät ausführen.

Wie kann ich mein Cordova -Projekt debuggen? Dazu müssen Sie zu Chrome navigieren: // in Ihrem Chrome -Browser inspizieren und auf den Link unter Ihrem Gerät inspizieren. 🎜>

Während mit Cordova Sie Chrome -Apps auf einem mobilen Gerät ausführen können, gibt es einige Einschränkungen. Zum Beispiel werden nicht alle Chrom -APIs unterstützt, und es kann Unterschiede im Verhalten zwischen der Chrome -App und der Cordova -App aufgrund von Unterschieden in den zugrunde liegenden Plattformen geben.

Kann ich Cordova -Plugins in meiner Chrome -App verwenden? 🎜>

Ja, Sie können Cordova -Plugins in Ihrer Chrome -App verwenden. Dazu müssen Sie das Plugin mit dem Befehl cordova plugin hinzufügen, gefolgt vom Namen des Plugins.

Wie kann ich mein Cordova -Projekt aktualisieren? Cordova -Projekt können Sie den Befehl cordova plattform -update verwenden, gefolgt vom Namen der Plattform. Zum Beispiel wird die Cordova -Plattform -Update Android die Android -Plattform in Ihrem Projekt aktualisieren.

Das obige ist der detaillierte Inhalt vonAusführen von Chrome -Apps auf einem mobilen Gerät mit Cordova. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!