illustration for Manage PWA Application Versions

The primary goal of PWA technology is to enable the use of such applications on any user device in a way that closely resembles a native application. In the context of approximating a native application, the idea of versioning the application within a single domain emerged: using the application version as the address to navigate to the final folder with the build. It would be great to switch between different versions of the same application for backward compatibility with various biome services.

Environment

  1. Application build: webpack + create-react-app + pwa plugin + react-browser-router
  2. Nginx
  3. Browser: Chrome

What We Did

  • PWA Application:
  1. Environment: added a constant in the .env file PUBLIC_URL=/<app_version>
  2. manifest.json: changed start_url, src for the application logos
  3. serviceWorkerRegistration.js: added scope to the SW registration method 
    {scope: `${process.env.PUBLIC_URL}/`}
  4. index.jsx: changed the settings for the BrowserRouter application basename={PUBLIC_URL}
  • Nginx:
  1. Implemented a directory structure like /var/www/pwa/build-${app_version}
  2. Set root for nginx to /var/www/pwa/
  3. Enabled autoindexing

What We Achieved

The idea is good, but implementation in the current environment faced several issues. Technically, it was possible to create the storage, but using it was quite inconvenient:

  • In PWA applications, a separate page was developed with the functionality of installing the application:
  1. When navigating to a link like <domain>/<build_version>/install, nginx returned a 500 error
  2. Changed the location settings, specified the behavior directly for <domain>/<build_version>/install - got a 404 error
  3. Internal PWA routing started working only after initially navigating to a link like <domain>/<build_version>
  • Installing different versions of the PWA on a device. 
    Installing one version of a PWA application blocks the ability to install other versions whose builds are stored on the same domain: the browser can identify and open only one PWA application on a device per domain. To install another version, you need to remove the already installed one.

Conclusion

Creating a version storage for a PWA application on one domain with the ability to install and use them is limited by the capabilities of nginx, the browser, and SPA architecture. It was not possible to create something similar to a version management system for native Android/iOS applications. For stable operation, updates, and debugging, a PWA application requires a separate domain with the latest version build placed on it.
 

 

Also read: