Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Proposal][Flutter web] : Add a flag to flutter build web to update version to prevent cache #71333

Closed
iqfareez opened this issue Nov 28, 2020 · 10 comments
Closed

[Proposal][Flutter web] : Add a flag to flutter build web to update version to prevent cache #71333

iqfareez opened this issue Nov 28, 2020 · 10 comments
Labels
a: build Building flutter applications with the tool c: proposal A detailed proposal for a change to Flutter platform-web Web applications specifically tool Affects the "flutter" command-line tool. See also t: labels.
Projects
Tools - web review

Comments

@iqfareez
Copy link

iqfareez commented Nov 28, 2020 •
edited

Use case

To force browser to reload / fetch the updated web app version instead of using the cached file.

Proposal

We can update the version in main file. Something similar to this question.

Make flutter build web command automatically increase the version number.

My flutter version 

Flutter 1.23.0-18.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 198df796aa (6 weeks ago) • 2020-10-15 12:04:33 -0700
Engine • revision 1d12d82d9c
Tools • Dart 2.11.0 (build 2.11.0-213.1.beta)

@iapicca
Copy link
Contributor

iapicca commented Nov 28, 2020

@iqfareez

Make flutter build web command automatically increase the version number.

I can see this being an option, maybe something like

flutter build web --bump-version=true

but enforcing this by default might not be desirable for everyone

@darshankawar
Copy link
Member

darshankawar commented Nov 30, 2020 •
edited

@iqfareez
As suggested above, forcing to increase version number is not a feasible proposal, but we may propose to add a parameter / flag to the command that'll do the job. Retitling this issue to properly describe the proposal.

@darshankawar darshankawar changed the title [Flutter web] Automatically update version to prevent cache [Proposal][Flutter web] : Add a flag to flutter build web to update version to prevent cache Nov 30, 2020
@darshankawar darshankawar added a: build Building flutter applications with the tool platform-web Web applications specifically tool Affects the "flutter" command-line tool. See also t: labels. c: proposal A detailed proposal for a change to Flutter passed first triage labels Nov 30, 2020
@jmagman jmagman added this to Awaiting triage in Tools - web review via automation Dec 1, 2020
@jonahwilliams
Copy link
Member

If you do not want to use the server worker caching you can provide --pwa-strategy=none. Otherwise the app will update after the new version has been downloaded and the page revisited.

Tools - web review automation moved this from Awaiting triage to Engineer reviewed Dec 1, 2020
@iqfareez iqfareez mentioned this issue Dec 2, 2020
Closed
@tazik561
Copy link 

--bump-version=true

When I run
fvm flutter build web --bump-version=trueI got :

Could not find an option named "bump-version".

@iqfareez
Copy link
Author

@tazik561 He just proposed a concept. Not an actual implementation.

@tazik561
Copy link

I build a flutter web app and deployed it via nginx hosting on my local.

Now I deployed a newer version of my pwa but I still get the old website shown form the first deploy. I added version number in build/web/index.html

<script src="main.dart.js?version=1" type="application/javascript"></script>
and then I restarted nginx, after lunching my project on mobile I changed version=1 to version=2 and again I restarted nginx. But When I launch my project on mobile again , I see old website again ?

Thanks a lot for any help!

This is all index.html inside build/web folder:

    <!DOCTYPE html>
    <html>
    <head>
      <!--
        If you are serving your web app in a path other than the root, change the
        href value below to reflect the base path you are serving from.
    
        The path provided below has to start and end with a slash "/" in order for
        it to work correctly.
    
        Fore more details:
        * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
      -->
      <base href="/">
    
      <meta charset="UTF-8">
      <meta content="IE=Edge" http-equiv="X-UA-Compatible">
      <meta name="description" content="test">
    
      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
      <meta http-equiv="Pragma" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
    
      <!-- iOS meta tags & icons -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="apple-mobile-web-app-title" content="tttt">
      <link rel="apple-touch-icon" type="image/png" href="./icons/Icon-512.png">
    
      <!-- Favicon -->
      <link rel="icon" type="image/png" href="./icons/Icon-512.png"/>
    
      <title>test title</title>
      <link rel="manifest" href="./manifest.json">
    </head>
    <body>
      <!-- This script installs service_worker.js to provide PWA functionality to
           application. For more information, see:
           https://developers.google.com/web/fundamentals/primers/service-workers -->
      <script>
        if ('serviceWorker' in navigator) {
          window.addEventListener('flutter-first-frame', function () {
            navigator.serviceWorker.register('flutter_service_worker.js?v=3725191275');
          });
        }
      </script>
      <script src="main.dart.js?version=2" type="application/javascript"></script>
    </body>
    </html>

@technolion
Copy link

If your index.html gets cached on the client browser, it not enough to change the URL parameter of main.dart.js.
For this approach to work, you'd have to instruct your web server to tell browsers never to cache index.html.

@tazik561
Copy link

If your index.html gets cached on the client browser, it not enough to change the URL parameter of main.dart.js.
For this approach to work, you'd have to instruct your web server to tell browsers never to cache index.html.

I added

      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
      <meta http-equiv="Pragma" content="no-cache" />
      <meta http-equiv="Expires" content="0" />

inside ``index.html` . This is not enough to prevent that user's browser caching ?

@technolion
Copy link

inside ``index.html` . This is not enough to prevent that user's browser caching ?

You can check, which backend serves this file by taking a look a chrome's network inspector. I also witnessed that the Service worker sometimes serves this file, without making a call to the web server. I improved the situation by using --pwa-strategy none when building the flutter web application.

@github-actions
Copy link

github-actions bot commented Aug 2, 2021

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 2, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
a: build Building flutter applications with the tool c: proposal A detailed proposal for a change to Flutter platform-web Web applications specifically tool Affects the "flutter" command-line tool. See also t: labels.
Projects
Tools - web review
  
Engineer reviewed
Milestone
No milestone
Development

No branches or pull requests
6 participants
@tazik561 @technolion @jonahwilliams @iapicca @iqfareez @darshankawar