7. Add web support for existing app
@rihanna_ke
$ flutter create . $ flutter run -d chrome
8. While developing for Debug?
Use Flutter DevTools for the following tasks:
● Debugging
● Logging
● Running Flutter inspector
Use Chrome DevTools for the following tasks:
● Generating event timeline
● Analyzing performance— after building!
flutter.dev/docs/development/platform-integration/web
https://medium.com/flutter/flutter-web-support-updates-8b14bfe6a908
22. Your own plugin?
- extend existing plugins for web
- flutter plugin implementation
* create
* implement
- Add to pubspec.yaml
https://medium.com/flutter/how-to-write-a-flutter-web-plugin-5e26c689ea1
https://medium.com/flutter/how-to-write-a-flutter-web-plugin-part-2-afdddb69ece6
https://flutter.dev/docs/development/packages-and-plugins/developing-packages#plugin
27. Running on web?
https://api.flutter.dev/flutter/foundation/kIsWeb-constant.html
import 'package:flutter/foundation.dart' show kIsWeb;
if (kIsWeb) {
// running on the web!
} else {
// NOT running on the web!
Platform.isAndroid
Platform.isFuchsia
Platform.isIOS
Platform.isLinux
Platform.isMacOS
Platform.isWindows
}
const bool kIsWeb = identical(0, 0.0)
34. pre-release post-release
< > < >
- familiarize
- perceive early
feedbacks
- real user testing
- quick sampling
- interact with the
sample
- build trust on the
quality
46. PWA with Flutter web
&&
||
&&
@rihanna_ke https://developers.google.com/web/progressive-web-
||
47. PWA definition
Reliable - Load instantly and never show the downasaur,
even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky
smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an
immersive user experience.
@rihanna_ke
Good afternoon everyone I am Rihanna Kedir. I work as software engineer. I am a women techmaker ambassador and gdg Rome co-lead. And google developer expert in web technologies, dart and Flutter.
We will start on seeing how we can bring Flutter code into a browser and see some use cases on how to use Flutter’s web compatible code.
Moreover, I‘ll show you how to host flutter for web into a static web page and then how to package a flutter web into a Progressive web app.
So first of all, how can we bring flutter into our web browser?
Adding support for web means permitting a code-compatible implementation of Flutter that is rendered using standard-based web technologies.
Assuming that you have flutter sdk installed on your platform. Currently, debugging a flutter web app requires the Chrome browser so the other requirement is to have chrome installed on your computer. Flutter has early support for running web applications but we need to be running the beta channel at present.
To use the latest version of the Flutter SDK from the beta channel and enable web support we can run the following commands.
Once we set up our environments, to create a flutter app with web support we can use flutter create name of the app. To run the app we can use the run command. That will open a chrome browser and we can see our app running in chrome.
We can also add web support to an existing flutter app with flutter create dot command.
In terms of debugging we can use the flutter devtools during development. For analyzing performance for web it is possible to use chrome dev tools once we build the app. And in case if you are wandering for testing you can do that with the normal widget tests
And when we are ready to release we can run the build app command. This populates a build/web directory with built files, which needs to be served together. And now we are ready to deploy to any web server. So basically that will be all we need to bring flutter code into a modern web browser!!
Going through the timeline of Flutter for web support. The start of the experiment was announced on December 2018 as Hummingbird project. On may of last year was released in technical preview. And today we have in beta version. It’s under active development and experiment. Is not yet recommended deploying a web app to production. So stay tuned to the updates.
It might be early to use it for a complex flutter applications, but yet we can do some cool things with it and we are going to see some use case.
Currently there are two available rendering approaches the DomCanvas and the Canavaskit approach. The DomCanvas uses the combination of HTML, CSS and Canvas API for rendering into the browser. CanvasKit brings Skia to the web using WebAssembly and WebGL, enabling a hardware-accelerated drawing surface that improves rendering, complex and intensive graphics efficiently.
DomCanvas offers the greatest compatibility with a wide variety of browsers, with a compact code size. However, repaint performance is poorer
The CanvasKit backend offers superior performance, fidelity, and correctness, but it has poor initial startup time due to a larger code size.
By default, Flutter’s web support uses DomCanvas, but you can enable the CanvasKit rendering engine.
It still has a few rough edges and the DomCanvas engine offers the greatest stability.
As Flutter’s architecture is designed with portability in mind, adding web support to Flutter means adding drawing layer on top of standard browser APIs.
Here is the tech stack we have in the DomCanvas approach that permits bringing your flutter code into the browser.
At the top we have our flutter code. Then we got the Flutter framework followed by the Flutter Web engine. The layer that generates a dart code suitable for rendering our flutter code along the framework using web technologies.
The Dart2js compiler is the layer that compiles dart code into javascript.
And What happens behind the scene is that our application, the Flutter framework, and the web-flavored dart:ui library — all written in Dart — are compiled to JavaScript with the Dart2js compiler and that file can run on any modern browser.
So typically in web development, we use HTML templates and CSS to build up our web app, and we pass it onto the browser. And the browser uses HTML and CSS to layout our elements and paint them on a web page.
With Flutter on the other hand the building, the layouting, and the painting cycle are fully available to us.
So Flutter for web exposes the whole rendering pipeline to us in just a single javascript file precisely the main.dart.js.
Meaning Flutter is painting everything into the browser!!!!
…not only that ……..but when building for release the Obfuscation, minification and three shaking processes are handled free for us.
Obfuscation is the process of making the code unclear and unreadable to humans. This adds a level of security to source code.
Minification is the process of removing unnecessary data present in code resulting in smaller file sizes and faster loading.
Tree shaking is the process of not including unused modules in the bundle during the build process.
This way Flutter for web support we can compile our Flutter code that we wrote using all its features. Embed the compiled code into a web page, and deploy that to any web server. And we have it running in our browsers without any plugin.
But before that let’s see what we have for web. Now the idea behind flutter is to write code once and run it ‘everywhere’. When developing with flutter we use Flutter plugins. And sometimes we might need to write a platform specific code. Let’s see what we have.
Regarding to plugins
flutter plugins they give Flutter access to platform-specific interfaces. so you might be asking which plugins we can use for web.
Now several plugins with web support are available , to mention some :
Shared preferences, firebase-core and firebase-auth, google-sign-in, url-launcher, video-player
More and more existing Flutter plugins are including web support, to find an updated list you can check on pub.dev using the web filter.
You can also add web support to existing flutter plugins yourself, by simply coding against the plugin's public interface and using its APIs.
In addition, in case you want to build your own plugin, for example interop with javascript library that you already have or simply you want your own implementation, you can do that by using the flutter plugin’s public implementation.
In both cases you can add them in pubspec.yaml file and when flutter for web compiles, these will work.
In terms of Interop with Dart, Dart has been used for web since it was created. For instance it can be used for developing web application in Angular.
Flutter web apps have full access to all existing Dart libraries that run on the web today.
In case we need a specific functionality on the web, we can check the dart for web packages and include them into our flutter project.
We can interop with javascript libraries also. And for javascript libraries or our js codes, we can use dart’s JS-interop packages and in specific package:js and dart:js.
kIsweb una costante top-level che possiamo importare dalla libreria foundation e usare per determinare durante se il nostro codice Flutter sta girando in un browser o meno.
Now that we are all set to go. We have the all the tools to create and build a Flutter code that can run into a browser. Let’ checkout the scenarios.
The first use case that I want to show you is embedding a compiled Flutter code into a web page.
So assuming that you have the compiled flutter code deployed a web server. That is to say you have the url address to reach your Flutter for web app.
To embed a flutter code into a web page we use iframe and use the url of our compiled web app. And with this we can host flutter compiled code within an existing web page.
Let’s checkout this example. This is a simple static website for showcasing a mobile app. It is a responsive web site made out of common web technologies: it has Bootstrap4, Jquery, and uses a html5-devices-mokeup which is a library for simulating mobile, tablet and desktop devices into a web page. Usually when showcasing a mobile app, is common to only find some images, a gif , a video simply showing how to use the app. But thanks to the flutter for web support we can do much more than that!! With this you’ll surely have a WOW effect! So we are not showcasing it as a gif or a video, but with the compiled flutter app itself!!!!!
Flutter make it easy and fast to build UI right?? Accordingly it makes it easy also to reuse the widgets and compose different UIs.
For example in this demo I used the compiled app as it is also for mobile, however is possible to only use portions of your app. Therefore a developer has the possibility to choose whether to showcase
the whole app,
portion of it,
just the UI
same functionality
Or simply the onboarding for instance
The first use-case is to give the customer access to the application without having to download it from a store, but by just giving him access to an http link. It can be enforced by adding the Progressive Web App concept inside the Flutter’s project.
Whether a realsed app that your showcasing or just in part of it , Weather you showacase the entire app or just the onboarding.
This benefits a developer to And broaden
And decide to showcase prior of releasing the mobile app into the stores or obviously after the release.
This will benefit both users and developers.
The user will have the possibility to interact, familiarize with the ‘sample’ app and build trust in the quality of your apps prior downloading the native mobile app from the stores.
On the other hand the benefits for the developer are the following:
Broaden exposure and usability test. Usability is key for the success of mobile apps.
perceive early feedback in terms of let’s say : is enjouble, easiness to use, being user-friendly and less time consuming when completing tasks.
Having the possibility to broaden your app to reach more end users and receiving feedbacks can help a developer to efficiently implement the native app.
Let’s see another example of embedding Flutter in a web page. Here I embedded multiple flutter apps.
In this case each Flutter app has been compiled and for the sake of simplicity they have been all deployed in the same folders of the web page.
I had the idea organizing one of flutter study jams, to permit the participants to decide which codelab they want to do based on their interest after interacting with the available apps.
It is possible to use this methodology for example:
To showcase multiple apps or variations of the same app
To Create a catalogue of Flutter apps
But it doesn’t stop only here.
In fact if you are flutter dev and you want to create a portfolio this can work for you as well!!!! Because it allows to put multiple applications that you created in one web page and interact with each of them!!!
We have seen how we can easily embed a Flutter app inside a web page. We can enrich a simple static page with an interactive experience. In the same way we can enrich our web pages with Flutter graphically rich content.
You can embed for example signup / signin portion or brand driven content into a web page
Your mobile chat app into a web page
Or simply for data visualization in a cross-platform consistent way including web.
It can be an online tool visualization, take as example the dartpad tool that supports coding online flutter and it can be easily embedded into a web page. We will see how later.
It can be an online tool visualization, take as example the dartpad tool that supports coding online flutter and it can be easily embedded into a web page. We will see how later.
And so on
Embedding interactive content not only permits us to enrich our web page with graphically rich content, but at the same time we can take advantage of it
for reusing the same Flutter codebase cross-platform including web.
for maintaining design consistency so users can adapt to our product easily in any platform including web.
Now let’s see the next scenario and maybe the more exciting one Packaging Flutter for web as a Progressive web app. As more and more web apps and web sites are becoming PWA nowdays.
PWA it is a web page that can behave just like a native app downloaded from the stores. Let’s like to describe PWA as what you get when you combine together best of the web and the best of the app.The basic concept of PWA is to deliver the app like experience within a browser.
It starts as a normal web page in a browser, and as a user explores the webpage, they get the prompt if they would like to “Add to Home Screen”. Once the user accepts the prompt, the PWA gets added to their home screen. Once open from the home screen, it can even hide the browser UI controls and appear as an app.
As a definition of PWA we have this three features.
Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.
In terms of packaging our flutter web app in PWA means most of the definitions falls back to our flutter code.
PWA not a framework or a library. It is a set of technologies and practices allowing you to create web applications similar to the native ones.
The major component of a PWA is the service worker.
A service worker is a JavaScript file that sits between the server and the browser, and can do stuff on behalf of both the browser and the server, in the background. It can handle requests, and send responses. A very common task for service workers, and a baseline PWA requirement, is to provide offline capabilities.
The second main component is the manifest file:
It contains meta-data about your PWA such as theme colour, icons, and whether it should be displayed standalone as a PWA or not. Basically it contains all the information needed to configure how the PWA will look when it is added/installed to the home screen of the device, and configures how it will behave when it’s launched.
Let’s checkout the minimum requirements in order to call a web app a PWA.
We talked about the Service worker and the manifest file. The other requirements are:
Service workers require HTTPS, so the PWA must also be served over HTTPS.
PWAs need to have an icon that can be used to launch the app from the device homescreen, and to show on a splashscreen. Our PWA Minimus can have at least two icons: 192x192px icon and 512×512 px icon
Finally, to tie everything together, we need some HTML and that is the actual web page.
Flutter template for web apps now includes support for the core features needed for an installable, offline-capable PWA app.
When building for relase a flutter app, we got the flutter_service_worker.js file. Which simply permits the offline capability by using the browser cache and serving the need assets from the cache when the user is offline.
And the service worker registration code, that installs the service worker
So now when building flutter for web for a release, we got an installable web application that works also offline.
All we need is the url and everybody can check out the app. And here we have the two launcher icons in the home screen: the first one is the native downloaded app icon and the second one is the PWA icon. Consequently the first launching the Flutter code compiled to native app, and the other launching the same flutter code compiled to a web app. Both coisiting in our homescreen.
As use case let’s see this app.
PWA are now are supported on all major desktop platforms, including Chrome OS, Linux, Mac, and Windows. They can be 'installed' on the user's device like native desktop apps and they are launched in the same way as the other desktop apps.
They run in an app window, without an address bar or tabs.
In this video we are seeing how it works on macOs. We open the same url of our deployed app and we install it.
We will then have the app launcher icon in our launcher pad.
It works the same way in the other platforms too.
What is great about web development is the easiness of deploying your web app. And to do that quickly you can use one of this services or any of other available services. And in just few seconds, minutes you are the app is online.
Now let’s analyse our web app and to do so we can use lighthouse. Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more. You can run Lighthouse in Chrome DevTools right under the Audits tab. it runs a series of audits against the page, and then it generates a report on how well the page did. From there, one can use the failing audits as indicators on how to improve the page. Each audit has a reference doc with helpful steps to improve your web app. In our case most of the indicators might not be applicable. As our source code is in Flutter and the analyzed code is the generated one after the Flutter code is compiled into javascript.
Wrapping up we have some use cases that benefit from embedding a Flutter compiled code into a web page. In terms of enriching a web pages with graphically rich content and interactive experiences. And also in terms of code reusing and UI consistency cross platforms.
In the other hand we have seen the seen what can be the benefits of packaging and delivering a Flutter compiled code as a PWA. With this we can have a app-like behaviour but without going through the app stores. Which gives us more choice in terms of the app’s distribution strategy making by making it also visible in the browser and so searchable for users.
Weather we want to release on stores or just the web or have both, with pros and cons of the chosen strategies.
Overall what is great about web is the ease of deployment.
Ease of deployment has some benefits for your flutter projects.
You have no install friction,
It permits you to have more users trying your app
and it enables you to quickly iterate on your applications or experiments.
The web is a great way of delivering quick iteration cycle to improve products overall right?
No need of app stores, and the user can get always your uptodate application, as long as it is connected.
