irceline / aq-mobile-be

App for consulting air quality data in Belgium using the ionic framework for Android and iOS
Apache License 2.0
7 stars 8 forks source link

Maps loading slowly after a while - solved by clear data in app settings #289

Open ffierens opened 3 years ago

ffierens commented 3 years ago

when choosing the "View in detail" page, maps are loading almost instantly. But this is slowing down. After a few data updates the next 24h, loading takes 30s or even more. A "clear data" in the system app settings solves the issue, but the user has to reconfigure his location after every clear data. App version 1.8.0, android 11, Samsung Galaxy A50

image image

SpeckiJ commented 1 year ago

Because clearing the Application cache solves this issue I suspect this is caused by a cache slowing down, probably caused by overfilling as it only happens after many map tiles were loaded.

To improve performance and reduce network bandwidth all map tiles are cached locally inside a PouchDB.

The cache is configured here: https://github.com/irceline/aq-mobile-be/blob/b982a2d3281d428152787f60ff1e507c03ffa3e9/src/app/v2/components/map-component/custom-canvas-src.js#L29

There are two routines that interact with the cache and delete data from it:

On Startup the cache is downsized if it is too big: https://github.com/irceline/aq-mobile-be/blob/b982a2d3281d428152787f60ff1e507c03ffa3e9/src/app/v2/components/map-component/custom-canvas-src.js#L77

When new forecasts are available old forecasts are discarded: https://github.com/irceline/aq-mobile-be/blob/1b5f11ecb6e613f3de1fbb852799d82da3b23c8e/src/app/v2/services/pouch-db-initializer/pouch-db-initializer.service.ts#L35

Maybe those are not aggressive enough and the cache performance degrades way before those routines trigger?

I would probably start by debugging the cache misses and hits and see if one can see some sort of slowdown once the cache gets full (or on some other condition). This should be easily doable by adding some logging output in the lookup: https://github.com/irceline/aq-mobile-be/blob/1b5f11ecb6e613f3de1fbb852799d82da3b23c8e/src/app/v2/components/map-component/custom-canvas-src.js#L449