i just created an Ionic project and i added capacitor on it ( with a "npx cap init" ), i set up my service worker ( i just left the <--- ...... ---> in my index.html ). Then i run " ionic serve " from my laptop, and i tried to access it from my mobile phone ( so basically i did a personnal hotspot with my mobile internet, i mean my laptop and mobile phone have the same internet connection ), and it works.
I can access to my ionic app from my mobile whereas it is runt on my laptop, but now i'd like to add/download this app on my mobile phone and use it offline.
Do you know any way i can do that ?
Thanks a lot !
Capacitor works by serving your static assets (like javascript and HTML) from a self-hosted web server, whose behavior is dependent on your capacitor.config.json. This behaviour is most obvious if you look at the source code.
If you have server.url specified in capacitor.config.json, Capacitor's self-hosted server will act as a proxy for the server you point to.
If you do not have server.url specified, Capacitor's self-hosted web server will serve the files that were bundled with your native app.
Based on this, when you are creating the build for your phone, you will need to remove the server url property from your capacitor.config.json. You may also need to generate the capacitor.config.json on the fly in order to separate your development and production needs.
Note that the Ionic Framework and Capacitor have two completely different deployment paths; this answer assumes that you use Capacitor to create your builds.
Of course you can make an app and install it on your phone - that is basic purpose of Capacitor. Docs for android, docs for ios
Steps are similar to this (example for android):
Install Android Studio
At capacitor.config.json define techSupportEmail
npx cap add android
npm run build && npx cap copy android && npx cap open android
Enable developer mode on your phone
Plug your phone in
In Android Studio choose your device and hit "play" button
Related
I created a flutter web application,
and I finished building it with the command ..
flutter build web --release ,
and then transferred it to a local server ,
The site does not work unless it is connected to the Internet ,
I want the site to work without an internet connection ,
As I work in an organization and some users do not have internet permissions .
Please, I want a solution to this problem .
Thanks
The problem is, that flutter has some dependencies, that can not be resolved when you, as the client, are offline. Mostly consisting of canvaskit and certain google fonts.
There are multiple solutions for that. The easiest being to use the html web-renderer:
flutter build web --release --web-renderer html
this should work for most applications, however it has lower performance than canvaskit, especially with high widget density.
Therefore you can also use canvaskit locally as it is automatically built when you build your release. But you have to set it as base url, by adding the following lines in your index.html:
<script>
window.flutterConfiguration = {
canvasKitBaseUrl: "/canvaskit/"
};
</script>
This makes sure your flutter application uses the local source for canvaskit. However, another problem could be the usage of google fonts, e.g. Roboto, as those often need to be downloaded as well. But you can just add those to the pubspec.yaml explicitly to account for that, like explained here.
Some sources for more informations:
flutter web-renderers
The same issue but on github
Making Flutter offline capable
Download and set locally from asset policy for your web application
Add link to local Canvaskit as bellow :
flutter build web --web-renderer=canvaskit
--dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/
To make it work for a dev build, I incorporated Spanching's answer above in the following steps.
Run: flutter clean to clean up all build cache (this is important to have canvas kit re-downloaded in step 4 below).
Run: flutter pub get to download packages per pubspec.yaml
If you're using build runner: dart run build_runner build --delete-conflicting-outputs
At this stage you should have a clean /build folder (I also have an ios sub-folder as I'm also developing for iOS)
Run: flutter build web
At this stage you should have a clean /build/web added with a canvaskit folder underneath it. Full path: /build/web/canvaskit/
Then:
Open index.html under /web (note - do not open the one under /build/web)
Add the script mentioned in the answer above to the body of the html file. I just added it above the existing script that's already there.
Run your project in deubg mode (with Wifi turned off).
I have an ionic app build on my system.
For now, I have been testing my app using Ionic DevAPP (which can be found on the App Store and Google Play).
Prerequisite to run an app on my mobile device using Ionic DevApp is, My app needs to be up and running using the command:
ionic serve
This option looks great when doing development.
But now, I have my app build and I want to share it with the testing team and PO who is located on shore.
I want to know is there any way or free platform where the users can run an app on their mobile devices directly without starting a dev server.
NOTES:
I know about Ionic dashboard, but it is not free when comes to sharing builds.
I don't want to upload my app on Play Store or Google Play.
Any help is recommended as I am really looking for options to share my app.
I use Diawi To share both apk and ipa, bypassing play/app stores.
Is it possible (e.g. when developing) to send a pwa to the phone someway e..g. via usb cable without the network and serving it in https?
The use case is development, when maybe a wifi network is not available or unpractical to set up.
If your APP is fully PWA compliant, the app added to home will be an installed APK, which you can extract using file explorer(I used ES File explorer) and put it in other devices using USB connection and adb install myapp.apk for installation.
After you load the apk, it would anyways make calls to your web-server which I'm not sure how it make sense to achieve without network connection though. I couldn't think of any reason to develop a mobile application as PWA without network. You can even have a pass though internet(sharing your desktops internet via USB) by connecting via USB if wifi is not available. But developing PWA with absolute no network mode is not practical.
Update: While you can generate the APK and side load it via USB in the above mentioned way, transferring the cached assets(HTML/CSS/JS/images) might be tricky. You may have to wrap your app as a plain cordova application or Ionic kind of PWA app which uses Cordova to wrap and build with your assets. This way, your APK will be having everything it needs to run for calculator kind of use case.
On this website (https://ionicframework.com/docs/intro/deploying/) I read that I should give this command on the command prompt: ionic cordova run android --prod --release
I tried it but it only tried to start the app on an emulator (I have some problems with it, so it didn't actually start the emulator). Does this command also create a file I can put on my mobile and install the app? I don't want to put the app on Google play, just on my mobile.
I tried putting the android-debug.apk on my mobile and running it but my mobile couldn't install it (.../platforms/android/build/outputs/apk/android-debug.apk)
I'm not trying to test the app on my mobile, I'm trying to install it.
If you want to deploy the apk to your device
ionic cordova run android --device is indeed correct. (try adding --device)
You only need --prod --release when building for production (longer buildtime).
Before running (= building, installing and starting your app) check if your device has USB-debugging enabled. You can check if your device is connected by running adb devices. Since the run command includes building, yes run should create a apk for you.
As you said you also could install the apk manually. Here make sure to use the correct apk. android-debug.apk is the development build (no --release tag) and since your trying to run a production one (--release) you are looking for android-release.apk or android-release-unsigned.apk.
go to settings -> security in your phone then check Unknown sources (Allow installation of apps from sources other than the play store) and try to put the android-debug.apk again. this should work
i am building my first phonegap app and when i open the app i instantly redirecting (window.location) the user to my server where my web app is hosted. Is it possible to load the phonegap plugins from there? Because the "deviceready" event is not firing and i cannot call any plugin functions.
I can confirm that loading remotely does appear to allow access to native components (when scripts are properly loaded) and that cordova.jsdoes not appear to need to be loaded by the local index.html bootstrap.
Short answer: Yes
Some 'gotcha's'
You will have to supply correct cordova.js version for the platform browsing to your site.
you can look here for more info https://github.com/apache/cordova-js. This project hosts the core js elements, and builds the platform specific cordova.js lib
Any plugin api's your app wants to interact with must be pre-installed into the Native App
any plugin with native code will have to be added to the project and deployed to device bundled inside the app. There is no way to lazyload native code. The js portions of the plugin could be hosted on your server, however.
More information, some apps that do this
The PhoneGap Developer App uses a similar technique to what is describe above and what you want. The only difference is that it is meant as a dev tool, and the server is a local dev machine.
The Cordova App Harness also uses this technique of pre-bundling an app package with plugins, to be consumed by remotely hosted resources
You cannot, deviceready only functioning if the app run on mobile phone environment only. If web based or dekstop application, it won't trigger.
No , dont do that . loading remote website will not able to intract with your plugins . and the app will get rejected on istore too