Pankaj Das

Pankaj Das

1656336423

How to Develop Progressive Web Apps in Flutter – Step by Step Guide

Technology that allows web browsers to provide services as mobile apps have resulted in a Progressive Web Application. As with an installed mobile app, the PWA gives the same native experience to users.

What does PWA stand for?

A progressive web app (PWA) is a mobile app that runs in the device’s default browser. Once you’ve downloaded the PWA from the website, you’ll be able to use it in the same web browser you used to access the website.

There are a variety of technologies accessible for creating a PWA. However, Flutter is recommended for creating a prominent and optimum PWA with the help of Flutter mobile app developer.

For starters, how would you go about creating a Flutter PWA?

You may join us on this journey to build and deploy a PWA using Flutter regularly.

Requirements for the Computer System:

Get the Flutter SDK for your platform and get started.

Install Google Chrome on your computer for the time being, the only browser that can be used to debug web apps is Google Chrome.

Flutter’s process for creating PWA Steps

1. Install Flutter for the Web

  • Flutter Channel Master

It won’t be immediate, but after some delay, proceed as follows.

  • flutter doctor -v

Since it will download the most recent version of the Dart software development kit, a significant amount of time will be needed.

The following should be the outcome:

[√] Flutter (Channel master, v1.13.1-pre.59, on Microsoft Windows [Version 10.0.18362.535], locale en-US)

• Flutter version 1.13.1-pre.59 at C:flutter
• Framework revision e58dc16d7b (11 days ago), 2021-12-06 18:21:52 -0800
• Engine revision e7b69ced2e
• Dart version 2.7.0 (build 2.7.0-dev.2.1 a9c77229c2)

 

Flutter doctor for web apps

Flutter doctor for web apps

 

flutter config –enable-web

It will make web support possible.

flutter devices

The following is an example of the output it will provide:

 

flutter devices

flutter devices

 

Chrome • chrome • web-javascript • Google Chrome 79.0.3945.79
Web Server • web-server • web-javascript • Flutter Tools

2. Create new project

flutter create hello

 

cd hello

It will make a brand-new app called hello.

Include web functionality in an existing application.

Flutter create.

“.” is essential since it will provide support for the already available app.

3. Run-on web

flutter run -d chrome

It will execute our Application using Chrome on the localhost.

4. Run-on IP

Mac or Windows systems must be linked to the same Wi-Fi network to fulfil this requirement.

On windows

flutter run -d chrome –web-hostname=192.168.1.3 –web-port=80
192.168.1.3 IP of the windows

 

flutter run -d chrome

flutter run -d chrome

 

It will launch our Application on Chrome using the provided IP address and insert that IP address into a mobile browser.

On Mac:

flutter run -d chrome --web-hostname=192.168.1.3

192.168.1.3 IP of the mac

5. Build project

flutter build web

Within the build directory, it will create a folder with the name ” web ” (please check the picture below for more information).

 

flutter build web

flutter build web

 

Look in the web folder; you’ll find the following files there.

Kindly note that these files are automatically produced and will be generated each time we build the project for the web; thus, if you could please duplicate this file so that we can have a backup of it.

6. PWA CONFIGURATION

1. Generate manifest.json file

The following files will be produced as a result:

 

Generate manifest.json file

Generate manifest.json file

 

Please make a copy of the pictures folder and the manifest file, and place them within the web folder.

2. Edit index.html (from web folder)

index.html file will look like this:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>core</title>

<link rel="manifest" href="manifest.json">

<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">

<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">

<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">

<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

<meta name="msapplication-TileColor" content="#ffffff">

<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

<meta name="theme-color" content="#ffffff">

</head>

<body>

<script src="main.dart.js" type="application/javascript"></script>

</body>

</html>

Our code for the PWA is now complete. Let’s make a live connection and put it to the test.

7. Make a PWA Application Deployment Using Surge.

The Front-End Developers’ tool for publishing static web content is called Surge. It is the most effective method for programmers to use when publishing static web apps for use in production.

Requirements:

1. To begin, check that you are using the most recent version of Node.js

2. After that, install Surge with the help of npm by executing the following command:

npm i -g surge

Using a Mac, you must remember to include the sudo command.

sudo npm i -g surge

Using this command will install Surge globally on your system, which means you can use it in any location.

To get a live connection and deploy on Surge, use this command.

Surge

We need some of your time and will provide the results:

Now enter the URL “teeny-tiny-drawer.surge.sh” into the web browser, and it will work.

If you no longer want your project to be shown on Surge

surge teardown teeny-tiny-drawer.surge.sh

 

surge teardown teeny-tiny-drawer.surge.sh

surge teardown teeny-tiny-drawer.surge.sh

 

8. Ensure that the Application is a PWA on both Android and iOS.

Go into the settings of your Android’s Chrome browser, and then click on the Add to Home Screen option.

When using Safari on an iOS device, tap the share button and the Add to Home Screen option.

Conclusion

To summarize, using Flutter to design and launch your Progressive Web Application is a straightforward process requiring only a few steps. PWAs can be developed using Flutter because it provides the optimum user experience, meaning that users can easily interact with PWAs in the same way that they do with native apps. This makes Flutter the ideal technology to utilize. Hire Flutter development company from www.flutteragency.com to get access to the highly professional Flutter developers and required tools for your project development.

Source:  https://flutteragency.com/develop-progressive-web-apps-flutter/

What is GEEK

Buddha Community

Fredy  Larson

Fredy Larson

1595059664

How long does it take to develop/build an app?

With more of us using smartphones, the popularity of mobile applications has exploded. In the digital era, the number of people looking for products and services online is growing rapidly. Smartphone owners look for mobile applications that give them quick access to companies’ products and services. As a result, mobile apps provide customers with a lot of benefits in just one device.

Likewise, companies use mobile apps to increase customer loyalty and improve their services. Mobile Developers are in high demand as companies use apps not only to create brand awareness but also to gather information. For that reason, mobile apps are used as tools to collect valuable data from customers to help companies improve their offer.

There are many types of mobile applications, each with its own advantages. For example, native apps perform better, while web apps don’t need to be customized for the platform or operating system (OS). Likewise, hybrid apps provide users with comfortable user experience. However, you may be wondering how long it takes to develop an app.

To give you an idea of how long the app development process takes, here’s a short guide.

App Idea & Research

app-idea-research

_Average time spent: two to five weeks _

This is the initial stage and a crucial step in setting the project in the right direction. In this stage, you brainstorm ideas and select the best one. Apart from that, you’ll need to do some research to see if your idea is viable. Remember that coming up with an idea is easy; the hard part is to make it a reality.

All your ideas may seem viable, but you still have to run some tests to keep it as real as possible. For that reason, when Web Developers are building a web app, they analyze the available ideas to see which one is the best match for the targeted audience.

Targeting the right audience is crucial when you are developing an app. It saves time when shaping the app in the right direction as you have a clear set of objectives. Likewise, analyzing how the app affects the market is essential. During the research process, App Developers must gather information about potential competitors and threats. This helps the app owners develop strategies to tackle difficulties that come up after the launch.

The research process can take several weeks, but it determines how successful your app can be. For that reason, you must take your time to know all the weaknesses and strengths of the competitors, possible app strategies, and targeted audience.

The outcomes of this stage are app prototypes and the minimum feasible product.

#android app #frontend #ios app #minimum viable product (mvp) #mobile app development #web development #android app development #app development #app development for ios and android #app development process #ios and android app development #ios app development #stages in app development

Top Progressive Web App Development Company in USA

AppClues Infotech is one of the leading progressive web app development company in USA. We offer the best progressive web app development & design solution to create high-performance & secure PWA.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top progressive web app development company in usa #hire progressive web app developers in usa #best pwa development company in usa #custom progressive web app development company #progressive web apps development #progressive web app development services

Rahim Makhani

Rahim Makhani

1625717787

Reach out to more customers: get a progressive web app

A Progressive Web App is a type of application software that is delivered through the web. It is built using standard web technologies HTML, CSS, and JavaScript. It is expected to work on any platform that uses a standards-compliant browser, including desktop and mobile.

It is also known as a type of web page or web server. With the help of these PWA web pages, you can reach more customers for a business by marketing and promoting your business through web pages. You can also gain more customers by developing PWA by hiring a progressive web app development company. Nevina Infotech is a company that can help you to build your progressive web app with the help of its enthusiastic developers.

#progressive web app development company #progressive web app developers #progressive web app platform #progressive web app development services #progressive web app development

Rahim Makhani

Rahim Makhani

1620187126

Get your Custom Progressive Web App at an affordable Price

Progressive Web App or PWA is a type of application software that is delivered over the web. It is built using standard web technologies, including HTML, CSS, and JavaScript. It is designed to work on any platform that uses a standards-compliant browser. It can work on both desktop and mobile devices.

PWA is a type of website or web page known as a web application. It doesn’t require separate bundling or distribution.

Are you searching for a progressive web app development company to develop your custom PWA at an affordable rate? Then Nevina Infotech is the best suitable choice for you. We have experienced and dedicated developers who will help you to develop your custom PWA as per your requirement.

#progressive web app development company #progressive web app developers #progressive web app platform #progressive web app development services #progressive web app development

Rahim Makhani

Rahim Makhani

1626327771

Get your custom progressive web app with the latest features

Suppose you are looking for an app that can be run on any platform, whether on a desktop or a smartphone. Progressive web app development can provide this functionality to your app. It’s made using the most common web technologies, including HTML, CSS, and JavaScript.

To get a PWA for your business requirements, you can find a progressive web app development company that can understand your vision and give you the best app that you deserve. Nevina Infotech is one of the best PWA development companies, which have the most dedicated developers with the experience of app development that can help you achieve your goals.

#progressive web app development company #progressive web app developers #progressive web app platform #progressive web app development services #progressive web app development