Is it possible to embed a local web server into phonegap project?

cordova embed local offline

16,728

Solution 1

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.

Solution 2

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

16,728

Author by

Vong Tình

I like coding. However, I am a bad programmer

Updated on June 06, 2022

Comments

Vong Tình almost 2 years

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?
- frank almost 10 years
  
  you do not need a webserver to run you JS scripts. You need to include your JS scripts in you <script> tag and it will be executed automatically. Place the JS files in you asset/www folder. why do you want to kill your poor phone :(
- Vong Tình almost 10 years
  
  @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 ----- :"(
- frank almost 10 years
  
  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.
- Vong Tình over 9 years
  
  @frank: Thanks. I use js api from here developers.giscloud.com/javascript-api/javascript-reference. And I can't understand why they only run well when having a web server.
- Michael over 9 years
  
  Frank is mistaken. There are several javascript frameworks that REQUIRE a web server. Here are two: phaser.js game engine, cesium.js 3d cartography.
- daniel over 8 years
  
  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.
- Jules over 6 years
  
  @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.
Michael over 9 years

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.
Lorenzo over 9 years

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.
Michael over 9 years

He did update, in July - "his" javascript (which I took to mean the javascript he's using) is 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.
Lorenzo over 9 years

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.
Michael over 9 years

Gotcha. Viewing on my phone can be cumbersome. In a perfect world, cordova would send response codes for file requests.
Lorenzo over 9 years

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.
Michael over 9 years

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
runlevelsix about 9 years

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?
Michael about 9 years

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.
LetMyPeopleCode over 6 years

floatinghotpot has a "localhost only" option when configuring the server to secure it against external access.
Michael over 6 years

Yes, I noted that in the previous comment 2 years ago
Juan Fernandez Sosa over 4 years

sorry my question but how do i know the IP of that webserver?
Airy over 2 years

@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
inoxious over 2 years

@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