Enonic Market Enonic Market
Workbox PWA Starter icon

Workbox PWA Starter

Workbox best practice example

Screenshots

  • Main page - Offline
  • Main page - Offline
  • Main page - Menu
  • Network page - Online
  • Network page - Offline
  • Push Notifications page
  • Background sync page
  • Lighthouse audit

Progressive Web Apps (PWA) brings together the best of native mobile apps and web. This starter is a framework agnostic PWA starter kit based on Workbox, Webpack and the Router library

Framework agnostic

Kickstart your Progressive Web App project with this starter kit. The PWA starter provides the essential building blocks for any PWA project, and lets you use your favourite front-end framework, or roll your own.

Webpack + Workbox

The PWA starter uses modern tools like Webpack for the build process, Workbox for automatic generation of the Service Worker file and dynamic response caching. A manifest file definition is also included.

Url handling and best practice

To handle server side urls, the starter uses the Enonic javascript router library. The starter delivers an out-of-the-box best practice approach for Enonic XP. Everything you need to build and deliver an end-to-end PWA.

Releases

  1. 1.8.1

    • Fixed JAR missing assets after first build
    • Fixed push field/button remaining disabled after subscribing
    • Delete subscriptions upon app init
    • Compatibility:
      • 7.0.0
  2. 1.8.0

    • Fixed the app to be compatible with XP 7
    • Upgraded to Workbox 4
    • Fixed 404 errors when creating new todo items
    • Compatibility:
      • 7.0.0
  3. 1.7.0

    • Background sync page: create and manage a Todo list on- or off-line with cross-browser support
    • Upgraded to Workbox 3.0
    • When a new version of the app is out, user will be notified and can decide when to upgrade
    • Compatibility:
      • 6.14.0
  4. 1.6.0

    • Added Push Notifications page
    • Compatibility:
      • 6.14.0
  5. 1.5.0

    • Re-factoring of code
    • Uses Thymeleaf for pages
    • No external dependencies
    • Initial work on push messages started
    • Compatibility:
      • 6.13.0
  6. 1.4.0

    • Removed menu from the header
    • Upgraded Webpack and Workbox to newer versions
    • Changed default strategy to cache-first
    • Compatibility:
      • 6.12.0
  7. 1.3.0

    • Register Service Worker and embed inlne styles on every page
    • Update SW on app version change
    • Use NetworkFirst caching strategy
    • Compatibility:
      • 6.12.0
  8. 1.2.0

    • Upgrade xp gradle plugin to 1.0.17
    • Compatibility:
      • 6.12.0
  9. 1.1.0

    • Pass 100% audit on Lighthouse
    • Compatibility:
      • 6.12.0
  10. 1.0.0

    • Initial release
    • Compatibility:
      • 6.12.0

Comments

Clone Workbox PWA Starter

This version requires XP 7.0.0 or above.

Use Enonic CLI to set up your project.

Run the following command:

$

…and choose "Workbox PWA Starter" from the list.

Enonic CLI documentation

This version requires XP 6.15.0

To initialize a new project based on Workbox PWA Starter, execute the command below. Remember to replace <com.company.myapp> with a unique name for your app, and </my/projects> with the location you want to store the project. <$XP_INSTALL> is the location of your XP installation.

OSX/Linux

Windows

The init-project tool initializes a new application project structure by retrieving a Git repository, removing all references to the Git repository, and adapting its build file properties (gradle.properties).

Complete init-project documentation