Adding PWA Support to Spartacus

Note: Spartacus 4.x is no longer maintained. Please upgrade to the latest version.

Note: Spartacus 4.x was tested with SAP Commerce Cloud versions 1905 to 2205. Spartacus 4.x has not been verified to work with (and is not guaranteed to work with) SAP Commerce Cloud 2211 or later releases.

You can add Progressive Web Application (PWA) support to the Spartacus app. Spartacus supports the latest major version of @angular/pwa.

Setting up PWA in Spartacus

  1. Add the Angular PWA dependency to your shell app, as follows:

     ng add @spartacus/schematics --pwa

    Note: The command works even if you already have Spartacus installed.

    Note: If you have more than one project in your workspace, use the --project flag to add PWA to your main project.

    If you already have the @angular/pwa dependency, do the following:

    1. Remove the @angular/pwa dependency from package.json
    2. Run yarn to remove the dependencies from your app
    3. Run ng add @spartacus/schematics --pwa

    Adding the dependency using ng add @spartacus/schematics --pwa also triggers the angular PWA schematic, which automatically does the following:

    • creates default PWA configuration files
    • creates the ngsw-config.json service worker configuration file
    • creates icons
    • updates the angular.json file to include PWA-related resources in your build
    • updates project files for PWA readiness.

  2. Build your app in prod mode, as follows:

     ng build --prod

    The build generates the required files to register your service worker and serve your app in PWA mode.

    Note: The Spartacus PWA module assumes a production===true flag, which is set using the environment.production file. You need to manually set this setting.

  3. Deploy and serve your app using an HTTP server.

    For testing purposes, we recommend that you install http-server as a dev dependency, and that you serve the app using http-server ./dist/your-app

    Double-check that the service worker is running and that the Add to Home Screen feature works. For more information, see Adding the Spartacus App to the Home Screen.

Limitations

  • The default ng server (webpack devserver) does not provide support for service workers. You must use a separate HTTP server to support PWA.

  • PWA is only supported in secure mode, so the HTTP server of your choice needs to serve Spartacus in secure (HTTPS) mode.