Search code examples
reactjsprogressive-web-apps

Is it possible to convert existing React app to PWA and upload it to App store / Google store?

I'm looking for solution to migrate web app to mobile application platforms ASAP, and was thinking about to migrate web to pwa, and then upload to stores.

Any difficulties and pitfalls I can face with this approach?

Solution

  • For posterity. A quick guide on converting a web application to a progressive web application (PWA).

    It is relatively easy. I will summarize and get you in the right direction.

    First and foremost; ensure your application is served over HTTPS for security reasons. Many core PWA technologies, such as service workers, require HTTPS.

    Next include a manifest file. The W3 organization has a specification for the content of your manifest.json file which are necessary for making your application a PWA.

    While according to the spec, all of the manifest keys are optional, some browsers, operating systems, and app distributors have required keys for a web app to be a PWA.

    If you are done playing with the manifest.json file, add it to your root html template. I know this is done by default in create-react-app but if it isn’t already, then just do this:

    <head>
  <link rel="manifest" href="/*path to manifest file*/" />
</head>

    Debugging might come in handy to ensure there are no bugs. See Debugging Manifest Files on MDN.

    Next, add a service worker. The service worker will be responsible for making the application work offline while making sure the application is always up to date. In here we:

    • Specify a version for each deployment so that caches are rightly versioned.
    • Specify static resources that the app needs to function.
    • Install the app i.e., cache the static resources.
    • Remove old caches upon new deployment.
    • Intercept server requests to respond with caches etc.

    Once you are done playing with your service worker, register the worker.

    if ("serviceWorker" in navigator) navigator.serviceWorker.register(/*path to worker file*/);

    If you also want to learn to debug service workers, see Debugging Service Workers on MDN.

    For a good tutorial, see CycleTracker tutorial on MDN.

    TL;DR

    was thinking about to migrate web to pwa, and then upload to stores.

    Some mobile application stores allow PWAs while others don’t. But is this really a necessary step? I would recommend implementing the "Add to Home Screen" prompt [web.dev] to encourage users to install your PWA from your web app directly instead.