Webapp to mobile app, PWA, share target

e120265 · January 19, 2018, 7:37pm

Hello all,

I have a working php+mysql+bootstrapCSS webapp which works well within a mobile browser. However, I need to deliver this webapp as a mobile app for both Android and iOS.

I recently discovered progressive web apps (PWA) which seemed like a perfect solution for my problem, until when I learnt that you cannot register a PWA as a share target, i.e. if an Android user wants to share an image from her gallery to my PWA, this wouldn’t be possible. I also learnt that this feature is currently being worked on but I need this functionality right now.

I guess the only option for me right now is to implement the Ionic version for my webapp, which will be very costly and I want to avoid doing this.

Any suggestions?

Judgewest2000 · January 20, 2018, 2:07am

You can share images from PWA’s. I’ve been doing that for many years from both iOS and Android.

What’s your target audience? iOS / Android?
Full screen app or browser based???

e120265 · January 20, 2018, 4:36am

I want to share an image to the PWA. This is not possible for now.

Judgewest2000 · January 20, 2018, 5:38am

Have a look at this…

e120265 · January 20, 2018, 6:32am

Thanks but I don’t have the environment to test it out.

If you implement your PWA using Ionic, you can definitely register your app as a share target. However, I’m talking about converting an existing (php+mysql) webapp into a PWA. Is the following possible? I will start a Ionic PWA from scratch but integrate my webapp as a PWA inside this Ionic app.

Judgewest2000 · January 20, 2018, 9:03am

You don’t have the environment to test it out? Any Windows / Linux / Mac computer can run it if you have ionic already installed - just do.

> git clone https://github.com/judgewest2000/IonicPwa
> cd IonicPwa
> ionic serve

Also what you’re saying now sounds completely different to the original question. What are you trying to achieve? Turn an existing website into a full screen web app that people can deploy to their phones? Or redevelop a mobile version using Ionic that requires camera capture?

Just explain what you actually want to achieve.

e120265 · January 20, 2018, 5:36pm

Well, let’s see.

I have an already working php+mysql based, mobile-first (as in bootstrap CSS) webapp. Let’s call this W.
I need to create Android and iOS apps for W. Let’s call this mobile apps as M.
M should have the capability of being a share target for images.
I can easily convert M to a PWA. However, a PWA cannot be a share target.
I do not want to implement W from scratch as an Ionic app. This is very costly.

What do you suggest me do? This is pretty much the same as my original post.

And I did what you said (after installing the latest ionic and issuing npm install), I got:

x@x-laptop:/tmp/IonicPwa$ ionic serve

Error: Cannot find module 'internal/util/types'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at evalmachine.<anonymous>:31:26
    at Object.<anonymous> (/usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:11:1)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)

Cannot find module 'internal/util/types' (CLI v1.7.16)

Your system information:

Cordova CLI: 6.2.0
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID:     Ubuntu Description:     Ubuntu 16.04.3 LTS 
Node Version: v8.9.4

Sujan12 · January 20, 2018, 5:39pm

This is ancient. You should upgrade to a recent version (3.19.1).

Is it possible in general to use a PWA as a share target?

e120265 · January 20, 2018, 5:45pm

Interesting. I installed nodejs version 8.9.4 and then did npm install -g cordova ionic. Is this wrong?

No. But it is in the works, see: GitHub - w3c/web-share-target: Web API proposal for receiving shared data Chrome Platform Status

Sujan12 · January 20, 2018, 5:47pm

No, that is perfectly fine normally. What does npm list -g --depth=0 return?

Then I would say your best bet is to either wrap your web app in a Cordova app or recreate your app in Ionic (which will wrap itself in Cordova). There are Cordova plugins to receive shares.

e120265 · January 20, 2018, 5:49pm

Here is what npm list -g --depth=0 returns:

$ npm list -g --depth=0
/usr/lib
├── cordova@8.0.0
├── ionic@3.19.1
├── node@0.0.0
├── nodejs@0.0.0
└── npm@5.6.0

npm ERR! invalid: minizlib@1.0.3 /usr/lib/node_modules/npm/node_modules/tar/node_modules/minizlib

How does “Wrapping my web app in a Cordova app” work? Can you point me to an example or a tutorial? I just found this and started reading it but I would appreciate if you give me better/more resources.

AaronSterling · January 20, 2018, 5:59pm

This looks weird. Bad npm cache maybe? Did you install ionic briefly a couple years ago? That might explain the cli version issue.

Sujan12 · January 20, 2018, 6:00pm

That looks good and doesn’t match what you got as output earlier. Huh?
What does ionic info return in that project?

Sujan12 · January 20, 2018, 6:01pm

Just read the Cordova docs - but that medium article doesn’t sound too bad.
(Note that this has nothing to do with Ionic any more)

e120265 · January 20, 2018, 6:02pm

THanks. Can we achieve the same type of wrapping using ionic?

Sujan12 · January 20, 2018, 6:03pm

No. Ionic itself is what is inside a Cordova container when you create a native app.
If you already have the actual app, it makes no sense to use Ionic.

e120265 · January 20, 2018, 6:04pm

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID:     Ubuntu Description:     Ubuntu 16.04.3 LTS 
Node Version: v8.9.4

Sujan12 · January 20, 2018, 6:06pm

Please run npm list --depth=0 in the project. Something is strange here - with a global, current CLI that should not happen.

e120265 · January 20, 2018, 6:08pm

x@x-laptop:/tmp/IonicPwa$ npm list --depth=0
IonicPwa@0.0.1 /tmp/IonicPwa
├── @angular/common@4.4.3
├── @angular/compiler@4.4.3
├── @angular/compiler-cli@4.4.3
├── @angular/core@4.4.3
├── @angular/forms@4.4.3
├── @angular/http@4.4.3
├── @angular/platform-browser@4.4.3
├── @angular/platform-browser-dynamic@4.4.3
├── @ionic-native/core@4.3.0
├── @ionic-native/splash-screen@4.3.0
├── @ionic-native/status-bar@4.3.0
├── @ionic/app-scripts@3.0.0
├── @ionic/storage@2.0.1
├── fix-orientation@0.0.2
├── ionic-angular@3.7.1
├── ionicons@3.0.0
├── rxjs@5.4.3
├── sw-toolbox@3.6.0
├── typescript@2.3.4
└── zone.js@0.8.18

npm ERR! missing: hawk@3.1.3, required by node-pre-gyp@0.6.39
npm ERR! missing: mkdirp@0.5.1, required by node-pre-gyp@0.6.39
npm ERR! missing: rimraf@2.6.1, required by node-pre-gyp@0.6.39
npm ERR! missing: tar@2.2.1, required by node-pre-gyp@0.6.39
npm ERR! missing: boom@2.10.1, required by hawk@3.1.3
npm ERR! missing: cryptiles@2.0.5, required by hawk@3.1.3
npm ERR! missing: hoek@2.16.3, required by hawk@3.1.3
npm ERR! missing: sntp@1.0.9, required by hawk@3.1.3
npm ERR! missing: hoek@2.16.3, required by boom@2.10.1
npm ERR! missing: boom@2.10.1, required by cryptiles@2.0.5
npm ERR! missing: hoek@2.16.3, required by sntp@1.0.9
npm ERR! missing: minimist@0.0.8, required by mkdirp@0.5.1
npm ERR! missing: console-control-strings@1.1.0, required by npmlog@4.1.0
npm ERR! missing: readable-stream@2.2.9, required by are-we-there-yet@1.1.4
npm ERR! missing: console-control-strings@1.1.0, required by gauge@2.7.4
npm ERR! missing: string-width@1.0.2, required by gauge@2.7.4
npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
npm ERR! missing: code-point-at@1.1.0, required by string-width@1.0.2
npm ERR! missing: is-fullwidth-code-point@1.0.0, required by string-width@1.0.2
npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
npm ERR! missing: number-is-nan@1.0.1, required by is-fullwidth-code-point@1.0.0
npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
npm ERR! missing: string-width@1.0.2, required by wide-align@1.1.2
npm ERR! missing: combined-stream@1.0.5, required by request@2.81.0
npm ERR! missing: hawk@3.1.3, required by request@2.81.0
npm ERR! missing: mime-types@2.1.15, required by request@2.81.0
npm ERR! missing: safe-buffer@5.0.1, required by request@2.81.0
npm ERR! missing: delayed-stream@1.0.0, required by combined-stream@1.0.5
npm ERR! missing: combined-stream@1.0.5, required by form-data@2.1.4
npm ERR! missing: mime-types@2.1.15, required by form-data@2.1.4
npm ERR! missing: extsprintf@1.0.2, required by jsprim@1.4.0
npm ERR! missing: extsprintf@1.0.2, required by verror@1.3.6
npm ERR! missing: mime-db@1.27.0, required by mime-types@2.1.15
npm ERR! missing: safe-buffer@5.0.1, required by tunnel-agent@0.6.0
npm ERR! missing: glob@7.1.2, required by rimraf@2.6.1
npm ERR! missing: fs.realpath@1.0.0, required by glob@7.1.2
npm ERR! missing: inflight@1.0.6, required by glob@7.1.2
npm ERR! missing: inherits@2.0.3, required by glob@7.1.2
npm ERR! missing: minimatch@3.0.4, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by glob@7.1.2
npm ERR! missing: path-is-absolute@1.0.1, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
npm ERR! missing: brace-expansion@1.1.7, required by minimatch@3.0.4
npm ERR! missing: balanced-match@0.4.2, required by brace-expansion@1.1.7
npm ERR! missing: concat-map@0.0.1, required by brace-expansion@1.1.7
npm ERR! missing: block-stream@0.0.9, required by tar@2.2.1
npm ERR! missing: fstream@1.0.11, required by tar@2.2.1
npm ERR! missing: inherits@2.0.3, required by tar@2.2.1
npm ERR! missing: inherits@2.0.3, required by block-stream@0.0.9
npm ERR! missing: graceful-fs@4.1.11, required by fstream@1.0.11
npm ERR! missing: inherits@2.0.3, required by fstream@1.0.11
npm ERR! missing: mkdirp@0.5.1, required by fstream@1.0.11
npm ERR! missing: rimraf@2.6.1, required by fstream@1.0.11
npm ERR! missing: fstream@1.0.11, required by tar-pack@3.4.0
npm ERR! missing: once@1.4.0, required by tar-pack@3.4.0
npm ERR! missing: readable-stream@2.2.9, required by tar-pack@3.4.0
npm ERR! missing: rimraf@2.6.1, required by tar-pack@3.4.0
npm ERR! missing: tar@2.2.1, required by tar-pack@3.4.0
npm ERR! missing: fstream@1.0.11, required by fstream-ignore@1.0.5
npm ERR! missing: inherits@2.0.3, required by fstream-ignore@1.0.5
npm ERR! missing: minimatch@3.0.4, required by fstream-ignore@1.0.5
npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
npm ERR! missing: buffer-shims@1.0.0, required by readable-stream@2.2.9
npm ERR! missing: core-util-is@1.0.2, required by readable-stream@2.2.9
npm ERR! missing: inherits@2.0.3, required by readable-stream@2.2.9
npm ERR! missing: isarray@1.0.0, required by readable-stream@2.2.9
npm ERR! missing: process-nextick-args@1.0.7, required by readable-stream@2.2.9
npm ERR! missing: string_decoder@1.0.1, required by readable-stream@2.2.9
npm ERR! missing: util-deprecate@1.0.2, required by readable-stream@2.2.9
npm ERR! missing: safe-buffer@5.0.1, required by string_decoder@1.0.1

Sujan12 · January 20, 2018, 6:26pm

What is there looks ok, but the missing stuff is strange.

What does which ionic return?
npm -v and node -v?