Adding PWA Support to Composable Storefront

Setting up PWA in Composable Storefront

Procedure

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 composable storefront 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.
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 composable storefront PWA module assumes a production===true flag, which is set using the environment.production file. You need to manually set this setting.
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 Composable Storefront 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 composable storefront in secure (HTTPS) mode.

Hash Mismatch When Using Auto API Injection in SAP Commerce Cloud

If you are using the auto API injection mechanism in SAP Commerce Cloud, there is an index.html hash mismatch that can occur when hosting composable storefront as a PWA app in SAP Commerce Cloud.

When hosting composable storefront in SAP Commerce Cloud, the typical process is that the storefront application is built by generating all of the application files, the appropriate SHA1 hashes are put in the ngsw.json file, and when the application is run, all of the hashes match the files on the server.

However, if you are using SAP Commerce Cloud's auto API injection mechanism, there is a <meta name="occ-backend-base-url" content="OCC_BASE_URL_VALUE"> placeholder in the index.html file that is updated when a pod is started, but before the application itself starts. The OCC_BASE_URL_VALUE is replaced with the actual URL for the API endpoint in the environment where the application is currently deployed, which means the index.html file is changed when the placeholder is replaced. This results in a different hash for index.html, which in turn leads to a hash mismatch error in the service worker. As a result, the service worker (and by extension, PWA) does not work correctly anymore.

If the URL for the API endpoint is hardcoded in the index.html file, then no hash mismatch occurs, and hosting composable storefront as a PWA app in SAP Commerce Cloud works as expected.