Скачать или смотреть Progressive Web App (PWA) in Flutter Web | Flutter Beta 1.14.6

Today I am going to share the new update on flutter sdk version 1.14.6, in the beta channel.

Sign up for Exclusive Full Flutter Web with Firebase Udemy Course: https://forms.gle/REsPAiKLrj7pXeGr6

In summary, the Flutter community have added a PWA implementation when you create a new flutter web project.

Therefore, I am gonna share with you on how to customise your PWA in iOS and Android. Moreover, I will briefly explain on this new file called flutter service worker

If you were to create a new project in your index html file, you might see some added tags and script.

apple-mobile-web-app-capable helps you set whether it is mobile web app capable (another word for progressive web app). This means it will run your pwa as a standalone app, rather than a web browser ui

Also, you can change the style of the app status bar style. this can only be in effect when you set the mobile web app capability to yes. However, there is 3 styles you can do. Default, black, default-translucent ( I tried changing it but it has black background and white text. Comment down below if you manage to do it and share how you do it)

Default gives you the white status bar, black gives you the black status bar with black text, and default translucent would give you the same colour as your body background

The title tag is pretty straight forward. And the apple touch icon is where you give the image for your icon app. ios screen recorind

There are other tags like formate detection and viewport

For Android, you have a your PWA configuration in this json file called manifest json.

This manifest.json file is contains the information of your icons, layout.

So, let's look inside it, what flutter has created for us

If both are provided, short_name is used on the user's home screen, launcher, or other places where space may be limited. name is used in the app install prompt.

Start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen.

tip: add a query string to the end of the start_url to track how often your installed app is launched.

Display gives the preferred display mode for the web site. show slide and explain on the key difference

The background_color property is used on the splash screen when the application is first launched.

The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers. Make sure that your theme and background colour is the same colour.

The description is a string that contains a sentence that the developers explain about the app

Orientation defines whether your apps shows in portrait or landscape mode

prefer_related_applications refers to the boolean whether the actual app is preferred over the web application. the default is false

If you change it to true, then under the related applications key, you should specify the platform and id

Icons are pretty self explanatory. The flutter create commands has provided you two default flutter icons. However, you can always change it.

Service Worker

Lastly, you might have seen this script tag. As you might have known, this is a service worker file. I am not too sure on what it does, kinda.

If you have not upgraded your flutter, I highly recommend you to do it.

Follow me on the behind the scenes : https://insta.happyharis.com

Support me on Patreon so I can make more entertaining coding tutorials :   / happyharis