disjfa / pwa-bundle
用于symfony的Pwa包,也可用于glynn-admin-symfony。创建favicon和启动图标
0.2.0
2023-11-08 22:14 UTC
Requires
- liip/imagine-bundle: ^2.1
- nyholm/psr7: ^1
- symfony/orm-pack: ^1|^2
- symfony/twig-bundle: ^6
This package is auto-updated.
Last update: 2024-09-09 21:17:24 UTC
README
将favicon、启动图标、启动器图标和manifest.json添加到您的网站中。要查看如何设置,请参阅glynn-admin-symfony4
安装
composer req disjfa/pwa-bundle
配置
在您的.env文件中设置PWA_PUBLIC_PATH。有关如何获取这些内容的详细信息,请参阅api unsplash api。
对于初始设置,我在public文件夹中设置了一个名为
cp vendor/disjfa/pwa-bundle/Resources/public/pwa-icon.png public/
用法
在您的页眉中,您可以包含元文件
{{ include('@DisjfaPwa/meta.html.twig') }}
手动设置
这是一个使用symfony 4的示例,对于symfony 3,请将路由添加到router.yml
中,并将设置添加到config.yml
中。
在路由中添加路由(config/routes/disjfa_pwa.yaml
)
disjfa_pwa:
resource: '@DisjfaPwaBundle/Controller/'
type: annotation
设置,(config/packages/disjfa_pwa.yaml
)
parameters:
disjfa_pwa.favicon: /pwa-icon.png
disjfa_pwa.background_color: '#000000'
disjfa_pwa.theme_color: '#ecf0f1'
disjfa_pwa.name: 'App name'
disjfa_pwa.short_name: 'App name'
disjfa_pwa.start_url: '/?start'
disjfa_pwa.display: 'standalone'
liip_imagine:
filter_sets:
pwa_16x16:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [16, 16]
mode: inset
allow_upscale: true
background:
size: [16, 16]
position: center
color: '#aaa'
pwa_32x32:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [32, 32]
mode: inset
background:
size: [32, 32]
position: center
color: '#aaa'
pwa_36x36:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [36, 36]
mode: inset
allow_upscale: true
background:
size: [36, 36]
position: center
color: '#aaa'
pwa_48x48:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [48, 48]
mode: inset
allow_upscale: true
background:
size: [48, 48]
position: center
color: '#aaa'
pwa_57x57:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [57, 57]
mode: inset
allow_upscale: true
background:
size: [57, 57]
position: center
color: '#aaa'
pwa_60x60:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [60, 60]
mode: inset
allow_upscale: true
background:
size: [60, 60]
position: center
color: '#aaa'
pwa_72x72:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [72, 72]
mode: inset
allow_upscale: true
background:
size: [72, 72]
position: center
color: '#aaa'
pwa_76x76:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [76, 76]
mode: inset
allow_upscale: true
background:
size: [76, 76]
position: center
color: '#aaa'
pwa_96x96:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [96, 96]
mode: inset
allow_upscale: true
background:
size: [96, 96]
position: center
color: '#aaa'
pwa_114x114:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [114, 114]
mode: inset
allow_upscale: true
background:
size: [114, 114]
position: center
color: '#aaa'
pwa_120x120:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [120, 120]
mode: inset
allow_upscale: true
background:
size: [120, 120]
position: center
color: '#aaa'
pwa_128x128:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [128, 128]
mode: inset
allow_upscale: true
background:
size: [128, 128]
position: center
color: '#aaa'
pwa_144x144:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [144, 144]
mode: inset
allow_upscale: true
background:
size: [144, 144]
position: center
color: '#aaa'
pwa_152x152:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [152, 152]
mode: inset
allow_upscale: true
background:
size: [152, 152]
position: center
color: '#aaa'
pwa_180x180:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [180, 180]
mode: inset
allow_upscale: true
background:
size: [180, 180]
position: center
color: '#aaa'
pwa_192x192:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [192, 192]
mode: inset
allow_upscale: true
background:
size: [192, 192]
position: center
color: '#aaa'
pwa_256x256:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [256, 256]
mode: inset
allow_upscale: true
background:
size: [256, 256]
position: center
color: '#aaa'
pwa_228x228:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [228, 228]
mode: inset
allow_upscale: true
background:
size: [228, 228]
position: center
color: '#aaa'
pwa_384x384:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [384, 384]
mode: inset
allow_upscale: true
background:
size: [384, 384]
position: center
color: '#aaa'
pwa_512x512:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [512, 512]
mode: inset
allow_upscale: true
background:
size: [512, 512]
position: center
color: '#aaa'
pwa_1024x1024:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [1024, 1024]
mode: inset
allow_upscale: true
background:
size: [1024, 1024]
position: center
color: '#aaa'
pwa_320x460:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [320, 460]
mode: inset
allow_upscale: true
background:
size: [320, 460]
position: center
color: '#aaa'
pwa_640x920:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [640, 920]
mode: inset
allow_upscale: true
background:
size: [640, 920]
position: center
color: '#aaa'
pwa_640x1096:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [640, 1096]
mode: inset
allow_upscale: true
background:
size: [640, 1096]
position: center
color: '#aaa'
pwa_750x1294:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [750, 1294]
mode: inset
allow_upscale: true
background:
size: [750, 1294]
position: center
color: '#aaa'
pwa_748x1024_landscape:
jpeg_quality: 85
png_compression_level: 8
filters:
rotate:
angle: 90
thumbnail:
size: [748, 1024]
mode: inset
allow_upscale: true
background:
size: [748, 1024]
position: center
color: '#aaa'
pwa_768x1004_portrait:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [768, 1004]
mode: inset
allow_upscale: true
background:
size: [768, 1004]
position: center
color: '#aaa'
pwa_1182x2208_landscape:
jpeg_quality: 85
png_compression_level: 8
filters:
rotate:
angle: 90
thumbnail:
size: [1182, 2208]
mode: inset
allow_upscale: true
background:
size: [1182, 2208]
position: center
color: '#aaa'
pwa_1242x2148_landscape:
jpeg_quality: 85
png_compression_level: 8
filters:
rotate:
angle: 90
thumbnail:
size: [1242, 2148]
mode: inset
allow_upscale: true
background:
size: [1242, 2148]
position: center
color: '#aaa'
pwa_1242x2148_portrait:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [1242, 2148]
mode: inset
allow_upscale: true
background:
size: [1242, 2148]
position: center
color: '#aaa'
pwa_1496x2048_landscape:
jpeg_quality: 85
png_compression_level: 8
filters:
rotate:
angle: 90
thumbnail:
size: [1496, 2048]
mode: inset
allow_upscale: true
background:
size: [1496, 2048]
position: center
color: '#aaa'
pwa_1536x2008_portrait:
jpeg_quality: 85
png_compression_level: 8
filters:
thumbnail:
size: [1536, 2008]
mode: inset
allow_upscale: true
background:
size: [1536, 2008]
position: center
color: '#aaa'