diff --git a/app/App/HomeController.php b/app/App/HomeController.php
index 24b7c3ed8..8188ad010 100644
--- 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
index 377e577eb..4902d354d 100644
--- a/app/App/PwaManifestBuilder.php
+++ b/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());
- }
}
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 13ad6a4fd..8693f021d 100644
--- a/resources/views/layouts/base.blade.php
+++ b/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')
diff --git a/routes/web.php b/routes/web.php
index 6bc563480..9c049ba36 100644
--- a/routes/web.php
+++ b/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 () {
diff --git a/tests/PwaManifestTest.php b/tests/PwaManifestTest.php
new file mode 100644
index 000000000..b8317321d
--- /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']);
+ }
+}