feat(app): Add web

Signed-off-by: provokateurin <[email protected]>
nextcloud · Feb 14, 2024 · 12b46c3 · 12b46c3
1 parent 275555c
commit 12b46c3
Show file tree

Hide file tree

Showing 21 changed files with 11,737 additions and 9 deletions.
diff --git a/cspell.json b/cspell.json
@@ -15,6 +15,8 @@
     "**.openapi.json",
     "**/CHANGELOG.md",
     "external",
+    "packages/app/web/sqlite3.wasm",
+    "packages/app/web/sqflite_sw.js",
     "packages/dynamite/dynamite/example/lib",
     "packages/file_icons/lib/src/data.dart",
     "packages/neon_lints/lib",

diff --git a/packages/app/.gitattributes b/packages/app/.gitattributes
@@ -0,0 +1,2 @@
+web/sqflite_sw.js -diff
+web/sqlite3.wasm -diff
diff --git a/packages/app/.metadata b/packages/app/.metadata
@@ -21,6 +21,9 @@ migration:
     - platform: linux
       create_revision: b0366e0a3f089e15fd89c97604ab402fe26b724c
       base_revision: b0366e0a3f089e15fd89c97604ab402fe26b724c
+    - platform: web
+      create_revision: b0366e0a3f089e15fd89c97604ab402fe26b724c
+      base_revision: b0366e0a3f089e15fd89c97604ab402fe26b724c
 
   # User provided section
 

diff --git a/packages/app/README.md b/packages/app/README.md
@@ -6,6 +6,14 @@ A beautiful convergent cross-platform client for Nextcloud written in Flutter.
 You can build it yourself from source or download it from the automatic build pipelines.  
 The app will be published on F-Droid, the Google Playstore and Flathub later on.
 
+## Run on web
+
+Due to CORS issues the app must be run with web security disabled.
+
+```bash
+fvm flutter run -d chrome --web-browser-flag "--disable-web-security"
+```
+
 ## Screenshots
 
 For more screenshots see `./screenshots/`.

diff --git a/packages/app/flutter_native_splash.yaml b/packages/app/flutter_native_splash.yaml
@@ -7,4 +7,4 @@ flutter_native_splash:
     icon_background_color: "#ffffff"
     icon_background_color_dark: "#202020"
   ios: false
-  web: false
+  web: true
diff --git a/packages/app/web/favicon.png b/packages/app/web/favicon.png
diff --git a/packages/app/web/icons/Icon-192.png b/packages/app/web/icons/Icon-192.png
diff --git a/packages/app/web/icons/Icon-512.png b/packages/app/web/icons/Icon-512.png
diff --git a/packages/app/web/index.html b/packages/app/web/index.html
@@ -0,0 +1,145 @@
+<!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 beautiful convergent cross-platform client for Nextcloud written in Flutter.">
+
+    <!-- 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="Neon">
+    <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="favicon.png">
+
+    <title>app</title>
+    <link rel="manifest" href="manifest.json">
+
+    <script>
+        // The value below is injected by flutter build, do not touch.
+        const serviceWorkerVersion = null;
+    </script>
+    <!-- This script adds the flutter initialization JS code -->
+    <script src="flutter.js" defer=""></script>
+    <style id="splash-screen-style">
+        html {
+            height: 100%
+        }
+
+        body {
+            margin: 0;
+            min-height: 100%;
+            background-color: #ffffff;
+            background-size: 100% 100%;
+        }
+
+        .center {
+            margin: 0;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+        }
+
+        .contain {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .stretch {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        .cover {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .bottom {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            -ms-transform: translate(-50%, 0);
+            transform: translate(-50%, 0);
+        }
+
+        .bottomLeft {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+        }
+
+        .bottomRight {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body {
+                background-color: #202020;
+            }
+        }
+    </style>
+    <script id="splash-screen-script">
+        function removeSplashFromWeb() {
+            document.getElementById("splash")?.remove();
+            document.getElementById("splash-branding")?.remove();
+            document.body.style.background = "transparent";
+        }
+    </script>
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
+</head>
+<body>
+<picture id="splash">
+    <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x"
+            media="(prefers-color-scheme: light)">
+    <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x"
+            media="(prefers-color-scheme: dark)">
+    <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
+</picture>
+<script>
+    window.addEventListener('load', function (ev) {
+        // Download main.dart.js
+        _flutter.loader.loadEntrypoint({
+            serviceWorker: {
+                serviceWorkerVersion: serviceWorkerVersion,
+            },
+            onEntrypointLoaded: function (engineInitializer) {
+                engineInitializer.initializeEngine({
+                    useColorEmoji: true,
+                }).then(function (appRunner) {
+                    appRunner.runApp();
+                });
+            }
+        });
+    });
+</script>
+
+
+</body>
+</html>
diff --git a/packages/app/web/manifest.json b/packages/app/web/manifest.json
@@ -0,0 +1,23 @@
+{
+    "name": "Neon",
+    "short_name": "Neon",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#f37736",
+    "theme_color": "#f37736",
+    "description": "A beautiful convergent cross-platform client for Nextcloud written in Flutter.",
+    "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"
+        }
+    ]
+}
diff --git a/packages/app/web/splash/img/dark-1x.png b/packages/app/web/splash/img/dark-1x.png
diff --git a/packages/app/web/splash/img/dark-2x.png b/packages/app/web/splash/img/dark-2x.png
diff --git a/packages/app/web/splash/img/dark-3x.png b/packages/app/web/splash/img/dark-3x.png
diff --git a/packages/app/web/splash/img/dark-4x.png b/packages/app/web/splash/img/dark-4x.png
diff --git a/packages/app/web/splash/img/light-1x.png b/packages/app/web/splash/img/light-1x.png
diff --git a/packages/app/web/splash/img/light-2x.png b/packages/app/web/splash/img/light-2x.png
diff --git a/packages/app/web/splash/img/light-3x.png b/packages/app/web/splash/img/light-3x.png
diff --git a/packages/app/web/splash/img/light-4x.png b/packages/app/web/splash/img/light-4x.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		web/sqflite_sw.js -diff
		web/sqlite3.wasm -diff