How to build PWA with Flutter
Blog: NASSCOM Official Blog
Flutter, created by Google is an open-source UI toolkit. It is widely used for developing natively compiled applications for mobile, web, and desktop from a single codebase. The latest stable version is Flutter 1.22.
Dart language is used to write flutter apps and it utilizes many of the language’s advanced features. The hot reload feature of Flutter helps you in rapidly and easily experimenting, building UIs, adding features, and fixing bugs. Updated source code files are injected into the running Dart Virtual Machine to make the hot reload feature work.
Flutter provides a wide variety of ready-to-use widgets with more focus on Material design. Most of these widgets are incredibly customizable, saving our time like no other framework before. Flutter helps deliver a well-performing cross-platform mobile application quickly.
Below are some key points for considering Flutter as your next development tool.
- UI and logic of the app won’t change based on the platform
- Develop code faster
- Time-to-market speed can be increased
- Close to native app performance
- UI customization potential is enormous
- Separate rendering engine
- Does not depend on platform-specific UI components
- Suitable for multiple target platform
- Minimizes the risks for your business
What is Progressive Web Application or PWA?
Progressive Web Application is the aftermath of new technologies that provide services similar to mobile applications through browsers. The PWA provides a native user experience similar to an installed mobile app by using a browser. A type of application software that is delivered through the web is called Progressive web application. It is intended to work on any platform that uses a standard compliant browser. So basically, progressive web apps are an enhanced version of a web app. The progressive web app gives your web app extra capabilities, like offline usage and push notifications and most importantly the users of your web app can install it as a normal app on their mobile phone or their computer. A progressive web app is trying to bridge the gap between a native app and a web app.
The progressive web app gives your web app extra capabilities, like offline usage and push notifications and most importantly the users of your web app can install it as a normal app on their mobile phone or their computer. So progressive web app is trying to bridge the gap between a native app and a web app. PWA’s are web applications that look and feel like a native application and it can work offline. Progressive web apps might not have all the capabilities that the native apps offer. Resources such as your phone’s camera and its sensors can be accessed with the native application. The support for using these hardware resources is still limited on the PWA side, but it’s a growing technology and Google is continuing to push it hard. If you look at the capabilities offered by the PWA, you get to use your app offline and you get to send push notifications to the users. In fact, Google also allows you to add your progressive web app to the google play store. Apple earlier didn’t allow you to use the capabilities of a PWA but slowly they’ve started to incorporate pwas in their iOS ecosystem. So right now, you can install progressive web apps from your safari web browser by going to your browser and add to the home screen. On that, it will be added to your home screen as a normal app and you can open it and use it directly without going to your web browser.
Why should I use Flutter Progressive Web App?
Flutter being a cross-platform development tool enables you to create performance-oriented applications in no time. With all the advantages of the Flutter SDK and Dart programming language one can develop applications for most of the major platforms.
The flexibility to run on multiple platforms with a single code base increases its reach and followers across platforms. This helps it target a bigger market when compared to focusing on native apps. Here, Flutter has the upper hand, with its advantage of Web Support as PWA, which means we can create the PWA of the mobile application that will run smoothly in the browser by wrapping it up and rendering as PWA. Developing apps in cross-platform with Flutter helps PWA solve the problem of reaching maximum users and devices.
Flutter PWA benefits:
- Offline access – enables offline access to pages, since we can save the pages as apps
- Faster loading time – if done correctly, it provides us with 3x time performance
- App Like feel – with UI abilities and control provided by the flutter
- No App store submission required – users can add these apps from any website through their browsers
- Single code base – software developers can use the same code to ship a PWA, due to its cross-platform ability.
Setup to build PWA with Flutter
This requires flutter installed in your device and the latest chrome version
- Setup Flutter for web
FLUTTER CHANNEL MASTER
The above command will take you to the master channel. This might take some time. After completing, run the following command.
FLUTTER DOCTOR -V
This will download the latest dart SDK. This also will take time to execute. Once it’s completed, we now need to enable web support for Flutter.
FLUTTER CONFIG –ENABLE-WEB
After enabling web configuration for Flutter, we can check for the available device
This will list out the available browsers in our system, like chrome, etc.
Now that we are done with setting up the Flutter web, we can start creating a project.
- Create a Project
FLUTTER CREATE NEW_PROJECT
This will create a new project with the specified project name and enter the project directory.
This will provide web support to previously created projects. Here,”.” is important
- Run on Web
FLUTTER RUN -D CHROME
The above command will run our app on the chrome on localhost
- Build Project
FLUTTER BUILD WEB
This command will build the application and creates a directory called web. This will be the root folder for our project. Now we can make the necessary configuration changes in the manifest. Images, icons, themes can be changed as per required in the manifest file found in the web folder.
- Deploy a PWA with Surge
Surge is a static web publishing tool. It is widely used among Front-End Developers. Using surge is the best way for front end developers to publish static web applications into production. We can use surge to publish our PWA.
- Install the latest version of node.js
- Instal surge using npm
- Windows – npm i -g surge
- Mac – sudo npm i -g surge
The above command installs surges globally on your system. Run the command surge inside the web directory we earlier created. This will give us a live link deployed on surge. The link will be denoted as domain and will have a file extension .sh. Open this file in your browser to view the application.
To remove an app from surge, run surge teardown followed by the URL name.
surge teardown <.sh>
- Check the App as PWA on Android and iOS devices
- On settings under Android’s Chrome browser, click on Add to Home Screen
- On iOS, use the share button in Safari browser for Adding to Home Screen
Flutter is a great tool to hang on to in the future since it lowers risks for a business. No problems with product development are likely to occur since it’s coordinated by Google. As per the current trends, Flutter won’t cause you any trouble finding software engineers, because there are already so many Android developers who are fans of Flutter in the community. The list of global companies using Flutter is increasing. With representatives such as Alibaba, Google Ads, AppTree, Reflectly, and My Leaf, which is proof of Flutter’s uncompromised quality over other competitors. All these great aspects make Flutter the perfect option for any IT business to prevent obstacles and in seeking specialists and when adjusting to new technologies. Compared to all the other alternative cross-platform approaches available, flutter is worth to be the number one choice for your business as it has minimal risks to a business.
The post How to build PWA with Flutter appeared first on NASSCOM Community |The Official Community of Indian IT Industry.