cecil / theme-pwa
Cecil component theme PWA
Fund package maintenance!
ArnaudLigny
Open Collective
Installs: 4 900
Dependents: 3
Suggesters: 0
Security: 0
Stars: 0
Watchers: 0
Forks: 0
Language:Twig
Type:cecil-theme
Requires
- cecil/theme-installer: ^1.4
- 2.x-dev
- dev-master / 2.x-dev
- 2.7.7
- 2.7.6
- 2.7.5
- 2.7.4
- 2.7.3
- 2.7.2
- 2.7.1
- 2.7.0
- 2.6.2
- 2.6.1
- 2.6.0
- 2.5.1
- 2.5.0
- 2.4.0
- 2.3.3
- 2.3.2
- 2.3.1
- 2.3.0
- 2.2.0
- 2.1.3
- 2.1.2
- 2.1.1
- 2.1.0
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.x-dev
- 1.19.0
- 1.18.1
- 1.18.0
- 1.17.2
- 1.17.1
- 1.17.0
- 1.16.0
- 1.15.4
- 1.15.3
- 1.15.2
- 1.15.1
- 1.15.0
- 1.14.4
- 1.14.3
- 1.14.2
- 1.14.1
- 1.14.0
- 1.13.7
- 1.13.6
- 1.13.5
- 1.13.4
- 1.13.3
- 1.13.2
- 1.13.1
- 1.13.0
- 1.12.6
- 1.12.5
- 1.12.4
- 1.12.3
- 1.12.2
- 1.12.1
- 1.12.0
- 1.11.1
- 1.11.0
- 1.10.1
- 1.10.0
- 1.9.6
- 1.9.5
- 1.9.4
- 1.9.3
- 1.9.2
- 1.9.1
- 1.9.0
- 1.8.2
- 1.8.1
- 1.8.0
- 1.7.1
- 1.7.0
- 1.6.2
- 1.6.1
- 1.6.0
- 1.5.2
- 1.5.1
- 1.5.0
- 1.4.1
- 1.4.0
- 1.3.1
- 1.3.0
- 1.2.0
- 1.1.0
- 1.0.0
This package is auto-updated.
Last update: 2024-10-11 00:09:09 UTC
README
The PWA component theme for Cecil provides helpers to implement a Web manifest and a service worker to turn a website into a Progressive Web App.
Features
- Generated and configurable Web manifest
- Generated and configurable service worker
- Automatic caching of visited resources
- No dependencies, vanilla JavaScript
- Precaching of published pages
- Precaching of a list of assets
- Generic offline page and default image (SVG)
Prerequisites
- A Cecil website
- A supported browser
- HTTPS
Installation
composer require cecil/theme-pwa
Or download the latest archive and uncompress its content in
themes/pwa
.
Usage
Add pwa
in the theme
section of the config.yml
:
theme: - pwa
Web manifest
Add the web manifest in the HTML <header>
of the main template:
<link rel="manifest" href="{{ url('manifest') }}">
Configure it:
manifest: background_color: '#FFFFFF' theme_color: '#202020' icons: - icon-192x192.png - icon-512x512.png - src: icon-192x192-maskable.png purpose: maskable - src: icon-512x512-maskable.png purpose: maskable
Tip
Create your own maskable icons with Maskable.app.
Web manifest Optional
Add shortcuts:
manifest: shortcuts: true
manifest: screenshots: - screenshots/screenshot-desktop.png - screenshots/screenshot-mobile.png
Service worker
Register the service worker before the end of the HTML </body>
of the main template:
{{ include('partials/regsw.js.twig', {site: site}, with_context = false) }}
Enable the service worker:
serviceworker: enabled: true
Service worker Optional
Define precached assets:
serviceworker: install: precache: assets: - logo.png - icon-192x192.png - icon-512x512.png - icon-192x192-maskable.png - icon-512x512-maskable.png
Limit number of precached pages:
serviceworker: install: precache: pages: limit: 10
Disable install prompt:
serviceworker: install: prompt: false
Define ignored paths:
serviceworker: ignore: - name: 'cms' path: '/admin'
Do not precache a specific page (through its front matter):
--- serviceworker: precache: false ---