3 Replies Latest reply on Nov 28, 2016 7:43 AM by kerrishotts

    Is it possible to share common html between pages?

    RevolverRelayer

      If I have a block of html that is common to multiple pages - for example a ul table containing the site menu, at present I copy and paste the html onto every page.

       

      However, if I change the menu, I have to repeat the process.

       

      Is there any way of having common html files that are somehow 'included' by the PhoneGap CLI build process, something similar to '@import' in SASS for example?

       

      Or am I missing something obvious?

       

      Thanks

        • 1. Re: Is it possible to share common html between pages?
          kerrishotts Adobe Community Professional

          Yes, but none of it is accomplished using the PhoneGap CLI. The CLI is just a tool for packaging your www content into a hybrid app -- how you generate www is up to you.

           

          I would suggest:

          • Single page architecture
            • This is a little bit of a misnomer -- it's not that your app has only one page, but that it has a single dynamic DOM. Pages are inserted dynamically into the existing DOM, which means you can keep your app state around and not have to manage it by passing it via query parameters or persisting to session storage.
            • Avoids reloading and reiniting Cordova and plugins each time navigation occurs
            • App state persists through navigation, but you have to be WAY more careful about memory management.
          • Templating
            • Lets you reuse components and render data-driven views
            • Which templating library you use will depend upon your needs and (often) your chosen framework
          • Module bundling/packing (Browserify, webpack, jspm)
            • Bundles everything up into a nice, neat package

           

          However, since PG uses a webview to render your app's content, you can use any building mechanism you want. If your app is simple enough, you might be able to get by with a static site generator (like Hugo). I don't suggest that, because it's not going to be terribly performant (each navigation triggers a reinitialization of Cordova and plugins), but the option is there if you want to use it.

          1 person found this helpful
          • 2. Re: Is it possible to share common html between pages?
            RevolverRelayer Level 1

            Thanks, Kerri.

             

            In option 1, do you mean using javascript to inject content into the DOM (possibly fetching it using Ajax)?

             

            Regards

            • 3. Re: Is it possible to share common html between pages?
              kerrishotts Adobe Community Professional

              Most frameworks will have some mechanism for dealing with dynamic content, but yes, you can do it that way. Typically you'd end up bundling templates & code using a module bundler so that no XHR request is necessary (other than for the data you need for the view) as there are some edge cases where XHR against file:// can be dodgy. (For example, the modern fetch API doesn't support the file URI scheme, and WKWebView has problems with local XHRs in some versions of iOS.)

               

              Let me point you to an example that I built for a recent video course I created: GitHub - kerrishotts/PhoneGap101-Filer: Demonstration app for PhoneGap 101 video course by Packt

               

              This example uses Framework7, which comes with templating and such built-in. This was for a beginning course, so I don't have it configured to use module bundling yet, which means it does use XHR to fetch local resources (html, code, etc.). See if that helps any.