Question 301780 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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?

Tags:

2

Answers


  1. 0

    The answer is No at least for the App store which is not PWA friendly.
    You might be able to achieve this for the Play Store here

    My advice would be to code your app in React Native.
    You won’t need to change the logic and the way you connect your app to your back end.

    If you already use the StyleSheet component to manage your style, the main thing you need to change in your code is the JSX part using the Core Component provided by React Native like the following (basic exemple)

    // React JS

return (
    <div style={styles.container}>
        <p>...</p>
    </div>
)

    to

    // React Native

return (
    <ScrollView> // if you need the screen to be scrollable
        <View style={styles.container}>
            <Text>...</Text>
        </View>
     <ScrollView>
)

    Make sure to adapt the style as needed. Have a look at the shadows for exemple as it’s specific to both Android and iOS.

    You also have to pay attention to the React Native specific behavior, for exemple for the input, TextInput in RN.

    // React JS

return (
    <div>
        ...
        <input
            value={value} 
            onChange={e => setValue(e.target.value)}
        />
    </div>
)

    to

      // React Native

return (
    <View>
        ...
        <TextInput
            onChangeText={(text) => setValue(text)} // here 'text' is passed as a single string argument to the callback handler
            value={value}
        />
    </View>
)

    Another tips are to check the FlatList Component to manage your lists instead of map(), and get started with Expo if it’s your first time coding with RN as it’s easier to get started with.

    I acknowledge it’s a bit of work because unlike React that uses React Dom to display your app on the web, React Native connects your Components to both native platforms Android and iOS, but still better than rewrite the entire app.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search