How to handle live updates to your mobile app using capacitor? - javascript

I have a react-js app and I use capacitor to leverage with native mobile API's (eg: BLE). My objective is to live update the app upon a minor change (eg: adding a new label) without going through the whole appstore submission process. I know Ionic has AppFlow that could work well with Capacitor, but it is way too expensive for me. Thus, I saw some are suggesting writing a script that pulls in the JS perfectly from somewhere like the S3 bucket, and when you build the app you build in all of the native code and replace the HTML scripts with one that comes from a remote source (But I have no idea how to do it)
Is this how most people handle live-updating webview apps or is there a better way ?
If so what are the steps to achieve this objective using scripts and so on (with code examples)?

Hey I'm the Maker of Capacitor-updater, the only alternative to ionic AppFlow.
The updater allows you to manage update by yourself, store your zip update where you want and use the download method.
How to start
npm install #capgo/capacitor-updater
npx cap sync
Then in your main JS, this is required to let the updater know the update is valid
import { CapacitorUpdater } from '#capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()
And lately after checking yourself the current version need update:
const version = await CapacitorUpdater.download({
url: 'https://github.com/Cap-go/demo-app/releases/download/0.0.4/dist.zip',
})
await CapacitorUpdater.set(version); // sets the new version, and reloads the app
After many request of people didn't want to do that themselves, I started Capgo a business to manage all the update process for you.
All is open source and can be replicate on your own as well.
Doing things for Capacitor is now my main activity, I produce open-source plugin as my main channel of Marketing, I'm solo founder and bootstrapped.
Hope my tool will help you !

You need a subscription to Ionic's AppFlow, as of yet ionic is the only company that offers live updates.

Related

How to add native code to React Native (Expo)

I want to bring my expo app to the foreground from a background running task, the only third-party package I found on the internet that can do this is react-native-invoke-app but it does not work with expo managed apps.
There are three ways I think I can do this but I do not know how to implement any of them:
How can I make this package compatible with expo by utilizing expo config plugin?
How can I copy their native java code that involves bringing the app to the foreground into my expo app? and perhaps build a custom dev clients
Is there any other method that I can use to bring an expo app to the foreground from a background running task? please see my other question on this matter
I will appreciate any form of assistance
What's your use-case? A bit part of the answer depends on what you're trying to do.
It looks like the react-native-invoke-app package works through push notifications, so I would try making use of push notifications. For example, you could schedule repeating notifications with this package: https://github.com/expo/expo/tree/main/packages/expo-notifications
Or set up Firebase to send the push notifications based on some server logic, cloud functions, or API requests (which you could trigger with react-native-background-fetch).
You could also make use of a deep link, but it depends on your use case.
As far as I know, there's no way to force an app into the foreground without a push notification or a deep link.

Best practice: Typescript: Let a customer extend an application with custom code

we have an angular 9 based application framework, which gives a customer the possibility to configurate an application with fields and layouts. This works pretty nice.
But now we get to the point, where a customer wants to implement special features, like "He enters a value into a textfield and a request to a 3rd party software should be fired to load new data and autofill other values".
We could implement every possible interaction or allow to create custom snippets in javascript.
But in the past i have had a lot of bad experience with these base javascript snippets because they didn't have the needed standard functionality like typescript provides me.
1) Is there a way how a user can create custom code during runtime with typescript rather than plane javascript?
Yes i know typecript needs to be compiled before running, but I ask because I want to know if there is another way?
2) Alternative question:
Can a user develop an angular application and add it as plugin during runtime? Something like an extension or a custom functionality which will be added to the portal for the customer which is not part of the base framework?
Thanks for your help.
I don't know if I understand your question well but from my point of view the only way that an other user want to interact with the main Angular project is that he create a library by using the command ng generate library my-lib. (https://angular.io/guide/creating-libraries)
From there he can create a new module and then someone else import this new lib into the main project and that's it.
The new lib can be maintained by the "customer" and he can release new version of it if the lib is hosted in npm repository and from the main application just need to npm i customer-lib#latest
Did I answerd to your question ?
The thing is we have a hosted cloud application, where we have a standard implementation which is already compiled and deployed in a docker container.
Now a customer should have the possibility to extend the functionality by adding scripts and modules. Like it is common for example in wordpress. Where you have a standard implementation and if you want another wysiwyg Editor you install a plugin.
I know the only way of injecting code is via javascript but I just wanted to ask if there is another solution for this which will not lead to redploy the whole application.

React native android deploy files to server

I am new to React Native I want to know how is it possible to deploy react native part or code like javascript files and assets on server and then use it.
Currently it is showing as localhost
Please let me know how to deploy it on server also is it possible or not.
Do I need to update app on play store every time when I change something in react part of my code?
what exactly code push does and is there any way by which I can load my react native bundle from server and update app dynamically
React-native compiles down to the two native languages.
Effectively you have 2 applications, non of them web.
You could have an image assets remote on a server and use the URL in the react-native code combined with a cache (so you don't have to download the asset every time).
Considering JavaScript files, I would say no. Unless you create an server and request the functionality by API calls.
And no, you don't have to interact with the play store every time, but usually you do :)
I think you need to understand how React Native works in order to understand.
What RN actually does is to expose native API to your Javascript code base. Basically a RN App is composed by 2 things:
As you can immagine the Native part is everything that is written in Swift/ Objective-C/ Java and that is the part you can not update without going through the App stores.
Now the interesting thing is the JS part, remember we said that basically you are consuming native API with JS. If you notice when you run react-native run-ios or react-native run-android a server is instanced which serves a bundle to your emulator / physical device.
Now if you think about it basically when you open the App the bundle is downloaded an then run. When you update your codebase while the app is running on the emulator the servers sends a signal trough the socket to notify the client that an update is available. At that point the client downloads the bundle and the app is reloaded.
Now to answer your question, yes you can serve the JS Bundle on your server and make the app check when is loaded or resumed if a new version of the JS Bundle is available, if so to download it (OTA update). As you can understand only the Javascript part can be update in this way and not the native part as well.
Then again, there are a few services that already do this like codepush by MS.
You can use the code-push cli or appcenter cli to publish your Javascript code to the cloud servers (hosted by Microsoft), and use react-native-code-push to retrieve the updates in your RN app.
Alternatively, you can use Expo which comes with its own over-the-air (OTA) update functionalities.
Both of the above services manage their servers internally for you and do not allow you to host the JS bundle on your own server (though there's a feature request for it).
Note that only changes to the Javascript codebase can be delivered OTA. Any updates to native code (eg. Swift/Java) must still be delivered through App Store/Google Play.

KISSmetrics - React Native iOS

I am using React native to create an iOS app; So my code is in javascript and some objective-c.
Now i wan't to implement KISSmetrics in my project, i have done the proper setup based on kissmetrics documentation, but when it comes to create events and user identifications etc… i have to use data from my javascript code.
Does anyone knows how to do that? for example:
the objective-c code to identify the user is this: [[KISSmetricsAPI sharedAPI] identify:#"name#email.com"]; but how can i get the code that gets the identity of the user and replace the name#email.com from my javascript code?
I would look here to find out how to build a native module bridge. The way it works is that you create an iOS native module with methods that you can actually call from JavaScript by which you can send your data from JS to Obj-C.
Here's an example project that does this:
https://github.com/idehub/react-native-google-analytics-bridge
You don't need to turn it into a full-fledged NPM library, you can just simply create the necessary native files and JS files on the fly in your project.
Also, if you don't know already, remember to rebuild the iOS project (hit the Play button) to see your changes because the native side doesn't have Live Reloading.

Deploying AngularJS / Javascript applications

We use grunt build to build an angularJS application.
After the built application is published on the live server, how to let users know that there is a new version of the JS application available? Because their browser will still have the previous combined javascript file.
Also the backend, which is PHP (Symfony2) might change, so if user doesn't refresh the page, some API calls might not work. Keep in mind that the backend changes will be very rare. Versioning the API as v1, v2... might be a small solution, but in the long run everyone would end up using the newest API, so keeping the old versions is not required for longer period of time.
I was thinking to make use of Angular's $interval service and make a checker every minute to a simple web service, which would return the version number of the new application. If version is newer, angular should display a message and let user know to refresh the page or force refresh it. Is that a good solution?
Just try to add a unique version_id to the file itself using grunt.
src="name_of_your_file.js?v=INCREASING_VERSION_NUMBER"
e.g
src="name_of_your_file.js?v=2

Categories