PWA Manifest: Tweaks during review of PR #4430

- Updated to go through HomeController with the builder as a helper
  class.
- Extracted some reapeated items into variables in manifest.
- Updated background color to match those used by BookStack.
- Removed reference of icon.ico since its not intended to be used.
- Added tests to cover functionality.

Review of #4430

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());
+    }
 }

app/App/PwaManifestBuilder.php

@@ -2,34 +2,35 @@
 
 namespace BookStack\App;
 
-use BookStack\Http\Controller;
-
-class PwaManifestBuilder extends Controller
+class PwaManifestBuilder
 {
-    private function GenerateManifest()
+    public function build(): array
     {
+        $darkMode = (bool) setting()->getForCurrentUser('dark-mode-enabled');
+        $appName = setting('app-name');
+
         return [
-            "name" => setting('app-name'),
-            "short_name" => setting('app-name'),
+            "name" => $appName,
+            "short_name" => $appName,
             "start_url" => "./",
             "scope" => "/",
             "display" => "standalone",
-            "background_color" => (setting()->getForCurrentUser('dark-mode-enabled') ? setting('app-color-dark') : setting('app-color')),
-            "description" => setting('app-name'),
-            "theme_color" => (setting()->getForCurrentUser('dark-mode-enabled') ? setting('app-color-dark') : setting('app-color')),
+            "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-64') ?: url('/icon-64.png'),
-                    "sizes" => "64x64",
+                    "src" => setting('app-icon-32') ?: url('/icon-32.png'),
+                    "sizes" => "32x32",
                     "type" => "image/png"
                 ],
                 [
-                    "src" => setting('app-icon-32') ?: url('/icon-32.png'),
-                    "sizes" => "32x32",
+                    "src" => setting('app-icon-64') ?: url('/icon-64.png'),
+                    "sizes" => "64x64",
                     "type" => "image/png"
                 ],
                 [
@@ -48,25 +49,11 @@ class PwaManifestBuilder extends Controller
                     "type" => "image/png"
                 ],
                 [
-                    "src" => public_path('icon.ico'),
-                    "sizes" => "48x48",
-                    "type" => "image/vnd.microsoft.icon"
-                ],
-                [
-                    "src" => public_path('favicon.ico'),
+                    "src" => url('favicon.ico'),
                     "sizes" => "48x48",
                     "type" => "image/vnd.microsoft.icon"
                 ],
             ],
         ];
     }
-
-    /**
-     * Serve the application manifest.
-     * Ensures a 'manifest.json'
-     */
-    public function manifest()
-    {
-        return response()->json($this->GenerateManifest());
-    }
 }

resources/views/layouts/base.blade.php

@@ -30,8 +30,8 @@
     <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') }}" />
-    <meta name="mobile-web-app-capable" content="yes" />
+    <link rel="manifest" href="{{ url('/manifest.json') }}" crossorigin="use-credentials">
+    <meta name="mobile-web-app-capable" content="yes">
 
     @yield('head')
 

routes/web.php

@@ -5,7 +5,6 @@ use BookStack\Activity\Controllers as ActivityControllers;
 use BookStack\Api\ApiDocsController;
 use BookStack\Api\UserApiTokenController;
 use BookStack\App\HomeController;
-use BookStack\App\PwaManifestBuilder;
 use BookStack\Entities\Controllers as EntityControllers;
 use BookStack\Http\Middleware\VerifyCsrfToken;
 use BookStack\Permissions\PermissionsController;
@@ -21,7 +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', [PwaManifestBuilder::class, 'manifest']);
+Route::get('/manifest.json', [HomeController::class, 'pwaManifest']);
 
 // Authenticated routes...
 Route::middleware('auth')->group(function () {

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']);
+    }
+}