SlideShare a Scribd company logo
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 config –enable-web
It will make web support possible.
flutter devices
The following is an example of the output it will
provide:
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
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).
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:
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:
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.
npm i -g surge
Using a Mac, you must remember to include the sudo command.
sudo npm i -g surge
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
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/

More Related Content

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

OpenStack Murano introduction
OpenStack Murano introductionOpenStack Murano introduction
OpenStack Murano introduction
Victor Zhang
 
Google Glass Mirror API Setup
Google Glass Mirror API SetupGoogle Glass Mirror API Setup
Google Glass Mirror API Setup
Diana Michelle
 
GWT and PWA
GWT and PWAGWT and PWA
How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications
Concetto Labs
 
Setting up the hyperledger composer in ubuntu
Setting up the hyperledger composer in ubuntuSetting up the hyperledger composer in ubuntu
Setting up the hyperledger composer in ubuntu
kesavan N B
 
flutterbootcamp
flutterbootcampflutterbootcamp
flutterbootcamp
RakshaAgrawal21
 
flutter_bootcamp_MUGDSC_Presentation.pptx
flutter_bootcamp_MUGDSC_Presentation.pptxflutter_bootcamp_MUGDSC_Presentation.pptx
flutter_bootcamp_MUGDSC_Presentation.pptx
RakshaAgrawal21
 
Everything about flutter web development
Everything about flutter web developmentEverything about flutter web development
Everything about flutter web development
Katy Slemon
 
Progressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent ConventoProgressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent Convento
DEVCON
 
Webapps development on ubuntu
Webapps development on ubuntuWebapps development on ubuntu
Webapps development on ubuntu
Xiaoguo Liu
 
M365 global developer bootcamp 2019 PA
M365 global developer bootcamp 2019  PAM365 global developer bootcamp 2019  PA
M365 global developer bootcamp 2019 PA
Thomas Daly
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - text
Toma Velev
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by Citytech
Ritwik Das
 
Apache cordova
Apache cordovaApache cordova
Apache cordova
Carlo Bernaschina
 
Cloud Platform as a Service: Heroku
Cloud Platform as a Service: HerokuCloud Platform as a Service: Heroku
Cloud Platform as a Service: Heroku
L&T Technology Services Limited
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
RapidValue
 
Overseeing Ship's Surveys and Surveyors Globally Using IoT and Docker by Jay ...
Overseeing Ship's Surveys and Surveyors Globally Using IoT and Docker by Jay ...Overseeing Ship's Surveys and Surveyors Globally Using IoT and Docker by Jay ...
Overseeing Ship's Surveys and Surveyors Globally Using IoT and Docker by Jay ...
Docker, Inc.
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
AnjaliTanpure1
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland
Imran Sayed
 
Prizm Installation Guide
Prizm Installation GuidePrizm Installation Guide
Prizm Installation Guide
vjvarenya
 

Similar to How to Develop Progressive Web Apps in Flutter – Step by Step Guide.pptx (20)

OpenStack Murano introduction
OpenStack Murano introductionOpenStack Murano introduction
OpenStack Murano introduction
 
Google Glass Mirror API Setup
Google Glass Mirror API SetupGoogle Glass Mirror API Setup
Google Glass Mirror API Setup
 
GWT and PWA
GWT and PWAGWT and PWA
GWT and PWA
 
How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications
 
Setting up the hyperledger composer in ubuntu
Setting up the hyperledger composer in ubuntuSetting up the hyperledger composer in ubuntu
Setting up the hyperledger composer in ubuntu
 
flutterbootcamp
flutterbootcampflutterbootcamp
flutterbootcamp
 
flutter_bootcamp_MUGDSC_Presentation.pptx
flutter_bootcamp_MUGDSC_Presentation.pptxflutter_bootcamp_MUGDSC_Presentation.pptx
flutter_bootcamp_MUGDSC_Presentation.pptx
 
Everything about flutter web development
Everything about flutter web developmentEverything about flutter web development
Everything about flutter web development
 
Progressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent ConventoProgressive Web Apps by Millicent Convento
Progressive Web Apps by Millicent Convento
 
Webapps development on ubuntu
Webapps development on ubuntuWebapps development on ubuntu
Webapps development on ubuntu
 
M365 global developer bootcamp 2019 PA
M365 global developer bootcamp 2019  PAM365 global developer bootcamp 2019  PA
M365 global developer bootcamp 2019 PA
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - text
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by Citytech
 
Apache cordova
Apache cordovaApache cordova
Apache cordova
 
Cloud Platform as a Service: Heroku
Cloud Platform as a Service: HerokuCloud Platform as a Service: Heroku
Cloud Platform as a Service: Heroku
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
 
Overseeing Ship's Surveys and Surveyors Globally Using IoT and Docker by Jay ...
Overseeing Ship's Surveys and Surveyors Globally Using IoT and Docker by Jay ...Overseeing Ship's Surveys and Surveyors Globally Using IoT and Docker by Jay ...
Overseeing Ship's Surveys and Surveyors Globally Using IoT and Docker by Jay ...
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland
 
Prizm Installation Guide
Prizm Installation GuidePrizm Installation Guide
Prizm Installation Guide
 

More from BOSC Tech Labs

GoRouter_ The Key to Next-Level Routing in Flutter Development.pdf
GoRouter_ The Key to Next-Level Routing in Flutter Development.pdfGoRouter_ The Key to Next-Level Routing in Flutter Development.pdf
GoRouter_ The Key to Next-Level Routing in Flutter Development.pdf
BOSC Tech Labs
 
5 Key Steps to Successfully Hire Reactjs App Developers.pdf
5 Key Steps to Successfully Hire Reactjs App Developers.pdf5 Key Steps to Successfully Hire Reactjs App Developers.pdf
5 Key Steps to Successfully Hire Reactjs App Developers.pdf
BOSC Tech Labs
 
How to set focus on an input field after rendering in ReactJS in 2024_.pdf
How to set focus on an input field after rendering in ReactJS in 2024_.pdfHow to set focus on an input field after rendering in ReactJS in 2024_.pdf
How to set focus on an input field after rendering in ReactJS in 2024_.pdf
BOSC Tech Labs
 
How to Create Your First Android App Step by Step.pdf
How to Create Your First Android App Step by Step.pdfHow to Create Your First Android App Step by Step.pdf
How to Create Your First Android App Step by Step.pdf
BOSC Tech Labs
 
How to Create Custom Animations in Flutter – A Step-by-Step Guide.pdf
How to Create Custom Animations in Flutter – A Step-by-Step Guide.pdfHow to Create Custom Animations in Flutter – A Step-by-Step Guide.pdf
How to Create Custom Animations in Flutter – A Step-by-Step Guide.pdf
BOSC Tech Labs
 
How to create components in ReactJS_.pdf
How to create components in ReactJS_.pdfHow to create components in ReactJS_.pdf
How to create components in ReactJS_.pdf
BOSC Tech Labs
 
Guide 101_ Material Design in Android App Development.pdf
Guide 101_ Material Design in Android App Development.pdfGuide 101_ Material Design in Android App Development.pdf
Guide 101_ Material Design in Android App Development.pdf
BOSC Tech Labs
 
How do you hire a skilled Android developer for your project_.pdf
How do you hire a skilled Android developer for your project_.pdfHow do you hire a skilled Android developer for your project_.pdf
How do you hire a skilled Android developer for your project_.pdf
BOSC Tech Labs
 
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdf
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdfGuide to 2024’s Elite Software Developers by MobileAppDaily.pdf
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdf
BOSC Tech Labs
 
How to build a live chat widget in React_.pdf
How to build a live chat widget in React_.pdfHow to build a live chat widget in React_.pdf
How to build a live chat widget in React_.pdf
BOSC Tech Labs
 
React Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfReact Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdf
BOSC Tech Labs
 
How to hire ios app development experts for your next project_.pdf
How to hire ios app development experts for your next project_.pdfHow to hire ios app development experts for your next project_.pdf
How to hire ios app development experts for your next project_.pdf
BOSC Tech Labs
 
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdfSwiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
BOSC Tech Labs
 
3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf
BOSC Tech Labs
 
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
BOSC Tech Labs
 
The Role iOS App Development_ Hiring for the Future.pdf
The Role iOS App Development_ Hiring for the Future.pdfThe Role iOS App Development_ Hiring for the Future.pdf
The Role iOS App Development_ Hiring for the Future.pdf
BOSC Tech Labs
 
React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web Development
BOSC Tech Labs
 
2024 Custom Software Development Guide: Trends, Steps & Benefits
2024 Custom Software Development Guide: Trends, Steps & Benefits2024 Custom Software Development Guide: Trends, Steps & Benefits
2024 Custom Software Development Guide: Trends, Steps & Benefits
BOSC Tech Labs
 
What is the Easiest Way to Hire a React Developer?
What is the Easiest Way to Hire a React Developer?What is the Easiest Way to Hire a React Developer?
What is the Easiest Way to Hire a React Developer?
BOSC Tech Labs
 
Top 10 React Carousel Component Libraries and their Usage Trends
Top 10 React Carousel Component Libraries and their Usage TrendsTop 10 React Carousel Component Libraries and their Usage Trends
Top 10 React Carousel Component Libraries and their Usage Trends
BOSC Tech Labs
 

More from BOSC Tech Labs (20)

GoRouter_ The Key to Next-Level Routing in Flutter Development.pdf
GoRouter_ The Key to Next-Level Routing in Flutter Development.pdfGoRouter_ The Key to Next-Level Routing in Flutter Development.pdf
GoRouter_ The Key to Next-Level Routing in Flutter Development.pdf
 
5 Key Steps to Successfully Hire Reactjs App Developers.pdf
5 Key Steps to Successfully Hire Reactjs App Developers.pdf5 Key Steps to Successfully Hire Reactjs App Developers.pdf
5 Key Steps to Successfully Hire Reactjs App Developers.pdf
 
How to set focus on an input field after rendering in ReactJS in 2024_.pdf
How to set focus on an input field after rendering in ReactJS in 2024_.pdfHow to set focus on an input field after rendering in ReactJS in 2024_.pdf
How to set focus on an input field after rendering in ReactJS in 2024_.pdf
 
How to Create Your First Android App Step by Step.pdf
How to Create Your First Android App Step by Step.pdfHow to Create Your First Android App Step by Step.pdf
How to Create Your First Android App Step by Step.pdf
 
How to Create Custom Animations in Flutter – A Step-by-Step Guide.pdf
How to Create Custom Animations in Flutter – A Step-by-Step Guide.pdfHow to Create Custom Animations in Flutter – A Step-by-Step Guide.pdf
How to Create Custom Animations in Flutter – A Step-by-Step Guide.pdf
 
How to create components in ReactJS_.pdf
How to create components in ReactJS_.pdfHow to create components in ReactJS_.pdf
How to create components in ReactJS_.pdf
 
Guide 101_ Material Design in Android App Development.pdf
Guide 101_ Material Design in Android App Development.pdfGuide 101_ Material Design in Android App Development.pdf
Guide 101_ Material Design in Android App Development.pdf
 
How do you hire a skilled Android developer for your project_.pdf
How do you hire a skilled Android developer for your project_.pdfHow do you hire a skilled Android developer for your project_.pdf
How do you hire a skilled Android developer for your project_.pdf
 
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdf
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdfGuide to 2024’s Elite Software Developers by MobileAppDaily.pdf
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdf
 
How to build a live chat widget in React_.pdf
How to build a live chat widget in React_.pdfHow to build a live chat widget in React_.pdf
How to build a live chat widget in React_.pdf
 
React Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfReact Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdf
 
How to hire ios app development experts for your next project_.pdf
How to hire ios app development experts for your next project_.pdfHow to hire ios app development experts for your next project_.pdf
How to hire ios app development experts for your next project_.pdf
 
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdfSwiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
 
3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf
 
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
 
The Role iOS App Development_ Hiring for the Future.pdf
The Role iOS App Development_ Hiring for the Future.pdfThe Role iOS App Development_ Hiring for the Future.pdf
The Role iOS App Development_ Hiring for the Future.pdf
 
React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web Development
 
2024 Custom Software Development Guide: Trends, Steps & Benefits
2024 Custom Software Development Guide: Trends, Steps & Benefits2024 Custom Software Development Guide: Trends, Steps & Benefits
2024 Custom Software Development Guide: Trends, Steps & Benefits
 
What is the Easiest Way to Hire a React Developer?
What is the Easiest Way to Hire a React Developer?What is the Easiest Way to Hire a React Developer?
What is the Easiest Way to Hire a React Developer?
 
Top 10 React Carousel Component Libraries and their Usage Trends
Top 10 React Carousel Component Libraries and their Usage TrendsTop 10 React Carousel Component Libraries and their Usage Trends
Top 10 React Carousel Component Libraries and their Usage Trends
 

Recently uploaded

Providing Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisProviding Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
Globus
 
Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
Globus
 
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Globus
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
NYGGS Automation Suite
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Shahin Sheidaei
 
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Globus
 
How to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good PracticesHow to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good Practices
Globus
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus
 
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns
 
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILBeyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Natan Silnitsky
 
RISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent EnterpriseRISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent Enterprise
Srikant77
 
Into the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdfInto the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdf
Ortus Solutions, Corp
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
Tendenci - The Open Source AMS (Association Management Software)
 
Quarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden ExtensionsQuarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden Extensions
Max Andersen
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
Juraj Vysvader
 
May Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdfMay Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdf
Adele Miller
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
takuyayamamoto1800
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
abdulrafaychaudhry
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
Globus
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
Tier1 app
 

Recently uploaded (20)

Providing Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisProviding Globus Services to Users of JASMIN for Environmental Data Analysis
Providing Globus Services to Users of JASMIN for Environmental Data Analysis
 
Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
 
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
 
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...
 
How to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good PracticesHow to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good Practices
 
Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024Globus Connect Server Deep Dive - GlobusWorld 2024
Globus Connect Server Deep Dive - GlobusWorld 2024
 
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
 
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILBeyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
 
RISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent EnterpriseRISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent Enterprise
 
Into the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdfInto the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdf
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
 
Quarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden ExtensionsQuarkus Hidden and Forbidden Extensions
Quarkus Hidden and Forbidden Extensions
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
 
May Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdfMay Marketo Masterclass, London MUG May 22 2024.pdf
May Marketo Masterclass, London MUG May 22 2024.pdf
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
 

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

  • 1.
  • 2. 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.
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6. 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)
  • 7. flutter config –enable-web It will make web support possible. flutter devices The following is an example of the output it will provide:
  • 8. Chrome • chrome • web-javascript • Google Chrome 79.0.3945.79 Web Server • web-server • web-javascript • Flutter Tools
  • 9. 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.
  • 10. 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
  • 11. It will launch our Application on Chrome using the provided IP address and insert that IP address into a mobile browser.
  • 12. 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).
  • 13.
  • 14. 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:
  • 15. 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:
  • 16. <!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>
  • 17. 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:
  • 18. 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. npm i -g surge Using a Mac, you must remember to include the sudo command. sudo npm i -g surge Surge We need some of your time and will provide the results:
  • 19. 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
  • 20. 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.
  • 21. 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/