11---
22title : Web FAQ
3- description : Some gotchas and differences when writing or running web apps in Flutter.
3+ description : >-
4+ Some gotchas and differences when writing or running web apps in Flutter.
45---
56
67## Questions
78
89### What scenarios are ideal for Flutter on the web?
910
10- Not every web page makes sense in Flutter, but we think Flutter is particularly
11- suited for app-centric experiences:
11+ Not every web page makes sense in Flutter,
12+ but we think Flutter is particularly suited for app-centric experiences:
1213
1314* Progressive Web Apps
1415* Single Page Apps
@@ -25,33 +26,40 @@ see [Web support for Flutter][].
2526
2627### Search Engine Optimization (SEO)
2728
28- In general, Flutter is geared towards dynamic application experiences. Flutter's
29- web support is no exception. Flutter web prioritizes performance, fidelity, and
30- consistency. This means application output does not align with what search
31- engines need to properly index. For web content that is static or document-like,
32- we recommend using HTML—just like we do on [ flutter.dev] ( {{site.main-url}} ) ,
33- [ dart.dev] ( {{site.dart-site}} ) , and [ pub.dev] ( {{site.pub}} ) . You should also
34- consider separating your primary application experience—created in Flutter—from
35- your landing page, marketing content, and help content—created using
36- search-engine optimized HTML.
37-
38- That said, as mentioned in the [ roadmap] [ ] , the Flutter team plans to
39- investigate search engine indexability of Flutter web.
29+ In general, Flutter is geared towards dynamic application experiences.
30+ Flutter's web support is no exception.
31+ Flutter web prioritizes performance, fidelity, and consistency.
32+ This means application output doesn't align with what search
33+ engines need to properly index.
34+
35+ However, a community-released Dart package, [ Jaspr] [ ] _ does_
36+ support static websites.
37+ In fact, the [ Dart documentation] [ ] , [ Flutter documentation] [ ] , and
38+ [ Flutter marketing] [ ] websites were migrated to using the Jaspr package.
39+
40+ To summarize, for web content that is static or document-like,
41+ we recommend _ either_ using:
42+
43+ 1 . [ Jaspr] [ ] , if you want to use Dart but want a more traditional
44+ DOM-based website. Also note that Jaspr makes SEO work in the
45+ same way a traditional website would.
46+ 1 . HTML—in this case, consider separating your primary application
47+ experience (created in Flutter), from your landing page,
48+ marketing content, and help content (created using
49+ search engine optimized HTML).
50+
51+ [ Dart documentation ] : {{site.dart-site}}
52+ [ Flutter documentation ] : /
53+ [ Flutter marketing ] : {{site.main-url}}
54+ [ Jaspr ] : https://jaspr.site/
4055
4156### Does hot reload work with a web app?
4257
43- Yes! For more information, check out
44- [ hot reload on the web] [ ] .
58+ Yes! For more information,
59+ check out [ hot reload on the web] [ ] .
4560
4661[ hot reload on the web ] : /platform-integration/web/building#hot-reload-web
4762
48- Hot restart is a fast way of seeing your
49- changes without having to relaunch your web app and wait for it
50- to compile and load. This works similarly to
51- the hot reload feature for Flutter mobile development.
52- The difference is that hot reload remembers your state and hot
53- restart doesn't.
54-
5563### Which web browsers are supported by Flutter?
5664
5765Flutter web apps can run on the following browsers:
@@ -61,8 +69,9 @@ Flutter web apps can run on the following browsers:
6169* Edge (mobile & desktop)
6270* Firefox (mobile & desktop)
6371
64- During development, Chrome (on macOS, Windows, and Linux) and Edge (on Windows)
65- are supported as the default browsers for debugging your app.
72+ During development, Chrome (on macOS, Windows, and Linux),
73+ and Edge (on Windows) are supported as the default browsers
74+ for debugging your app.
6675
6776### Can I build, run, and deploy web apps in any of the IDEs?
6877
@@ -93,41 +102,57 @@ on [dart.dev]({{site.dart-site}}).
93102
94103### Does Flutter web support concurrency?
95104
96- Dart's concurrency support via [ isolates] [ ]
105+ Dart's concurrency support that uses [ isolates] [ ]
97106is not currently supported in Flutter web.
98107
99108Flutter web apps can potentially work around this
100109by using [ web workers] [ ] ,
101- although no such support is built in.
110+ although such support isn't built in.
102111
103112### How do I deploy a web app?
104113
105114See [ Preparing a web app for release] [ ] .
106115
107116### Does ` Platform.is ` work on the web?
108117
109- Not currently.
118+ No. While you can technically import ` dart:io ` when compiling for the web,
119+ calling any ` Platform.isXYZ ` method throws an ` UnsupportedError ` .
120+ Furthermore, importing ` dart:io ` in a package
121+ (except through conditional imports) causes pub.dev
122+ to score the package as not supporting the web.
110123
111- ### Why doesn't my app update immediately after it's deployed?
124+ * If you are developing a Flutter app, consider using [ ` kIsWeb ` ] [ ] .
125+ * If you are developing a package
126+ (especially one without a Flutter dependency),
127+ consider using the [ ` os_detect ` ] [ ] package.
112128
113- You might need to configure the ` Cache-Control ` header returned by your web server.
114- For example, if this header is set to 3600, then the browser
115- and CDN will cache the asset for 1 hour, and your users might see an out-of-date
116- version of your app up to 1 hour after you deploy a new version. For
117- more information about caching on the web,
118- check out [ Prevent unnecessary network requests with the HTTP Cache] [ http-cache ] .
129+ [ `kIsWeb` ] : {{site.api}}/flutter/foundation/kIsWeb-constant.html
119130
120- It is a good idea to be aware of this behavior to avoid an undesirable user experience.
131+ ### Why doesn't my app update immediately after it's deployed?
132+
133+ You might need to configure the ` Cache-Control ` header
134+ returned by your web server.
135+ For example, if this header is set to 3600,
136+ then the browser and CDN will cache the asset for 1 hour,
137+ and your users might see an out-of-date
138+ version of your app up to 1 hour after you deploy a new version.
139+ For more information about caching on the web, check out
140+ [ Prevent unnecessary network requests with the HTTP Cache] [ http-cache ] .
141+
142+ It's a good idea to be aware of this behavior to avoid an
143+ undesirable user experience.
121144After you deploy your app, users might use a
122145cached version of your app (cached by the browser or CDN)
123146for the duration defined by your cache headers.
124- This can lead to users using a version of your app that
125- is incompatible with changes that have been deployed to backend services.
147+ This can lead to using a version of your app that
148+ is incompatible with changes that have been deployed
149+ to backend services.
126150
127151### How do I clear the web cache after a deployment and force an app download?
128- If you wish to defeat these cache headers after each deployment, a common
129- technique is to append a build ID of some sort to the links of your static
130- resources, or update the filenames themselves.
152+
153+ If you wish to defeat these cache headers after each deployment,
154+ a common technique is to append a build ID of some sort to the links
155+ of your static resources, or update the filenames themselves.
131156For example, ` logo.png ` might become ` logo.v123.png ` .
132157
133158``` html
@@ -138,16 +163,17 @@ For example, `logo.png` might become `logo.v123.png`.
138163<script src =" flutter_bootstrap.v123.js" async ></script >
139164```
140165
141- Flutter does not currently support appending build IDs to resources
166+ Flutter doesn't currently support appending build IDs to resources
142167automatically.
143168
144169### How do I configure my cache headers?
145170
146171If you are using Firebase Hosting,
147- the shared cache (CDN) is invalidated when you deploy a new version of your
148- app. But you might choose to configure your cache headers as follows,
149- so that the browser cache doesn't cache application scripts,
150- but the shared cache does.
172+ the shared cache (CDN) is invalidated when you deploy a
173+ new version of your app.
174+ However, to make sure that the browser doesn't
175+ cache application scripts but the shared cache does,
176+ you can configure your cache headers as follows,
151177
152178``` json
153179{
@@ -214,3 +240,4 @@ the `Cache-Control` header to a small value such as 0 or 60 seconds.
214240[ Web support for Flutter ] : /platform-integration/web
215241[ web workers ] : https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
216242[ workbox ] : https://github.com/GoogleChrome/workbox
243+ [ `os_detect` ] : {{site.pub}}/packages/os_detect
0 commit comments