Steps to build a Flutter-PWA

build-flutter-pwa.md

FLUTTER AND PROJECT SETUP

• Setup flutter for web flutter channel master

• Download the latest dart SDK or any flutter updates/upgrades flutter doctor -v

• Now enable the Web Support flutter config --enable-web

• To verify, you can run flutter devices

• Use flutter command to generate a new App (if building from scratch) flutter create <YOUR APP NAME> cd <YOUR APP NAME>

• Adding Web support to the flutter app flutter create . NOTE:: “ . ” is important because it will give support to the existing app.

• Run-on web flutter run -d chrome

• Build project flutter build web

PWA CONFIGURATION:

1. manifest.json: This will be available in the project by default if you are using latest Flutter version
2. images,assets & icons: By default the flutter at the time of creation, generates all sorts of required logos and icons. This you can find in under the build/web folder. You can change if you need.
3. service-worker.js: Generated by default and is also linked to the index.html file under <header></header> tags. All sorts of required methods are made available by default. You can add any customization you might want.

Test Deployement:

If you want to test your Flutter-PWA App, you can use the folowing steps to instantly deploy it to a free server.

• Install a npm package surge globally. npm i -g surge

• Run the following command from inside the path /build/web of your project surge

• If using for first time, it will ask you to create an account.

• After you have created your account and logged in, follow the steps in the CLI.

• On entering all the required things, it will generate a live link to your App.

NOTE: Access the live link with https, as PWA works only with secured http protocol.