7

I need to build an offline Phonegap app. However, all of my js functions need a web server to run well. Is it possible to embed a local web server into phpnegap project?

Vong Tình
  • 71
  • 1
  • 1
  • 4
  • 1
    you do not need a webserver to run you JS scripts. You need to include your JS scripts in you ** – frank Jul 25 '14 at 15:23
  • @frank: I understand what you tell. However, when I loadUrl by file protocol, the js functions don't work; and they work well with http protocol. I need to build offline app, so I think I need a local web server, too. It seems very difficult ----- :"( – Vong Tình Jul 25 '14 at 15:28
  • 1
    I will repeat. You do not need a webserver. The JavsScript file/program is interpreted by the phonegap app/phonegap browser. It does not matter whether you load the file through file/http or any protocol, as long as you load the JS files properly. You just have to specify the name of the JS file to load and the phonegap app will load it. I don't think you will get an answer asking you to load a webserver. It is a phone not a desktop computer, though phones are powerful nowdays. you just need to place the files in the asset folder and the app will pick the files from that folder. – frank Jul 25 '14 at 16:57
  • @frank: Thanks. I use js api from here http://developers.giscloud.com/javascript-api/javascript-reference/. And I can't understand why they only run well when having a web server. – Vong Tình Jul 28 '14 at 17:02
  • 8
    Frank is mistaken. There are several javascript frameworks that REQUIRE a web server. Here are two: phaser.js game engine, cesium.js 3d cartography. – Michael Sep 12 '14 at 05:01
  • I run into this same question. I agree with @Michael , For example, If you use Angular to make this offline app, it will require http protocol to execute XMLHttpRequest. – daniel Aug 02 '15 at 10:43
  • @daniel - The Ionic framework uses Angular and Cordova, and seems to work perfectly well without using an embedded web server, so Angular clearly doesn't require this. There may well be *some* frameworks that don't cooperate well with Cordova, but Angular is not one of them. – Jules Nov 21 '17 at 03:13

3 Answers3

8

Yes, it's possible using a Cordova HTTPD plugin:

https://github.com/floatinghotpot/cordova-httpd

I haven't used it yet, but I may need to with my current project.

One drawback is that if the IP address is known, others will be able to browse the hosted files. Before I deploy, I'll be changing that behavior.

Michael
  • 9,223
  • 3
  • 25
  • 23
  • 3
    What you say is a drawback is actually a great feature for a p2p app (like one I'm working on). This will enable phone-hosted websites or apps that allow (authorized) peers to send or receive files. @michael, do you have an update on whether you had to use it in the project you mentioned - and if it worked? – runlevelsix Feb 25 '15 at 17:21
  • The drawback is now a configurable option in cordova-httpd. So we both win :) As far as my app - the customer I'm building it for is unable to provide a required dataset, so I'm at a standstill. – Michael Mar 12 '15 at 05:30
  • floatinghotpot has a "localhost only" option when configuring the server to secure it against external access. – LetMyPeopleCode Aug 07 '17 at 22:39
  • Yes, I noted that in the previous comment 2 years ago – Michael Aug 08 '17 at 20:29
4

Now it is possible, I created a plugin what meets your requirements.

First install it via:

cordova plugin add https://github.com/bykof/cordova-plugin-webserver

Then just describe your Webserver in the start of your application

<html>
    <head>
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
    </head>
    <body>
      <script>

      // Wait for device API libraries to load
      document.addEventListener("deviceready", onDeviceReady, false);
      // device APIs are available
      function onDeviceReady() {
          webserver.onRequest(
              function(request) {
                  console.log("This is the request: ", request);

                  webserver.sendResponse(
                      request.requestId,
                      {
                          status: 200,
                          body: '<html>Hello World</html>',
                          headers: {
                              'Content-Type': 'text/html'
                          }
                      }
                  );
              }
          );
          
          // Starts webserver with default port 8080
          webserver.start();

          //... after a long long time
          // stop the server
          webserver.stop();
      }
      </script>
    </head>
</html>

after that you can access your webserver on another browser in your network: http://<ip-of-webserver-device-in-local-network>:8080

Reference: https://github.com/bykof/cordova-plugin-webserver

Airy
  • 5,484
  • 7
  • 53
  • 78
Michael Bykovski
  • 174
  • 4
  • 1
    sorry my question but how do i know the IP of that webserver? – Juan Fernandez Sosa Aug 13 '19 at 16:51
  • @JuanFernandezSosa I think you can send request to localhost:8080. But I must say documentation off this plugin is just useless. Not even a single thing mentioned or any example given – Airy Aug 15 '21 at 13:18
  • @Michael Bykobski how can i serve a file from my dataDirectory? I've done everything but simply can't make it working. Can you assist more on the local file serving – inoxious Sep 14 '21 at 17:02
0

An embedded webserver is possible, and in the (distant) past, Cordova Android even had one.

However, for the general use case it should not be needed. If you must serve files from a local server, see Michaels answer.

loadUrl through the native webview api is NOT the (best) to include javascript in the webview's runtime.

By default, there is no reason why you need to interact natively with the webview in the first place.

Instead, create an index.html and include the javascript you want through tags, as @frank describes

The cordovawebview.loadURL will by default load index.html, and does not need to be modified.

look at the www/index.html in the Cordova Hello World App for a simple example.

--edit-- link to index.html in CDV Hello World

Lorenzo
  • 413
  • 2
  • 8
  • 3
    Telling someone that their requirement is not needed doesn't make it any less of a requirement. Some large javascript frameworks use bootstrappers that load required scripts as they're called. One in particular that will not run with file:// protocol is cesiumjs. I'll post here again after the 17th (ios8 release date), when I'm able to test my app in cordova on a live device. – Michael Sep 12 '14 at 04:28
  • the context of the users requirement ("all MY js functions need a web server...") do not lead me to believe that he actually has this requirement. I think the problem is he does not know how to port his webapp to a cordova environment. If he responds with feedback, I can change my response. I have edited to clarify. – Lorenzo Sep 15 '14 at 17:58
  • 1
    He did update, in July - "his" javascript (which I took to mean the javascript he's using) is http://developers.giscloud.com/javascript-api/javascript-reference/ The reason is simple, as the javascript attempts to load support scripts, it's expecting an HTTP response code to determine if the load was successful - no HTTP response codes come from file:// interface. I have, before, modified a request to always receive a 200 response code - but that causes problems later if you're actually making real http requests. – Michael Sep 15 '14 at 18:04
  • I saw his update. You are repeating yourself. Do you have any feedback on how I have changed my answer? I added the caveat "general use case" and directed him to your answer for the server requirement. – Lorenzo Sep 16 '14 at 13:28
  • Gotcha. Viewing on my phone can be cumbersome. In a perfect world, cordova would send response codes for file requests. – Michael Sep 16 '14 at 13:31
  • That's actually an interesting possibility. I'm an apache committer on the Cordova project, and would be willing to spec this out with you if you're willing. – Lorenzo Sep 16 '14 at 14:59
  • It should be a relatively simple spec, matching common response codes with file system states. 200 and 404 would probably be the extent of it. Sounds like fun and positive progress – Michael Sep 16 '14 at 15:03