We Keep Coding

How To Run a Flutter Web Application Offline?

I got a problematic assignment from my employers.
I was given the task of developing simple software that will run strictly on Google Chrome,
without attempting to connect to the web (Security reasons).
I know flutter development and I feel comfortable with the sdk.
How should I develop a web app that can be deployed using a usb stick?
Looks like PWA can be an option, but the documentation is lacking in detail.
The system does not have the ability to run a local web server.
The Flutter app must be able to work with JS libraries, I intend to use jsQR.

service workers and indexedDB could help you for develop offline route app and offline api.
mdn docs for service workers

I'm not sure that this will fit your particular case: you say that the system can't run a local webserver, but what if you provide the webserver along with your software?
I just discovered get_server: you can find it here. It aims to allow developers to host their own HTTP server by using only flutter, without resorting to external tools or other coding/scripting languages. It allows also (and that's the relevant part) to wrap your flutter web app and make it run on local network.
For now I only tried with a very simple example, but it seems to be working. These are the steps I took:
create a new flutter project: since I needed the webserver to run on Windows, I had to get flutter ready for that (see here for help)
add get_server to the new pubspec.yaml
run flutter build web on your flutter web project, and copy the build/web output
folder in the root folder of the new project (I renamed the folder while copying since flutter might change the content of the web folder)
delete all the content of lib/main.dart
paste this (this the actual content of main.dart)
import 'package:get_server/get_server.dart' as gs;
void main() {
gs.runApp(
gs.GetServerApp(home: gs.FolderWidget('folderName')),
);
}
folderName is the name of the renamed folder containing the flutter web app build.
I ran this on Windows 'device' from AndroidStudio, and my original flutter web app was reachable at localhost:8080 (for now I just used the default options of get_server). I also got the webserver (empty) GUI as a white window: I guess that can be useful for some information regarding the server itself, although, if that windows closes, localhost:8080 becomes unavailable.
But, once released, you should be able to just run the executable from the USB stick, and then connect to it with Chrome.
PS: after some time using GetServer, I had to switch to other packages because of not-so-good docs and support. Now I'm using shelf, but also Alfred is a notable mention.

Is it possible to build a standalone HTML5 App *without* bundling a browser?

Solutions such as Electron require bundling an entire browser with the resulting .app build, which causes it to have several gigabytes even for a single hello world app. Most users already have Chrome installed on their computers, though. Is it possible to create a standalone .app application which uses the existing browser to open itself, hiding the frames / URL bar of the browser, and has access to system resources (fs, child processes, etc.)?
Edit: I'm thinking something on the lines of "bundle node.js + an HTML into a .app which opens an existing browser (pointing to that HTML) without the URL bar". Node.js can then access the filesystem and communicate with the App via HTTP, WS, etc. The only real problem here is opening Chrome without the URL bar, I guess.

I saw nodekit which is an attempt to use the JavaScript engine already available on each platform.
So for example on Mac it'll probably use WKWebView and on Windows 10 it'll run on the JavaScript Universal apps platform.
For most though, only having to test on electron makes developing apps much simpler and you can have a fully functional app in an installer under 40MB.

How to update my cordova/phonegap mobile application remotely in android?

I have written the mobile app in cordova + angularjs + sqlite. I need to distribute it directly from my server to devices not through the google play.
Now I need to update javascript files stored in www directory on android device. I tried file transfer from app directory (/data/data/my.application.directory/) to some public device directory or server and vice versa - no problem. But problem is the www directory is part of file:///android_asset/ that is read only so I am not able to store any data in there.
Any idea? Thanks.

This is the way I'm using for updating my app and I'm not using Google Play or other stores:
I'm using this cordova plugin : https://github.com/whiteoctober/cordova-plugin-app-version to check my actual app version
cordova.getAppVersion.getVersionNumber().then(function (version)
{
if(version)
// Check the server reference version
});
After, I'm sending the app version number to the server
The server checks the difference between the version sent and the reference version
If the device app version is older, I'm returning the new version to my app client

You provide little information about your application, your code and what you are trying to do, but let me try to help you either way.
If what you want to do is modifying files in the www directory in android clients already shipped/downloaded, forget about it, you would need direct access to the device, and this code is bundled when you ship it.
If you are looking for a hot code push solution, there might be a way of doing so installing additional cordova plugins
When you publish your application on the store - you pack in it all your web content: html files, JavaScript code, images and so on. There are two ways how you can update it:
Publish new version of the app on the store. But it takes time,
especially with the App Store.
Sacrifice the offline feature and load all the pages online. But as
soon as Internet connection goes down - application won't work.
Solution: install cordova-hot-code-push

Node.js app into an iOS app?

I have a Node.Js app running on a publicly accessible server.
I want to make it possible for users to access it as a native iOS app.
Is there a simple way of simply making an iOS app and having it show my Node.Js app running from the server? Or it's more complicated than that?
I looked into PhoneGap but maybe some other recommendations also?
Thanks!
PS I know the question is broad but that's why I'm asking – to focus my question and to know what to do next.

Node.js - this is a server side application. So you need to build client application which can communicate with your node.js server by Rest api or so...
As you mentioned you can build hybrid html5/js app with PhoneGap, Cordova, Ionic "wrappers/libraries" which will pack it into native iOS/Android/... application and that app can talk to your node.js server and transfer data you need.
Also, as Daniel Larsson mentioned for some specific pages you can use webview to display page straight from the web, but webview can be a part of your application but not an entire application, because Apple will reject it during review process.

If you want to port your existing web-app over to being a native app on the app store, I can positively recommend PhoneGap having developed multiple apps with it after completing the same research you are doing now.
As NYS said, you'll need to package all your web-app design (HTML/CSS+images/JS) inside the PhoneGap app, any other way simply wouldn't be responsive enough.
As for what to do next, I would dive straight into creating a PhoneGap application and see how your app runs inside the Cordova wrapper out of the box. The issues I faced were with scrolling on divs holding content, and non-responsive click events, both were easily solved with javascript libraries.
Cheers Chris!

You may use Socket.io for native option.
http://socket.io/blog/socket-io-on-ios/
https://github.com/socketio/socket.io-client-swift/
https://github.com/pkyeck/socket.IO-objc/
https://github.com/square/SocketRocket/

android app with apache cordova

I'm developing a web app using HTML5,CSS3 and JavaScript.
Then I want to use the Apache ordova platform to generate a native android app from my web app but I still don't understand what do I need for this,specially do I need a server-side development with php for example??

First off i suggest you read this
Pretty much your app will be able to accomplish a little bit more than what you would be able to do in a browser if all you had available was the ability to write html/js*.
*by this i mean that you have access to device-specific hardware which is not available in a browser and a few more things but pretty much that's it.
You will need to install node.js (or io.js), then install cordova through npm, and make sure you have the Android SDK installed. Once you create your project, your html/css/js will be wrapped into a native webview component, you do not need any server to render it, effectively your app is a native app that can be installed from google play.
You will need a server, typically a RESTful API, if your app needs to query data remotely or persist to some third party. If you are thinking through a classic MVC mindset (render a page through some php code) then you probably need to read about cordova and how it works. A cordova app is a client-side only app, no server-side processing is possible unless through a network communication to a server you have access to on the internet. You can do persistence locally (to the android device) and even use a local database, but remember that this db exists on the device, so you won't be able to share information between users unless you somehow coordinate that through your app (and most likely a server-side app / rest api).
It is unlikely that your existing web app can be wrapped into a cordova app straight away, cordova apps are single page apps mostly.