search

IDEMSInternational / open-app-builder

PLH App Frontend
GNU General Public License v3.0
6 stars 25 forks source link

Fix/web browser startup #2128

Closed chrismclarke closed 11 months ago

chrismclarke commented 11 months ago

PR Checklist

Description

Running web apps from android mobile fail as an error is thrown from the local notifications service which blocks app initialisation. This is due to a lack of support for the capacitor notifications api within android web (https://github.com/ionic-team/capacitor/issues/3472)

This PR provides a small fix by using a try-catch statement to avoid throwing the error (failing silently, like in cases where notifications are disabled by the user)

Review Notes

Can try the preview link from a mobile browser and make sure the app loads as expected.

I've additionally added a new serve configuration so that the local live-reload app can be run on any device on the same wifi network via yarn ng serve --configuration=external. If serving like this then any device on local network should be able to connect to the app by typing in the local ip of the machine serving (on windows get via ipconfig command, various other methods exist on linux/mac - should be something like 192.168.x.x.

I've also added some extra instructions within the capacitor.config.ts file for how to do a similar process but instead of live-reload from web app use live-reload on native app (e.g. parenting app running in an emulator). This is similar to above, with an additional step of defining the ip in the config file and syncing to the native build.

Feel free to document either of these methods in the app docs if you think useful to have (info likely also in capacitor docs)

Git Issues

Closes #2126

Screenshots/Videos

If useful, provide screenshot or capture to highlight main changes

github-actions[bot] commented 11 months ago

Visit the preview URL for this PR (updated for commit b089cdf):

https://idems-debug--pr2128-fix-web-browser-star-7tcwvezr.web.app

(expires Sat, 18 Nov 2023 05:39:51 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: f2bfd21fc73bf25db0e74968614b72bee30e3476

chrismclarke commented 11 months ago

That's great, I can confirm that when running the PR web preview on my phone, I do not experience the long load time issue.

In the case of live-reloading on a native app, I've been using the following command to launch an emulator instance running a live-reloading build: ionic cap run android -l --external, taken from these docs. It has the advantage of not needing to launch Android Studio (I think the emulator options are those that have already been configured using Android Studio). Does the new yarn ng serve --configuration=external have advantages over this method do you think?

Looking at the docs the external flag basically does the same job of setting the bind address, but would cover cases where external bind is not 0.0.0.0 (think maybe running inside a container environment or some specific os's?) https://github.com/ionic-team/ionic-cli/blob/develop/packages/%40ionic/cli/src/lib/serve.ts#L40 https://github.com/ionic-team/ionic-cli/blob/develop/packages/%40ionic/utils-network/src/index.ts#L30

So I think the cli method should probably be preferable (only downside I can think of is if we want to use in an environment where we are using capacitor but not ionic, which is the case for the picsa app I adapted the code from)

Assuming it can also be used to access web version in same way by specifying local ip. When documenting we should test this and can probably remove the angular.json and capacitor.config.ts code changes from this pr in favour of the ionic cli methods.