We have Flutter web available under https://web.sharezone.net. On Android, macOS and Windows (Linux not tested yet) it’s possible to install our Flutter web app as PWA. However, on iOS, it’s not possible. On iOS, Safari keeps opening the website inside of Safari.
However, it’s possible to install a Flutter web app as PWA on Safari, as you can try it with https://pwa_demo.codemagic.app (Source code).
This is our index.html:
<!DOCTYPE html>
<!--
Copyright (c) 2022 Sharezone UG (haftungsbeschränkt)
Licensed under the EUPL-1.2-or-later.
You may obtain a copy of the Licence at:
https://joinup.ec.europa.eu/software/page/eupl
SPDX-License-Identifier: EUPL-1.2
-->
<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">
<!-- Caching of HTML for about 6 hours-->
<meta http-equiv="cache-control" content="max-age=21600" />
<!-- 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="fix">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="manifest" href="manifest.json">
<!-- SEO and SMO -->
<meta name="description"
content="Sharezone ist ein vernetzter Schulplaner, mit dem sich Schüler, Lehrkräfte und Eltern gemeinsam, schnell und datenschutzkonform organisieren können.">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>Sharezone</title>
<meta name="theme-color" content="#40c4ff">
<link rel="stylesheet" href="index.css" type="text/css" media="screen,projection">
<!-- Required for QR Login -->
<script src="assets/packages/fast_rsa/web/assets/wasm_exec.js" type="application/javascript"></script>
<!-- Required for Google Sign In -->
<meta name="google-signin-client_id"
content="730263787697-s5tqfln3apv1j27netnnv8p8305ns3j9.apps.googleusercontent.com">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: function (engineInitializer) {
engineInitializer.initializeEngine().then(function (appRunner) {
appRunner.runApp();
});
}
});
});
</script>
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
<!-- Required for the pdfx package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.js" type="text/javascript"></script>
<script type="text/javascript">
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js";
pdfRenderOptions = {
cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/',
cMapPacked: true,
}
</script>
</body>
</html>
Our manifest.json:
{
"name": "Sharezone",
"short_name": "Sharezone",
"start_url": ".",
"display": "standalone",
"background_color": "#0175C2",
"theme_color": "#0175C2",
"description": "Der vernetzte Schulplaner",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "icons/Icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/Icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
Our source code: https://github.com/SharezoneApp/sharezone-app/tree/update-index-html
We are using Flutter v3.7.10
2
Answers
After resetting the browser cache, I was able to install the app as PWA on iOS :)
how you resetting the browser cache?