Webapp to mobile app, PWA, share target

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?

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

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

Have a look at this…

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.

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.

Well, let’s see.

  1. I have an already working php+mysql based, mobile-first (as in bootstrap CSS) webapp. Let’s call this W.
  2. I need to create Android and iOS apps for W. Let’s call this mobile apps as M.
  3. M should have the capability of being a share target for images.
  4. I can easily convert M to a PWA. However, a PWA cannot be a share target.
  5. 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

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?

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: https://github.com/WICG/web-share-target https://www.chromestatus.com/feature/5662315307335680

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.

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.

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

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

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)

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

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.

$ 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

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

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

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

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