-
Notifications
You must be signed in to change notification settings - Fork 0
/
cordova.html
282 lines (252 loc) · 15.1 KB
/
cordova.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<div id="main" class="clearfix two-columns-right">
<div id="intro">
<ol class="hp-breadcrumbs">
<li><a href="/" target="_top" onfocus="blurLink(this);">Home</a></li>
<li><a href="https://web.archive.org/web/20121023072434/https://developer.palm.com/content/resources.html"
target="_top" onfocus="blurLink(this);">Resources</a></li>
<li class="ctx-last">Building With Cordova</li>
</ol>
<h1 class="page-title">Building With Cordova</h1>
<ul class="inline-icon-list">
<li><a onclick="window.print(); return false;" href="javascript: void(0);" class="icon-print">Print</a></li>
<li><a href="" target="_top" class="icon-mail addthis_button_email">Email</a></li>
<li class="last">
<div class="addthis_toolbox addthis_default_style"><a
class="icon-share addthis_button_compact">Share</a></div>
</li>
</ul>
</div>
<div id="content" class="col-content">
<div class="default-content article-content">
<a id="c19922"></a>
<div class="csc-textpic csc-textpic-intext-right">
<div class="csc-textpic-imagewrap csc-textpic-single-image"><img
src="assets/cordova.jpg"
width="300" alt="" /></div>
<div class="csc-textpic-text">
<!-- cordova content -->
<div class="csc-textpic-text">
<h2 class="intro">Enyo Apps Cross-Platform</h2>
<p class="bodytext">
webOS apps written in Enyo can be compiled to run on Android or deployed on a web server as a PWA, using Cordova. If you follow
all of Google's rules, you can even distribute them on Google Play. This page provides brief
notes on how to set up an environment to cross-compile Enyo webOS apps for Android, and for other platforms that support PWAs when hosted on a web server.<br />
</p>
<p>These instructions were created on Ubuntu, but should be adaptable to other development environments.
</p>
</div>
<a name="c29941" id="c29941"></a>
<h2>Install the webOS SDK</h2>
<div class="csc-textpic-text">
<p class="bodytext">
If you haven't already, follow the steps on this site to <a href="sdk-pdk.html">install the SDK</a> on your development PC.
</p>
</div>
<a name="c29942" id="c29942"></a>
<h2>Install NodeJS 14 LTS</h2>
<div class="csc-textpic-text">
<p class="bodytext">
<h3>Install NVM from the <a href="https://github.com/nvm-sh/nvm">official source</a></h3>
<pre>nvm install --lts 14.21.3</pre>
<h3>Set NodeJS 14 LTS to default</h3>
<pre>nvm use 14.21.3</pre>
</p>
</div>
<a name="c29943" id="c29943"></a>
<h2>Install Cordova</h2>
<div class="csc-textpic-text">
<p class="bodytext">
<h3>Install Cordova globally using the NPM package manager</h3>
<pre>npm install -g cordova</pre>
</p>
</div>
<a name="c29944" id="c29944"></a>
<h2>Install Android Studio</h2>
<div class="csc-textpic-text">
<p class="bodytext">
Follow <a href="https://developer.android.com/studio/install">Google's instructions to install Android Studio.</a><br />
You might want to create an empty Android project to initialize the environment. Once
installed:
<ul>
<li>Tools > "Create Desktop Entry"</li>
<li>View > Appearance > "Show Main Menu in Separate Toolbar"</li>
</ul>
</p>
</div>
<a name="c29945" id="c29945"></a>
<h2>Add Older Device Support for Android</h2>
<div class="csc-textpic-text">
<p class="bodytext">
Use the SDK Manager to <a href="https://cordova.apache.org/docs/en/11.x/guide/platforms/android/">install support
for older versions</a> of Android<br />
<ul>
<li>In "SDK Tools" check the box for "Show Package Details"</li>
<li>In "SDK Tools" uncheck the box for "Hide Obsolete Packages"</li>
<li>Find the list item "Android SDK Tools (Obsolete)" and check it</li>
<li>Find the list item "31.0.0" and check it</li>
<li>Find the list item "30.0.3" and check it</li>
<li>Now hit Apply to install the items.</li>
</ul>
</p>
</div>
<a name="c29946" id="c29946"></a>
<h2>Install SDKMan and Gradle Command Line</h2>
<div class="csc-textpic-text">
<p class="bodytext">
SDKMan is an external SDK Manager that is required for Cordova. Find the installer from the
<a href="https://sdkman.io/">official website</a>.
</p>
<p class="bodytext">
Use SDKMan to install the command line version of Gradle that is compatible with Cordova:
<pre>sdk install gradle 7.2</pre>
</p>
</div>
<a name="c29947" id="c29947"></a>
<h2>Install ADB Command Line Tools</h2>
<div class="csc-textpic-text">
<p class="bodytext">
Using your package manager, or other source, install ADB command line tools. For example:
<pre>sudo apt install android-sdk-platform-tools-common</pre>
</p>
</div>
<a name="c29948" id="c29948"></a>
<h2>Add Paths</h2>
<div class="csc-textpic-text">
<p class="bodytext">
Ensure all the tools are in your PATH for your environment. For example:
<pre>export ANDROID_SDK_ROOT=$HOME/Android/Sdk #recommended setting<br>export ANDROID_HOME=$HOME/Android/Sdk #DEPRECATED, cordova might use<br>export PATH=$PATH:$ANDROID_HOME/tools<br>export PATH=$PATH:$ANDROID_HOME/platform-tools</pre>
</p>
</div>
<a name="c29949" id="c29949"></a>
<h2>Cordova Project Structure</h2>
<div class="csc-textpic-text">
Cordova acts as a "wrapper" around a typical webOS Project. In order to build for both environments, you need follow a folder structure that each set of tools expects:
<ul><li><Project Root></li>
<ul><li>cordova-wrapper</li>
<ul><li><Files and Folders added by Cordova command line tools></li></ul>
<li>enyo-app</li>
<ul><li>appinfo.json</li>
<li>index.html</li>
<li>package.json</li>
<li><Files and Folders added by webOS SDK command line tools></li>
</ul>
</ul>
</ul>
<p>You can download a "bootplate" project that pre-creates this directory structure for you:</p>
<p class="def-button"><a href="https://github.com/webOSArchive/enyo1-bootplate" target="_blank">Download Enyo 1 Bootplate</a></p>
<p class="def-button"><a href="https://github.com/webOSArchive/enyo2-bootplate" target="_blank">Download Enyo 2 Bootplate</a></p>
</div>
<a name="c29950" id="c29950"></a>
<h2>Cordova Commands</h2>
<div class="csc-textpic-text">
<p>Cordova command line tools are typically invoked from the <b><Project Root></b> folder -- not from within the cordova-wrapper folder. </p>
<p class="bodytext"> Add Android platform support to your project:
<pre>cordova platform add android</pre>
</p>
<p class="bodytext"> Build your project into an Android APK using Cordova:
<pre>cordova build android</pre>
</p>
<p class="bodytext"> If you encounter errors, you can reset Cordova by deleting platform support folders manually, and re-adding them with the command line. Eg:
<pre>rm -rf cordova-wrapper/platforms/android<br/>cordova platform add android</pre>
</div>
<a name="c29951" id="c29951"></a>
<h2>Working with Android Studio</h2>
<div class="csc-textpic-text">
<p>Since both Enyo and Cordova apps are really just web apps, using Android Studio is not required -- unless you want to distribute with Google Play. Google Play bundling requires signing and a newer bundling format that Cordova can't provide for. You can develop in any environment you wish, but when you're ready to build for Play, you must import the project into Android Studio.</p>
<h3>Import Android Platform</h3>
<p>When importing to Android Studio, do not import the Project Root. Instead import the android folder:
<pre><Project Root>/platforms/android</pre>
<p>Android Studio will prompt you to do some housekeeping -- not all of it is beneficial for legacy code! If prompted:
<ul>
<li>Upgrade the Gradle Wrapper - <b>Optional</b>, will not break your project.
<li>Upgrade the project (AGP Upgrade Assistant) - <b>Skip</b>, doing this will break your project.
</ul>
<h3>Resolve Errors and Update Targets</h3>
<p>Once imported, you will need to resolve some errors and do some updates...</p>
<ul>
<li>If you get an error like <b>Unable to make field private final java.lang.String java.io.File.path accessible</b>
you can fix it by opening the file <b>gradle.properties</b> and adding this line:
<pre>org.gradle.jvmargs=--add-opens java.base/java.io=ALL-UNNAMED</pre></li>
<li>Google requires you target recent API levels, and will not accept your app if you don't. Change the <b>SDK_VERSION</b> in the file <b>cdv-gradle-config.json</b> to meet Google's requirements.<br> <br></li>
<li>Add the following to the <b>activity</b> section of <b>AndroidManifest.xml</b>:
<pre>android:exported="true"</pre></li>
</ul>
<h3>Version Numbers</h3>
<p>Each submission to Google Play requires a unique <b>android:versionCode</b> and <b>andreoid:versionName</b> in the file <b>app/manifests/AndroidManifest.xml</b>.
</div>
<a name="c29952" id="c29952"></a>
<h2>Web Servers and PWA Platforms</h2>
<p>Your Cordova app can be hosted on a web server and used on other platforms like iOS and Windows as a PWA (Progressive Web App), but even if you only target Android, you'll likely need to make some changes to allow your app to work with web servers (such as data sources). See the notes below for content to consider including in the specified file.</p>
<p class="infobox"><b>Note:</b> Note: This section does not cover how to deal with CORS, but suffice it to say, webOS didn't have CORS protections and modern platforms do. Make sure your data source is configured (or proxied) to allow cross origin requests.</p>
<p><b><Platform Root>/cordova-wrapper/config.xml</b>
<pre>
<allow-intent href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<access origin="*" />
<preference name="Scheme" value="http" />
<platform name="android">
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>
</platform>
</pre>
</p>
<p><b><Platform Root>/enyo-app/index.html</b>
<pre><meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"></pre>
On iOS devices, scroll behavior can cause problems. Over-ride it by adding this to a <b><script></b> block:
<pre>
//Stop iOS bouncy overscroll
function onTouchStart(e) {
// Save position of touch
console.log("touchstart");
const touch = e.touches[0] || e.changedTouches[0];
window.lastY = touch.pageY;
}
function onTouchMove(e) {
console.log("touchmove");
// Check user isn't scrolling past content. If so, cancel move to prevent ios bouncing
const touch = e.touches[0] || e.changedTouches[0];
y = touch.pageY;
if (y < window.lastY && e.srcElement.scrollTop == (e.srcElement.scrollHeight - e.srcElement.clientHeight)) {
console.log("user is trying to scroll down without anywhere to scroll to. Canceling propagation.");
e.preventDefault();
} else if (y > window.lastY && e.srcElement.scrollTop == 0) {
console.log("user is trying to scroll up without anywhere to scroll to. Canceling propagation.");
e.preventDefault();
}
};
document.addEventListener("touchstart", onTouchStart, { passive: false });
document.addEventListener("touchmove", onTouchMove, { passive: false });
</pre>
</p>
<!-- /cordova-->
</div>
</div>
</div>
</div>
<div class="col-aside">
<div class="sidebox">
<h3>Contents</h3>
<ol class="article-nav">
<li class="current last"><a href="" target="_top">Building With Cordova</a>
<ol class="level-1">
<li><a href="#c29941" target="_top">Install the webOS SDK</a></li>
<li><a href="#c29942" target="_top">Install NodeJS</a></li>
<li><a href="#c29943" target="_top">Install Cordova</a></li>
<li><a href="#c29944" target="_top">Install Android Studio</a></li>
<li><a href="#c29945" target="_top">Add Older Device Support</a></li>
<li><a href="#c29946" target="_top">Install SDKMan and Gradle</a></li>
<li><a href="#c29947" target="_top">Install ADB Command Line</a></li>
<li><a href="#c29948" target="_top">Add PATHs</a></li>
<li><a href="#c29949" target="_top">Cordova Project Structure</a></li>
<li><a href="#c29950" target="_top">Cordova Commands</a></li>
<li><a href="#c29951" target="_top">Working with Android Studio</a></li>
<li class="last"><a href="#c29952" target="_top">Web Servers and PWA Platforms</a></li>
</ol>
</li>
</ol>
</div>
</div>
</div>