CODEWITHSUNDEEP
javascriptflutterflutter-webwpa
Confused
Confused

Reputation: 41

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.

Upvotes: 4

Views: 4716

Answers (2)

il_boga
il_boga

Reputation: 1523

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.

Upvotes: 1

AhmadKZX
AhmadKZX

Reputation: 303

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

mdn docs for service workers

Upvotes: 1

Related Questions