Merge branch 'basic-pwa-support' into development
This commit is contained in:
commit
d1f28ed245
5 changed files with 145 additions and 1 deletions
|
@ -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());
|
||||
}
|
||||
}
|
||||
|
|
59
app/App/PwaManifestBuilder.php
Normal file
59
app/App/PwaManifestBuilder.php
Normal file
|
@ -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"
|
||||
],
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
|
@ -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 -->
|
||||
|
|
|
@ -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 () {
|
||||
|
|
72
tests/PwaManifestTest.php
Normal file
72
tests/PwaManifestTest.php
Normal file
|
@ -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']);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue