wq/wq.app

PhoneGap build in 1.2

simonwinter opened this issue · 2 comments

simonwinter commented

Hi there,

When we're building for phonegap via the wq phonegap command in the npm version of the tool, it doesn't appear to give us the expected output (in terms of the html file) in order to make the app work with PG.

Previously we had an index file that looked similar to this:

<!DOCTYPE html>
<html>
  <head>
    <title>sightings Project</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=yes" />
    <link rel="stylesheet" href="css/sightings.css">
    <script src="cordova.js"></script>
    <script src="js/lib/require.js"></script>
    <script src="js/pginit.js"></script>
  </head>
  <body class="ui-mobile">
    <div class="ui-page ui-page-active ui-page-theme-a" style="visibility:visible;">
      <div role="banner" class="ui-header ui-bar-inherit">
        <h1 class="ui-title" role="heading" aria-level="1">sightings Project</h1>
      </div>
      <div role="main" class="ui-content">
        <!-- Place pre-styled inert content here to make transition to actual index more seamless -->
      </div>
    </div>
  </body>
</html>

The new output from npm run build looks like so:

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app and wq.start 1.2.0"/><link rel="apple-touch-icon" href="icon-192.png"/><link rel="manifest" href="/manifest.json"/><link rel="stylesheet" href="/css/snapper.css"/><title>starter project</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,p,l=r[0],a=r[1],f=r[2],c=0,s=[];c<l.length;c++)p=l[c],Object.prototype.hasOwnProperty.call(o,p)&&o[p]&&s.push(o[p][0]),o[p]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(i&&i(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=p(p.s=t[0]))}return e}var n={},o={1:0},u=[];function p(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,p),t.l=!0,t.exports}p.m=e,p.c=n,p.d=function(e,r,t){p.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},p.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},p.t=function(e,r){if(1&r&&(e=p(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(p.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)p.d(t,n,function(r){return e[r]}.bind(null,n));return t},p.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return p.d(r,"a",r),r},p.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},p.p="/";var l=this.webpackJsonpsnapper=this.webpackJsonpsnapper||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var f=0;f<l.length;f++)r(l[f]);var i=a;t()}([])</script><script src="/static/js/2.d15e1b22.chunk.js"></script><script src="/static/js/main.198c3a00.chunk.js"></script></body></html>

When we test the built npm files via npx run serve, the site behaves as expected. So the npm build process is working well. What I'm unsure of is - how do we go about ensuring that phonegap is being initialized correctly (do we need to do something similar to the previous template)? Does the npm generated index page require additional processing to add the required phonegap libraries etc?

Related to: #119

sheppard commented

Yes, there is one extra requirement to get the npm build working in PhoneGap. Essentially there needs to be another <script> tag in public/index.html that loads before the build and defines window.WQ_CONFIG with similar parameters as the old pginit.js. Perhaps something like this:

window.WQ_CONFIG = {
    router: {
        base_url: getBaseUrl()
    },
    store: {
        service: 'https://[SERVER_DOMAIN]',
        defaults: {'format': 'json'}
    }
}

My plan was to release something like this as a fix to the project template in 1.2.1 (see wq/wq.create#6). However, it looks like PhoneGap Build itself will be discontinued a month from now (per https://build.phonegap.com/). Thus, I will instead be deprecating the wq phonegap build command in 1.3 and dropping it entirely in 2.0. I could still see putting together some documentation for those that want to install Cordova locally, though it will not be the recommended option.

Going forward, the recommendation will be to do one or both of the following:

  • Deploy via an installable web app. For wq start --with-npm projects, this should be as simple as switching serviceWorker.unregister() to serviceWorker.register() in the existing npm template. For PyPI-only users I still need to come up with a service-worker replacement for the wq appcache command (#63/#107).
  • Deploy to app stores via React Native or Expo and the new @wq/react+@wq/material renderer (#122).
sheppard commented

I just released wq.app 1.3 alpha, which includes a deprecation warning for the wq phonegap command as well as improved support for service workers and integration with React Native / Expo.