How to include mutiple html files in the build?

Questions
1

Hi,

So essentially I was getting the error: “Application Error net:ERR_FILE_NOT_FOUND (file//android_asset/www/untitled-1.html)” when trying to change pages in the app.

I realise now that only my index.html file was being built during the process. How do I include multiple html files when building?

Thanks in advance.

2

Any file you place in the www/ folder will be included in the app. You link to it as if it was in root “/”. For example <a href="/untitled-1.html">Link</a>

However, and this is just a suggestion, I think you should consider looking into making your app a single page app. Next Steps - Apache Cordova

Doing so will make your app snappier and ultimately make your life a whole lot easier. All of my apps have one and only one HTML file.

1 Like
3

Thanks for replying. All the html files are now in the apk but still getting the same error despite using the “/”.

Additionally, I am new to programming so not sure how to build all within one page. I’m essentially making a choose your own adventure app with links to different paths via href but cannot for the life of me get it working with android. Works absolutely fine on browser though.

4

I’d need to see your source.

Creating a SPA is not that hard, you can use frameworks like that link suggests. Or you can create your own simple SPA framework, which is what I normally do.

I created a quick jsfiddle which shows a very basic vanallia javascript SPA. This will change the content of the app/page every 5 seconds. First showing the home page, settings page, an error page, and then back to home page.

In a real app, you would likely have the changePage() function execute when someone clicks on a link, such as:

<a href="javascript:void(0)" onclick="changePage('home')">Home</a>

By doing this your app only needs to load all the HTML, javascript, and CSS elements once. This makes your app much snappier because using separate HTML files means everything has to reload each time a page is changed. Further, if you start using plugins it becomes much harder to use multiple HTML pages because you have to basically reinitialize your app over and over. This also makes it harder to maintain global variables.

In the end, you will thank yourself mightily if you learn to use SPA for hybrid apps.

1 Like
5

Heres my code:

> Blockquote

<!DOCTYPE html>

<html>
<head>
  <body>
    <main>
      <h1>Game</h1>
    <section>
      <img src="https://realinkremovedforconfidentiality.jpg" alt="GameLogo">
    </section>
    <section>
    <h2><a href="/untitled-1.html">Begin...</a></h2>
    </section>
</html>

Once I get this test app sorted I’ll have a look into JS a bit more as I’m probably limiting myself by not using it.

6
  1. That HTML is a mess. You never close your head or body tags.
  2. You shouldn’t link to static elements, like images, outside of your app unless absolutely necessary (I’m assuming that is a public/internet link since your redacted it). Your game logo should be embedded in the app. In fact, Apple would likely reject your app on that alone because they require apps to work/display properly when offline.
  3. Are you absolutely sure “untitled-1.html” exists? Check the spelling of both your link and the real file.
  4. If you are not using, or don’t know, javascript you are probably in over your head here. It also means this probably shouldn’t be an app but rather just a simple website. If you are trying to learn to make hybrid apps, that’s great. However, that means learning javascript first and foremost.
7

Hahaha thank you, I do appreciate the brutal honesty. I have only been learning for around a week now so I do apologise for my terrible code. This isn’t a commercial app or anything just something I wanted to pop on my android phone to test so wasn’t going to put it on app store or anything. I mainly just wanted to create something alongside learning and it was relatively easy doing it all in html through the browser so I assumed it would simple to do the same to an apk (i was wrong haha). Please see below that the file does exist.

image

8

It might have something to do with the bad HTML, not really sure.

Anyway, again, I think you should focus first on learning some basic javascript.

1 Like
9

Ok thanks for the suggestion I will do and perhaps will revisit this in a few months.