With pwa builder you can build your progressive web app with several languages
There are different procedures for creating multilingual apps. The selected app navigation determines how you should proceed when creating the app. The best use cases apply to the following navigations:
- Visual Navigation
- Navigation tab bar
- Navigation Tiles
- visual navigation
For multilingual pwas the visual navigation offers several options to realize this. First go to the edit section in pwa builder and choose Modules > +Insert module. For example, if you provide your app with a total of eight modules, these are displayed in two rows and four columns. You can assign your desired language to these modules. So that the app has another language, simply create the same app modules again and assign these modules the name of the second language. You can see that your app now has 16 modules and modules 1-8 on the first app page and modules 9-16 on the second app page.
To let users know on which app page which app language is noted, please proceed as follows:
First, edit the background image you want to appear in your pwa. To do this, you can enter the note for the two languages at the bottom. In this example, it’s DE| EN. Then load your image into the app and save it. You will now see a message on the wallpaper that your app is a multilingual app.
Note: Image editing programs are available online to edit the background image, which you can download and use free of charge.
The second option for visual navigation can be realized by using two or more submenu modules. To do this, you do not need to add the two languages to your background image. You can easily create your progressive web app and integrate the submenu modules into your app. Then assign the appropriate name for the language. This process is visualized in the following screenshot, which contains German and English modules:
- navigation tab bar
The navigation tab bar can also be used for multilingual pwas. Several submenu modules can also be integrated into the app and provided with the desired pwa languages. If you open one of the submenus, you will see the corresponding language.
- navigation tiles
First you create all modules that your progressive web app should contain. Then create one or more submenus. In these you integrate the corresponding number of your modules or app language. This example shows that the app is set in German. The lower two tiles are named Spanish and English. If you open these two tiles, the App modules will be displayed in the respective language.