The goal of this blog is to provide information and guidance for customers using web applications that are causing browser tab refreshing on iOS devices. This can be any web app, including ArcGIS configurable apps and builders, custom apps built with the ArcGIS Maps SDK for JavaScript, or any other memory or processing intensive app.
The foundational differences between mobile and desktop environments - especially in terms of hardware and memory management - are significant. A mapping app that runs flawlessly on a desktop may not perform well on a mobile device.
When it comes to building web mapping applications, developers often encounter unique obstacles when targeting Safari and all other browsers on iOS. iOS devices often have stricter memory and CPU usage limits compared to their Android counterparts, making web mapping applications more susceptible to browser tab refreshes. Adding to the challenge, iOS 18.4 has introduced a regression leaking image bitmaps that will accelerate the occurrence of browser tab refreshes in certain scenarios. In particular, maps that include a layer using image tiles (raster basemaps, tiled imagery layers) or full-screen images (map image layers) will see the issue more often. We have created a workaround for the iOS issue in the ArcGIS Maps SDK for JavaScript which will be included with version 4.34 and will drastically reduce the refreshing behavior..
This guide will explore these considerations, offer advice for better understanding issues you may be experiencing when running your app on a mobile device, and provide resources for tuning your app for performance.
Web mapping in iOS
While today’s web mapping technology provides rich, dynamic visualizations and interaction with anything from small to very large datasets, they are also inherently memory and processing intensive.
On iOS, memory constraints are more tightly managed by the system to prevent a single tab from affecting the entire device. These limits are process-based, meaning a webpage runs in a dedicated process with a memory ceiling. When a browser tab exceeds the set limit, the system will immediately free up memory by reloading the tab and effectively resetting your application to its default state.
Tuning your ArcGIS map and app for performance
When creating web apps, the goal is to create performant web applications, but this shouldn't come at the cost of other user needs. The key is to balance user expectations with the highest possible performance. The ArcGIS Maps SDK for JavaScript is already optimized for efficient data fetching and visualization, so you should test your application on different devices before beginning any manual optimization. To benefit from constant improvements in CPU and memory usage, always use the most current SDK release. If you still encounter performance issues, consider reducing the amount and complexity of data that your app must display. For example, you can reduce the number of layers in your map and use techniques like client-side aggregation (clustering or binning) to reduce the number of features the map needs to draw. There are several available resources that cover performance optimization techniques for maps and apps, such as:
General Best Practices
To ensure your web mapping app performs well on iOS, consider these recommendations:
- Reduce Memory Impact: The most common cause of crashes is excessive memory usage. To mitigate this, encourage users to close other tabs, close non-essential applications, and restart their device to reset the device’s memory state.
- Learn Mobile Debugging: Familiarize yourself with mobile debugging techniques. Apple's Web Inspector, available in Safari on macOS, can be used to debug a connected iOS device. This allows you to inspect the DOM, view network requests, and analyze CPU and memory usage. If you are having challenges with the Safari inspector crashing while connected to your mobile device, you can also do some level of debugging using the desktop Chrome DevTools on MacOS.
- Isolate Bugs: When troubleshooting, try to isolate the issue as much as possible. While it can be challenging with complex, custom applications, narrowing down the problem helps the development team and others assist more effectively.
- Check Device and OS Support: Always verify that the mobile device is still supported and is running the latest operating system. Older OS versions generally have lower memory limits and may not support the latest optimizations.
- Consider Native/Hybrid Apps: For some applications, a native or hybrid app, such as Capacitor.js, might be a better choice. This approach offers developers a more direct relationship with the operating system, including the ability to detect low memory or high CPU usage and react proactively within the app to prevent crashes. To build a native mapping app, you can use the ArcGIS Native Maps SDKs, and with SDKs like Flutter, creating native apps has never been easier.
- Debug with a Mobile-First Mindset: You can't treat mobile devices the same as laptops. Differences in hardware, operating systems, battery life, and network speeds mean that an app that runs well on desktop may not run well on mobile. Remember, you have very limited control over other apps running in the background, which can consume valuable CPU and memory resources and contribute to crashes.
- Understand Crash Categories: Crashes typically fall into three categories: bugs, memory usage, and CPU usage. While bugs can be in the application or API code, they can also be in the browser or the OS. It's crucial to remember that mobile devices have much more limited resources than laptops, making efficient use of memory and CPU paramount.
- Communicate Expectations: Help end users understand that mobile devices are not the same as laptops. Due to differences in hardware, operating systems, and network speeds, an app that runs well on a desktop may not perform the same on a phone.
Ultimately, understanding the unique constraints and behaviors of iOS is key to building a robust and performant mobile web mapping application.
