Merge branch 'basic-pwa-support' into development

diff --git a/app/App/HomeController.php b/app/App/HomeController.php
index 24b7c3ed819eacb1e0f7dbe04638446dfdf69197..8188ad0102f2bf0dd738f2d0ab214a37d1d1929e 100644 (file)
--- a/app/App/HomeController.php
+++ b/app/App/HomeController.php
@@ -140,4 +140,12 @@ class HomeController extends Controller
         $exists = $favicons->restoreOriginalIfNotExists();
         return response()->file($exists ? $favicons->getPath() : $favicons->getOriginalPath());
     }
+
+    /**
+     * Serve a PWA application manifest.
+     */
+    public function pwaManifest(PwaManifestBuilder $manifestBuilder)
+    {
+        return response()->json($manifestBuilder->build());
+    }
 }

diff --git a/app/App/PwaManifestBuilder.php b/app/App/PwaManifestBuilder.php
new file mode 100644 (file)
index 0000000..4902d35
--- /dev/null
+++ b/app/App/PwaManifestBuilder.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace BookStack\App;
+
+class PwaManifestBuilder
+{
+    public function build(): array
+    {
+        $darkMode = (bool) setting()->getForCurrentUser('dark-mode-enabled');
+        $appName = setting('app-name');
+
+        return [
+            "name" => $appName,
+            "short_name" => $appName,
+            "start_url" => "./",
+            "scope" => "/",
+            "display" => "standalone",
+            "background_color" => $darkMode ? '#111111' : '#F2F2F2',
+            "description" => $appName,
+            "theme_color" => ($darkMode ? setting('app-color-dark') : setting('app-color')),
+            "launch_handler" => [
+                "client_mode" => "focus-existing"
+            ],
+            "orientation" => "portrait",
+            "icons" => [
+                [
+                    "src" => setting('app-icon-32') ?: url('/icon-32.png'),
+                    "sizes" => "32x32",
+                    "type" => "image/png"
+                ],
+                [
+                    "src" => setting('app-icon-64') ?: url('/icon-64.png'),
+                    "sizes" => "64x64",
+                    "type" => "image/png"
+                ],
+                [
+                    "src" => setting('app-icon-128') ?: url('/icon-128.png'),
+                    "sizes" => "128x128",
+                    "type" => "image/png"
+                ],
+                [
+                    "src" => setting('app-icon-180') ?: url('/icon-180.png'),
+                    "sizes" => "180x180",
+                    "type" => "image/png"
+                ],
+                [
+                    "src" => setting('app-icon') ?: url('/icon.png'),
+                    "sizes" => "256x256",
+                    "type" => "image/png"
+                ],
+                [
+                    "src" => url('favicon.ico'),
+                    "sizes" => "48x48",
+                    "type" => "image/vnd.microsoft.icon"
+                ],
+            ],
+        ];
+    }
+}

diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index f9dbc68b455b6d831c796ac213bae0494fa6fb6a..67b074905126037b118b730633503f586392cacb 100644 (file)
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -10,7 +10,7 @@
     <meta name="viewport" content="width=device-width">
     <meta name="token" content="{{ csrf_token() }}">
     <meta name="base-url" content="{{ url('/') }}">
-    <meta name="theme-color" content="{{ setting('app-color') }}"/>
+    <meta name="theme-color" content="{{(setting()->getForCurrentUser('dark-mode-enabled') ? setting('app-color-dark') : setting('app-color'))}}"/>
 
     <!-- Social Cards Meta -->
     <meta property="og:title" content="{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}">
@@ -29,6 +29,10 @@
     <link rel="icon" type="image/png" sizes="64x64" href="{{ setting('app-icon-64') ?: url('/icon-64.png') }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ setting('app-icon-32') ?: url('/icon-32.png') }}">
 
+    <!-- PWA -->
+    <link rel="manifest" href="{{ url('/manifest.json') }}" crossorigin="use-credentials">
+    <meta name="mobile-web-app-capable" content="yes">
+
     @yield('head')
 
     <!-- Custom Styles & Head Content -->

diff --git a/routes/web.php b/routes/web.php
index 9f5e84c62afb5161d057b1290cd945a5c16b0cb4..06dffa636b778066f8083a5e02006d0b5da9ed4e 100644 (file)
--- a/routes/web.php
+++ b/routes/web.php
@@ -20,6 +20,7 @@ use Illuminate\View\Middleware\ShareErrorsFromSession;
 Route::get('/status', [SettingControllers\StatusController::class, 'show']);
 Route::get('/robots.txt', [HomeController::class, 'robots']);
 Route::get('/favicon.ico', [HomeController::class, 'favicon']);
+Route::get('/manifest.json', [HomeController::class, 'pwaManifest']);
 
 // Authenticated routes...
 Route::middleware('auth')->group(function () {

diff --git a/tests/PwaManifestTest.php b/tests/PwaManifestTest.php
new file mode 100644 (file)
index 0000000..b831732
--- /dev/null
+++ b/tests/PwaManifestTest.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace Tests;
+
+class PwaManifestTest extends TestCase
+{
+    public function test_manifest_access_and_format()
+    {
+        $this->setSettings(['app-color' => '#00ACED']);
+
+        $resp = $this->get('/manifest.json');
+        $resp->assertOk();
+
+        $resp->assertJson([
+            'name' => setting('app-name'),
+            'launch_handler' => [
+                'client_mode' => 'focus-existing'
+            ],
+            'theme_color' => '#00ACED',
+        ]);
+    }
+
+    public function test_pwa_meta_tags_in_head()
+    {
+        $html = $this->asViewer()->withHtml($this->get('/'));
+
+        // crossorigin attribute is required to send cookies with the manifest,
+        // so it can react correctly to user preferences (dark/light mode).
+        $html->assertElementExists('head link[rel="manifest"][href$="manifest.json"][crossorigin="use-credentials"]');
+        $html->assertElementExists('head meta[name="mobile-web-app-capable"][content="yes"]');
+    }
+
+    public function test_manifest_uses_configured_icons_if_existing()
+    {
+        $resp = $this->get('/manifest.json');
+        $resp->assertJson([
+            'icons' => [[
+                "src" => 'http://localhost/icon-32.png',
+                "sizes" => "32x32",
+                "type" => "image/png"
+            ]]
+        ]);
+
+        $galleryFile = $this->files->uploadedImage('my-app-icon.png');
+        $this->asAdmin()->call('POST', '/settings/customization', [], [], ['app_icon' => $galleryFile], []);
+
+        $customIconUrl = setting()->get('app-icon-32');
+        $this->assertStringContainsString('my-app-icon', $customIconUrl);
+
+        $resp = $this->get('/manifest.json');
+        $resp->assertJson([
+            'icons' => [[
+                "src" => $customIconUrl,
+                "sizes" => "32x32",
+                "type" => "image/png"
+            ]]
+        ]);
+    }
+
+    public function test_manifest_changes_to_user_preferences()
+    {
+        $lightUser = $this->users->viewer();
+        $darkUser = $this->users->editor();
+        setting()->putUser($darkUser, 'dark-mode-enabled', 'true');
+
+        $resp = $this->actingAs($lightUser)->get('/manifest.json');
+        $resp->assertJson(['background_color' => '#F2F2F2']);
+
+        $resp = $this->actingAs($darkUser)->get('/manifest.json');
+        $resp->assertJson(['background_color' => '#111111']);
+    }
+}