Installation¶

To install the bundle, the recommended way is using Composer:

composer require spomky-labs/pwa-bundle

No Flex recipe exists for this bundle, but you can create a configuration file that will be modified as you progress in the integration of the features.

/config/packages/pwa.yaml

pwa: ~

The integration in your application is very simple. You are only required to add a Twig function inside the end of the <head> tag of your HTML pages.

<!DOCTYPE html>
<html lang="en">
<head>
  {{ pwa() }}
</head>
<body>
  ...
</body>
</html>

Info

You may need to clear the cache after the bundle is installed

Twig function options¶

The pwa() Twig function accepts several optional parameters to control what is injected:

{{ pwa(
    injectThemeColor: true,
    injectFavicons: true,
    injectSW: true,
    swAttributes: {},
    locale: null,
    injectResourceHints: true,
    injectSpeculationRules: true
) }}

Parameter	Type	Default	Description
`injectThemeColor`	bool	`true`	Inject theme color meta tags
`injectFavicons`	bool	`true`	Inject favicon link tags
`injectSW`	bool	`true`	Inject service worker registration script
`swAttributes`	object	`{}`	Custom attributes for the service worker script tag
`locale`	string	`null`	Locale for manifest (auto-detected from request if null)
`injectResourceHints`	bool	`true`	Inject resource hints (preconnect, dns-prefetch, preload)
`injectSpeculationRules`	bool	`true`	Inject speculation rules for prefetch/prerender

Example: Disable resource hints¶

{{ pwa(injectResourceHints: false) }}

Example: Localized manifest¶

{{ pwa(locale: app.request.locale) }}