cecil/theme-pwa

Cecil component theme PWA

Fund package maintenance!
ArnaudLigny
Open Collective

Installs: 4 965

Dependents: 3

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 0

Language:Twig

Type:cecil-theme


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

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

Add installer screenshots:

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
---