diu/neos-pwa

Last activity on 3 March 2021
  • 1
  • 1
  • 2
composer require diu/neos-pwa

1.0.0

Version
1.0.0
Type
neos-plugin
Release Date
08.03.2021 22:21:14
Source
git
Distribution
zip
Requires
Requires (dev)
None
Suggest
None
Provides
None
Conflicts
None
Replaces
None
MIT 8398fc2610faac86670b30cdf340a6a10bef8bba

Service Worker (PWA) for Neos

This package adds a basic configuration to precache content using service worker with google workbox. Furthermore, it will add a "Add to homescreen" for your devices who are supporting it.

Setup

Run composer require diu/neos-pwa

Configuration

Copy the following files to your site package and change the values to your need:

Add all icons for the manifest, an example is in the Settings.Manfiest.yaml and set name, colors ...

For the workbox setting, it is usually enough to adapt only the globPattern to your needs. We recommend to only include files from your package, don't add any Neos static files.

All necessary configurations are added to the Neos.Neos:Page prototype. The initialisation of the service worker is done via inline javascript before the closing body tag.

SUGGESTION: Exclude in your .gitignore /Web/sw.js and /Web/workbox-* as they should be automatically generated while your CI/CD process and is versioned by workbox-cli.

Create workbox-config.js

Run ./flow pwa:create or ./flow pwa:update. This will create/update the workbox-config.json in your project root.

Local testing

We recommend to use DDEV as you need a valid https connection, but it should also work with http://localhost for development.

  • make sure you have installed the package
  • Run npm add workbox-cli && npx workbox generateSW (instead of npm you can also use yarn add workbox-cli)

Add to your CI/CD pipeline

Workbox needs your paths to static resources. Therefore, you have to provide a complete "build" environment. We suggest to add a new FLOW_CONTEXT like Development\Workbox\Settings.db.yaml where you add a setting for an in-memory sqlite database:

    Neos:
      Flow:
        persistence:
          backendOptions:
            driver: 'pdo_sqlite'
            path: ':memory:'
            username: NULL
            password: NULL
          doctrine:
            cacheImplementation: NULL
            dbname: 'flow_functional_testing'

Add these build steps:

  • Run ./flow resource:publish --collection static as workbox needs the static files while building the service worker in next step
  • npm add workbox-cli && npx workbox-cli generateSW This will generate your service worker, based on the workbox-config.js in your /Web directory

(instead of npm you can also use yarn add workbox-cli)

Roadmap

  1. Autogenerate all favicon/icons based on Manifest.yaml and add them to the header

Sponsor

This Neos plugin is kindly sponsored by DI Unternehmer - Digitalagentur GmbH

The content of the readme is provided by Github
The same vendor provides 13 package(s).