Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PhoneGap build in 1.2 #121

Closed
simonwinter opened this issue Jun 15, 2020 · 2 comments
Closed

PhoneGap build in 1.2 #121

simonwinter opened this issue Jun 15, 2020 · 2 comments
Milestone
1.3 - Material UI...

Comments

@simonwinter
Copy link

simonwinter commented Jun 15, 2020 •
edited
Loading

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
Copy link
Member

sheppard commented Sep 2, 2020 •
edited
Loading

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:

This was referenced Sep 2, 2020
Closed
Merged
@sheppard sheppard added this to the 1.3 - Material UI (Opt-In) milestone Sep 4, 2020
sheppard added a commit that referenced this issue Sep 22, 2020
@sheppard
add deprecation warnings (fixes #119, #121)
b8de442 
 - wq optimize -> npm build
 - wq babel -> npm build
 - wq appcache -> Service Worker
 - wq phonegap -> React Native / Expo
 - wq scss -> Material UI theme
 - wq mustache -> JSX
sheppard added a commit to wq/wq-django-template that referenced this issue Sep 29, 2020
@sheppard
new layout for app/ folder
dac0fe2 
 - leverage collectstatic on app/ (fixes #6, fixes #21)
 - replace RequireJS build with ES modules (see wq/wq.app#111)
 - move --with-npm template to @wq/cra-template (in wq.start repo)
 - implement service worker (see wq/wq.app#63, wq/wq.app#107)
 - drop support for PhoneGap Build and Application Cache (see wq/wq.app#121)
sheppard added a commit to wq/wq.create that referenced this issue Sep 29, 2020
@sheppard
new layout for app/ folder
59f96a1 
 - use collectstatic (see wq/wq-django-template#6 & wq/wq-django-template#21)
 - replace RequireJS build with ES modules (see wq/wq.app#111)
 - move --with-npm template to @wq/cra-template
 - implement service worker (see wq/wq.app#63, wq/wq.app#107)
 - drop support for PhoneGap Build and Application Cache (see wq/wq.app#121)
@sheppard
Copy link
Member

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.

sheppard added a commit to wq/wq-django-template that referenced this issue Oct 23, 2020
@sheppard
remove references to appcache/phonegap
4c6511b 
(see wq/wq.app#121)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
1.3 - Material UI (with compat)
Development

No branches or pull requests
2 participants
@simonwinter @sheppard