How to build PWA with Flutter

Blog: NASSCOM Official Blog

Howto build PWA with Flutter

Introduction

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.

With Flutter improving and growing in each version, Flutter web apps are getting more attention from developers. Flutter’s core drawing layer is implemented on top of standard browser APIs, in addition to Dart getting compiled to JavaScript for the addition of web support for Flutter, instead of ARM machine code which is used for mobile applications. Flutter provides portable, high-quality, and performant user experience across modern browsers by using a combination of DOM, Canvas, and CSS.

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.

Now what makes a web app a progressive web app? A progressive web app needs to implement something called a service worker. A service worker is a JavaScript program that sort of bridges the gap between network and cache. So, if you don’t have a network, the service worker is supposed to handle all the caching of network requests so that your request can be fulfilled locally without being connected to the internet. You need to have a web app manifest which will include things like your app icon. If users want to install your progressive web app on their home screen what icon do, they use for the app, app name etc in the app manifest. Google chrome developer tools have really great extensions for checking your progressive web app. In its Lighthouse, you can load your web application and you can go to the lighthouse audit and you can see what items you’ve already implemented and what you need to implement to qualify as a progressive web app.

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

FLUTTER DEVICES

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

cd new_project

This will create a new project with the specified project name and enter the project directory.

FLUTTER CREATE.

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.

REQUIREMENTS

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

Conclusion

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.