Hi there – I’m building my first real app with Ionic. I was planning to release it as a Progressive Web App (i.e., to host it on www.myapp.com, rather than requiring the user to install it as a native app). However, I need to be able to access the device’s camera. Can I do this in a PWA, or would I have to publish it as a native iOS / Android app instead? Noob question, I know :slight_smile:

Okay - late in the day so getting tired, but here ya go. [image] judgewest2000/IonicPwa IonicPwa - Ionic Pwa Examples Normally I’d do a little vid but the wife had a baby a few days ago so I’m a bit tired. Let me know if that works for you. I’ve called it ‘Pwa’ instead of ‘Camera’ as I might shove other PWA examples in it at a later date. Anyway, let me know what you think. James

You seem to be in luck. Camera is apparently one of the relatively few cordova plugins supported by the “browser” platform.

I’ve used in the browser, it works, but it renders an unstyled form at the root of so you’ll need to hackishly style it to make it fit with what/where you need it to work.

YEARS ago I did a PWA app targeting the iPhone which made extensive use of the camera. It was quite simple in the end as it sent back a base64 string with which you can do whatever you like. The link beneath (nothing to do with me) has an example of that. [Janey] html5 display as image rather than "choose file" button php, html, html5 asked by Janey on 04:01PM - 28 May 14

Hello again – Thanks for the replies. However, I’m afraid I’m pretty confused, and not having much luck. I’m confused about the difference between the “www” platform and the “browser” platform. I’ve tried searching, but these are hard terms to Google. Any hints? Maybe “www” is for regular browsers (e.g., Chrome), and “browser” is for the WebView (Android) / UIWebView (iOS) wrapper that serves as the host environment for apps which have been installed to a device’s home screen? Or maybe I’m totally on the wrong track? I ran ionic cordova run browser. This builds my app and exposes it at localhost:8000. I’m then able to pull up my app in Safari on an iPad on the same network, by navigating to http://12.34.56.78:8000. But when the app calls Camera.getPicture(), I get an alert that says: “Browser does not support camera :(” (Yes, the frowny face is part of the alert.) I tried searching for this phrase, and there’s almost nothing on Google. Perhaps loading the app in Safari isn’t enough, and I need to actually install it on my home screen and run it from there? The problem is, I’ve installed and uninstalled the app in the past, and Safari no longer prompts me to install it. If I pick “add to home screen” from the bookmark menu, then I just get a bookmark which opens in Safari – which puts me right back where I started. How can I force Safari to display the install prompt? ETA: I just realized that my app must be served via HTTPS before the install banner will display, but I’m browsing http://12.34.56.78:8000. So that probably explains it. But, Ionic’s development server doesn’t seem to support HTTPS. Do I have to build the app and put it on an SSL-enabled server before I can test the real-world experience on the iPad? That’s gonna be a serious headache for development. ETA: Well, I went ahead and put it on an SSL-enabled server. Browsing to that URL simply displays a Cordova logo, with the text “Apache Cordova – Connecting to Device” below. It just stays there forever. ETA: I traced the “Browser does not support camera” error to this file in cordova-plugin-camera. It’s failing to find navigator.getUserMedia, which is deprecated. So, it seems that – although there may have been some camera support in the browser in the past – this is no longer the case. If that’s accurate, then I’m looking at a major change of plans for my app (it’ll have to be native instead of a PWA). Argh.

Howdy, I’ll be honest. I’ve forgot what the original goals actually were. Did you try out the link thing I sent re input type=“file” ? It would take no time at all to test it out. Though there is a current issue with that approach in the form of iOS11. They’ve broken the functionality when you have your app as a home screen link. They’ll fix it soon enough I’m sure.

I did try that. Unfortunately, I couldn’t figure out how to read the file data once the user had selected a file and submitted the form. I tried examining this.formGroup.controls.photoField.value, but it’s always an empty string.

If I get chance I could put a little implementation together.

If you do find the time, I would really appreciate it – and I’m sure that future searchers would, as well! If I can get around asking the client to sideload an app, that’s obviously a big plus…

Already add the second bit - on that git repo there’s also an example of how to handle scrolling which is worth a look.

Can I use ionic-native components in a PWA, or do I need to publish my app for iOS / Android?

Ionic Framework ionic-v3

deanna777 September 13, 2017, 9:23pm 2

Pretty sure this thread has some insight for you. Cheers!

Topic		Replies	Views
Ionic PWA - Camera ionic-v3	3	4603	October 6, 2017
Ionic PWA to access mobile camera ionic-v3	5	4075	July 10, 2017
Ionic 4 - PWA and Native Camera Plugin Help Ionic Framework	3	3035	May 28, 2019
Ionic 4 PWA Camera Ionic Framework	13	8172	May 30, 2019
Ionic 2 PWA Push notification and camera ionic-v3	1	1268	April 28, 2017

Can I use ionic-native components in a PWA, or do I need to publish my app for iOS / Android?

Related topics