I have a small webapp that runs on a server intended for use in a setting without reliable internet access (i.e., the app can't depend on outside resources during production). The purpose of the app is simply to upload image files, read the metadata, and categorize them in the right location on the disk. Up until recently there was no problem with this process, then I noticed that some of the files did not have all of the metadata attached (specifically the creation date). Upon further inspection, it appears that these are files that were shot on my iPhone as HEIC/HEIF photos and uploaded directly to the webpage from the phone.
Due to the design of the webapp, the filename of the uploaded file is shown on the page. Every time an HEIC photo is uploaded it displays the filename as ending in .jpeg.
I've had a hard time finding good documentation on this, but it sounds like the default for the iPhone at this point is to convert HEIC files to jpeg if it looks like they are transferring to a location that may not be able to read them. I guess a website form falls into this category. It also appears that as part of this conversion some of the EXIF data disappears.
So, does anyone know a way to retain the EXIF data? My primary limitation here is that the upload needs to happen through the webapp and that multiple users will be using this. As a result, I can't simply have everyone change their iPhone settings to only shoot jpegs.
In case it matters, the webapp is running on node.js and expressjs.
Related
here is a question from a total beginner in mobile app development :)
I am building a React Native application for iOS platform first. I am stuck with decision on how to deliver icons to the application. Imagine:
I have a reference data set with eg travelling options (bike, motorbike, etc).
The actual set is much bigger though - I am expecting rather 100-200 items with one icon each for the UI.
These should be cached in the application.
Most of them wont change, new ones might come to the set periodically, but not even every week.
Now to the options I was thinking of:
Deliver a sqlite database with images as BLOB and update the database when new icons arrive
Deliver a sqlite database with image URLs for S3 bucket items and update the database when new icons arrive
Deliver the app with initial sqlite bundled with BLOB or URLs(?) and update over the air when new icons arrive
Do not use sqlite database at all and deliver all with REST API call on startup with image URLs. Load images when needed and cache them. Update database with new icon URLs when new icons arrive.
I think I tend to be using Option 4 because it seems least heavy on the client - he can always download the icon whenever he needs one. But it also has a latency because of downloading the icon for the first time from private s3 bucket.
However I am missing real-world experience in mobile apps and probably missing important details. Hoping for some insight from experts. Thanks for any pro and con you can deliver on this options!
You are right, no database needed at all.
So basically you have to load those icons only once and cache them inside the app. You can you something like react-native-fast-image or do caching by yourself.
If URL of icon was changed - the new image will be cached.
So on real-world apps, you usually have the image placeholders (example below) or loaders (more rare).
If you have multiple types of vehicle, you can create multiple placeholders and show them unless the original image is loading/not available.
Using react native firebase storage and firestore is a good option. The images can be loaded remotely and the caching is done automatically
I'm developing a chat app with Firebase. Am currently still in development phase.
Profile pictures of test users are uploaded to Firebase Storage, and are downloaded in the home screen (with all the pictures). I realized that with that I very quickly used up storage download requests (easily hit 3,000 requests in one night, and hit the free plan quota!).
What are some best practices I could use to minimize download requests? Just to be sure I'm doing it right - I'm sending a GET request to the Firebase Storage url directly: https://firebasestorage.googleapis.com/... to download the image. Is that the right way to do it?
Two suggestions that might help:
Cache your images! If you keep requesting the same images over and over again over the network, that's going to use up your quota pretty fast. Not to mention your user's battery and network traffic. After you retrieve an image from the network, save it locally, and then the next time you need an image, look for it locally before you make another network request. Or consider using a library like PINRemoteImage that does most of the work for you. (Both on the retrieving as well as the caching side)
Consider uploading smaller versions of your image if you think you might be using them often. If your chat app, for instance, saves profile pictures as 1024x768 images, but then spend most of its time showing them as 66x50 thumbnails, you're probably downloading a lot of data you don't need. Consider saving both the original image and a thumbnail, and then grabbing the larger one only if you need it.
Hope that helps...
I'm building a mobile app using Meteor. To allow for offline usage of the app, I want the app to be able to download a large-ish json file while online, then access the data in the json file, written to MongoDB, while offline.
This works fine. However, in the downloaded json file, there are plenty of references to online images that won't display in the app once the app is offline.
So, I want to be able to download (a selection of) the images referenced in the json file to the app, so that the app can access them even when offline.
(Downloading images could happen in the background for as long as a connection is available.)
There's an implementation of imgCache.js available on Atmosphere, which fails to initialize for me.
I suppose it's theoretically possible to individually load each image to a canvas, save the canvas content to MongoDB, then load the content when needed. Info on some of this is here. But, this feels rather convoluted and, if really feasible, I would expect someone to have done this before with success.
How can I do achieve caching of images for offline use in Meteor?
So, you've probably already read this article about application cache.
If the images are static, you can just include them in the manifest. Be sure you understand the manifest and cache expirations (see the article).
If the images are dynamic, you'll find some techniques to store images in local storage
If that's the case, this may be what you want.
I made a WebApp for an iPad which is supposed to run in an intranet. The app is basically a form, kind of an exam. Some questions has videos (videos are around 20MB size). I've defined my cache manifest as follow:
CACHE MANIFEST
CACHE:
/videos/preg1Calidad.m4v
/videos/preg2Calidad.m4v
The .manifest file content-type header is "text/cache-manifest". The thing is that, as this webapp is supposed to access some webservices to read/write data on a database located in a server connected to the intranet, I need the iPads to be connected to the network. When I add my app to the home screen and a question containing a video is prompted, I can see the video is being fetched from the network (I can see the loading animation next to the WiFi icon) istead of being accessed from the iPad itself.
I've deleted safari's data storage, cache, historial, deleted the app and added again, nothing seems to work. The content-type for the .m4v video I've setted it up to "video/mp4".
So, I've several questions:
How can I know for sure if the files on the .manifest are being cached?
I know some browsers apparently has a maximum size of storage for offline apps, never the less, looking into the apple documentation I haven't seen such a thing. Is there any limitation with iPads on file size? Maybe file types?
I don't know if I'm miss understanding the behavior of the webapp for offline access, the definition of the .manifest file, I've been thinking that it might only work when the device is actually offline (no network connection available, airplane mode maybe) but I thought that defining a file as "CACHE" would do the trick so this file wouldn't be accessed from the network. Shouldn't it behave like that?
I can not start developing this as native app at the moment since its kind in production. If anyone gets an idea on how to fix it quickly, would be great. I've been thinking on add the files to the internal database as base64 or in a javascript varial (as base64 also).
Thanks so much.
I have an application which downloads its product data(descipttions and images) from server and stores them localy to be available offline. For product images I'm using forge.file.cacheURL which works great but on my iPAD, this cache is being cleared during the day when I work with another apps. This causes my application to have only descipription texts available without images and user must connect to internet and synchronize again what is quite annoying. Is there a better way how to implement this scenario?
Have you tried to use the forge.prefs module for this purpose? It allows you so persistantly save key-value-pairs locally (much like HTML5 localstorage). Read more about the exact syntax in Trigger.io's official API documentation.
I'm not quite sure whether its possible to save images with this method, but you could easily transform your images into strings and vice-versa. Check out the second chapter of this post by Robert Nyman on how to save images in localStorage.