Deployment Posts

How should your app be updated for Android 13 given the changes to permissions?

The Android 13 version was just released. Because your audience will progressively switch to this new version, you as an app developer must support newer versions. Yes, it takes longer to adjust to new versions than it does for IOS, but you still need to do it.

Changes with the new version come in 3 categories:

  1. New Features and APIs.The overview of the new functionality and APIs can be found here. These modifications consist of brand-new APIs and functionality that were not present in earlier iterations. The Per-app language choices are the new feature that I loved the most. Users can now choose a language other than the system language for an app thanks to this functionality.

  2. Behaviour changes in all apps. The details about those adjustments are available here. No matter if your app targets API level 33 or not, these changes apply to all apps. You must test your app on Android 13 and make the necessary adjustments to make it suitable.

  3. Behavior changes Apps targeting Android 13 or higher. These changes can be found here. Only apps that target API level 33 or higher are impacted by these changes. You must make the necessary adjustments in order to work with Android 13.

In Android 13, there are some changes that are worth checking which could affect your app. These are mostly changes in permission behaviors.

NEARBY_DEVICES Permission

Starting with Android 13, you will need to use NEARBY_DEVICES permission for some Wi-Fi-related use cases. Previously, ACCESS_FINE_LOCATION permission was used.

New Permissions for Media

Three new permission is introduced with Android 13: READ_MEDIA_IMAGES, READ_MEDIA_IMAGES, READ_MEDIA_VIDEO, and READ_MEDIA_AUDIO.Use one of these new permissions if you were reading files using READ_EXTERNAL_STORAGE. All is well if an Android 13 user has already granted this permission. If not, the request for READ_EXTERNAL_STORAGE permission will be disregarded. This indicates that for this section, your app needs to be modified.

In our program, we used READ_EXTERNAL_STORAGE to select images. For picture selection, we had to support READ_MEDIA_IMAGES. I'll now describe how you can accomplish this.

Firstly, you need to update compile and target api level to 33. Now you could access the new APIs :)

compile: 33,
target : 33

Secondly, you need to put READ_MEDIA_IMAGES permission to AndroidManifest file.

Lastly, you need to programatically ask for READ_EXTERNAL_STORAGE permission for API level lower than 33 and ask for READ_MEDIA_IMAGES permission for API level equal or higher than 33.


private val readImagePermission = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) Manifest.permission.READ_MEDIA_IMAGES else Manifest.permission.READ_EXTERNAL_STORAGE
if(ContextCompat.checkSelfPermission(this, readImagePermission) == PackageManager.PERMISSION_GRANTED){
    //permission granted
} else {
    //permission not granted
}

Thats it, now your app is supporting this new permission! Hope this tutorial helped you in migrating to the new permissions. Please provide a clap if you liked this post.

April 25, 20233 minutesVivek BeladiyaVivek Beladiya
Fix 404 while reloading Gatsby Website for dynamic client-only route

Last week, we run into a problem for one of the large Gatsby + ReactJS + Laravel projects in hosting which is hosted with Apache Webserver on Amazon AWS EC2. The problem we were facing was, for some reason, when we reload the Gatsby website, it was giving a 404 error page.

If you open a home page and then a normal visit then the website will fully function, but if you reload the page then it gives an error. And we found it happens when we are using Dynamic routing of React Route in Gatsby as per show in Gatsby documentation here.

Also, what we found, if we test the website build with gatsby serve then it works fine. But while using Apache, it behaves differently and we found that this problem has been faced by lots of people over the internet.

So what we came up with is, we used gatsby serve with an apache proxy. Here is how we did it,

Step 1 - Setup Project

As a first step, clone the project on the server and run a command, gatsby build to create a gatsby build.

Step 2 - Setup PM2 for Gatsby Serve

The next step that we need to do is run gatsby serve. But as you know, we can not run this command directly via console, because as you exit from the console, the command will be terminated.

So we will be using pm2 package, a NodeJS utility that is used to run nodejs apps.

For that, we will need to install pm2 globally. Run the following command to install it,

npm install pm2 -g

You can find other installation ways here if you need.

Once the installation has been done, let's run the gatsby serve command via pm2. For that run the following command from the gatsby project folder,

pm2 start gatsby --name my-web-app -- serve

where my-web-app you can replace with the name of your app.

Once, it's running, try to test it, if it's working correctly by opening the URL http://your-ip-address:9000/. Make sure, port 9000 is opened on your server for traffic.

Step 3 - Configure Apache

Once, gatsby serve is working and tested. The next step is to configure apache to proxy all port 80 traffic to port 9000.

For that, edit your apache conf file (or virtual host conf file), and add the following lines (or configure it to something like the following),

<VirtualHost *:80>
        ServerName my-web-app.infyom.com

        ServerAdmin webmaster@infyom.com

        ProxyRequests On
        ProxyPass / http://localhost:9000/
        ProxyPassReverse / http://localhost:9000/

        ErrorLog ${APACHE_LOG_DIR}/my-web-app.infyom.com.error.log
        CustomLog ${APACHE_LOG_DIR}/my-web-app.log combined

        ......
        # any other options below as per your need
        ......
</VirtualHost>

The next step you need to do is restart your apache server by,

sudo service apache2 restart

And then you can just open the URL https://my-web-app.infyom.com and it should work fine.

Bonus

New Deployment

Whenever you deploy a new code, you again need to run gatsby build and then pm2 restart my-web-app. Then only it will take new changes.

Troubleshooting

Sometimes, we found that we need to restart apache as well after the new deployment. so if you run into any trouble, then make sure to restart apache as well and it should solve the problem.

I hope it may help you to resolve your 404 problem.

July 16, 20213 minutesMitul GolakiyaMitul Golakiya