In the current version of flutter 3.0.1 we have a service worker in index.html. So far, I cannot find any documentation on flutter.dev for how to force a cache refresh when screens or code has updated. The only way to refresh is using browser refresh buttons, etc.
There is a lot of outdated suggestions on SO to change the version number manually by appending something here or there, but that does not apply to the serviceworker. The service worker when running flutter build web automatically gets a new version number each time you build. This does not, however, force a cache refresh in the browser.
By default this service worker js is listening for a statechange and then calling console.log('Installed new service worker.'); This is only called when you click the browser's refresh button, so it is not helpful to prompt or force a refresh for new content.
I tried using flutter build web --pwa-strategy=none and this does not affect caching either.
Any bright ideas out there to force a refresh? In other websites I've built it was very easy to version css/js files, which would force a refresh without any user interaction, but I'm not seeing any clear paths with flutter build web.
This is the serviceWorker js in web/index.html.
After running flutter build web the var serviceWorkerVersion = null will become something like var serviceWorkerVersion = '1767749895'; when deployed to hosting and live on the web. However, this serviceWorkerVersion update does not force a refresh of content.
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing || reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
Have you tried this? Adding the no-cache in the index.html. Seems like working on Flutter 3.0. Keep in mind that by doing this your pwa will not work in offline mode.
<head>
...
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
...
</head>
Related
I am using firebase Hosting to deploy my flutter web app.
I wonder why my application lauch twice? Once with Auto Bootstrap and then Programmatic Bootstrap.
enter image description here
However in index.html the app is run once:
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
I tryed to change the firebase configs. Same result.
My flutter web app won't start, I see the following errors in the browser console:
This behavior only occurs when deployed on vercel. I don't get this error when deploying on firebase hosting.
Furthermore, this error only occurs for nested routes. It works when I open my deployed app without a subpath in the URL.
The error must occur somewhere in the loadEntrypoint function
<script>
window.addEventListener('load', function (ev) {
console.log("LOAD!");
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
console.log("INIT");
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
console.log("RUN");
return appRunner.runApp();
});
});
</script>
Interesting here is that it says Failed to register a ServiceWorker for scope ('https://domainname.net/home/') even though I load the page https://domainname.net/home/questionnaire. In general I expect it would register the ServiceWorker at https://domainname.net but I don't know much about ServiceWorkers anyways...
I'm especially puzzled about this because this only happens on vercel but as the error occurs somewhere in web/index.js, it assume my hosting provider should have not influence on this behavior?
Any ideas?
It is caused by this bug: https://github.com/flutter/flutter/issues/116360
It is already fixed in master: https://github.com/flutter/flutter/pull/118684
Unfortunately, the fix is not in the stable channel yet (as of 3/02/22), but there is a cherry-pick request.
Temporal workaround: (ref)
Add these two lines in your index.html:
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
entrypointUrl: "/main.dart.js", // <-- THIS LINE
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
serviceWorkerUrl: "/flutter_service_worker.js?v=", // <-- THIS LINE
},
onEntrypointLoaded: function(engineInitializer) {
engineInitializer.initializeEngine().then(function(appRunner) {
appRunner.runApp();
});
}
});
});
</script>
I have found a solution to this problem.
When I replace the script in my question above with the following script, it seems to resolve the issue.
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing ?? reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
Unfortunately, I have not really found out what exactly the problem was and why this is fixing it but I noticed this issue was occurring only since I updated my flutter version and regenerate my index.html. The script I'm now using is the script used by an older flutter version. I'm not sure if this has other effects but for now I'm going with the older script.
Run into the same issue today.
After trying many times, I realized the file flutter.js was not included in the build folder after running the command.
flutter build web
It was generating the build/web folder but missing some files. No idea why.
The fact is that after running the command flutter run web --release the folder build/web was populated correctly and I could see the "flutter.js" file in the folder.
After the deployment (in my case firebase hosting) everything was back to normal and working.
I have a fully functional App on Android and IOS, and now I want to have a web version taking advantage of Flutter's cross-platform features.
To do this, I created a "Chrome Device" from VS Code and I did the Firebase App registration within the Firebase console. In the index.html I included the configuration as explained in Flutter Firebase Installation Web ...
<!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.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- 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="appname">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>AppName</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "xxx", //with my particular values
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig); //
</script>
<!-- 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>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing || reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
</body>
</html>
When I run the App in Chrome I get an Oh No! Error 5 in the browser and no error messages in the VS Code console.
If I include an await in the Firebase initialization line in index.html:
await firebase.initializeApp(firebaseConfig);
Again the Oh No! Error 5, but when I reload the page I get the following error on web_entrypoint.dart:
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created -
call Firebase App.initializeApp() (app/no-app).
at Object.u [as app] (https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js:1:18836) at
Object.getApp
(http://localhost:65003/packages/firebase_database_web/src/interop/app.dart.lib.js:630:89)
//... more debug lines
In my lib/src/pages/main.dart, which works fine on IOS and Android, I'm making sure to initialize the Firebase services first ...
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
final prefs = PreferenciasUsuario();
await prefs.initPrefs();
await PushNotificationsProvider.initializeApp();
FirebaseDatabase database;
database = FirebaseDatabase.instance;
database.setPersistenceEnabled(true);
database.setPersistenceCacheSizeBytes(10000000);
runApp(MyApp());
}
I've read most of the answers on the subject on StackOverflow, but they haven't worked for me, I don't know if it's because I'm doing it particularly with Flutter.
How can I resolve the No Firebase App '[DEFAULT]' error and get my application run on the web?
We've created a new Facebook App (not reviewed) and added the Messenger Product. We've connected our Facebook Page (Visible: Public) with our App and added a Webhook to the App. As described in the documentation we also have whitelisted our domain in the page settings. But still the plugin does not get rendered. Console output: 'Plugin was hidden'
When testing we're logged in as a Facebook user which has an admin role in the app as well as on the page.
Below you can see how we've integrated the messenger checkbox plugin. As origin we use our domain where the plugin is integrated.
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '766805437589568',
autoLogAppEvents: true,
xfbml: true,
version: 'v9.0'
});
FB.Event.subscribe('messenger_checkbox', function(e) {
console.log("messenger_checkbox event");
console.log(e);
if (e.event == 'rendered') {
console.log("Plugin was rendered");
} else if (e.event == 'checkbox') {
var checkboxState = e.state;
console.log("Checkbox state: " + checkboxState);
} else if (e.event == 'not_you') {
console.log("User clicked 'not you'");
} else if (e.event == 'hidden') {
console.log("Plugin was hidden");
}
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<div class="fb-messenger-checkbox"
origin='https://example.com'
page_id=100378165398818
messenger_app_id=766805437589568
user_ref="%%uniqueIdForEveryRender%%"
allow_login="false"
size="large"
skin="dark"
center_align="true">
</div>
In the printscreen you can see the output from the dev console.
console output
We've already checked the following post Facebook messenger checkbox plugin is hidden.
Looks like it is a GDPR related issue:
https://developers.facebook.com/docs/messenger-platform/europe-updates#nov-30th-2020
In the table Affected features and APIs with mitigations there is an entry for the checkbox plugin:
So we have no choice but to wait until facebook switches the service back on.
My app is under ionic 4 angular.
I've installed the pwa part with :
ng add #angular/pwa --project app
Then I build with : ionic build --prod
and deployed to firebase with : firebase deploy
But I have 2 problems :
1) the banner "add to screen" is not shown when I browse the app from my android phone.
Even with this code on the root url :
showBtn: boolean = false;
deferredPrompt;
constructor(private modalController: ModalController, public authUser: AuthUserService, private router: Router){}
ionViewWillEnter(){
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later on the button event.
this.deferredPrompt = e;
// Update UI by showing a button to notify the user they can add to home screen
this.showBtn = true;
});
//button click event to show the promt
window.addEventListener('appinstalled', (event) => {
alert('installed');
});
if (window.matchMedia('(display-mode: standalone)').matches) {
alert('display-mode is standalone');
}
}
2) When I launch lighthouse audit I get this warning :
Does not register a service worker that controls page and start_url
I've tried to uninstall, reinstall, rebuild everything but nothing works.
On ionic docs I can't find any clue to fix this problem.
After many days I was able to make it works.
First I add this following snippet to the firebase.json file to the hosting property:
{
"source": "ngsw-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
Then I add this script in my index.html :
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('ngsw-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>
Now it works !