Adding value through PWA features - Web App creation
Native or Web?
When approaching new projects, one of our first questions tends to be “native or web?”. However, with mobile-first, responsive approaches being the norm, this is more a question of technical stack than it is of design. The lines between web and app development have been steadily blurring over the last 12 months. Our choice generally boils down to whether we work with React or React Native.
React Native is fantastic —it streamlines mobile app development and allows us to work with a familiar language whilst allowing us to support 95% of the same functionality as mobile apps coded in Swift or Java. We can share plugins, libraries and design patterns with its older sibling. The most striking difference is how we deploy the final product (and how long we wait. App store approval can take a while…).
The only real concern of this approach is that our attention ends up divided. Native or web?
Why not both?
Nearly everything we build lives online in some way. More and more, we’re developing applications on decoupled and distributed backend services, allowing us to adopt a plug-and-play approach to client integrations - a mobile app here, a web dashboard there, a chatbot elsewhere. As our development tools and delivery methods become more malleable, we need to offer that same flexibility to our clients.
Projects like Interval Films’ Timelapse Platform can really benefit from the fully integrated look and feel that you typically only get from native apps. Primarily it’s about screen real-estate. We wanted the viewer UI to take up as much of the screen as it could. Having the address bar and browser controls top and bottom on a mobile or tablet device really hinders this. At the same time, we knew that we absolutely couldn’t do away with the web app. All of the admin functionality and high-res images work best on a big screen. In this case, web beat native.
It doesn’t end there, though. Our React app boilerplate is based on the latest version of create-react-app, a handy tool for quickly scaffolding projects with all of the essentials. That includes support for PWAs — Progressive Web Apps.
PWhat?
Progressive Web Apps combine the best of native and web technologies through a set of practices to ensure the best possible experience on any platform. Service Workers allow access to Cache and Push APIs that take content from the web and allow it to be installed to a device as an app on the home screen. Doing so hides the browser frame, adds a startup splash screen and even changes the colour of the header bar to match, just like a native app.
PWAs can also provide a significant improvement in the speed of an app, especially on mobile when good signal can’t be guaranteed. By caching the vital guts of the app, startup is much faster with no need to load in again after the first time. Content can even be cached for offline viewing with a little additional effort. The most basic optimisations take just a few extra lines of configuration with little to no impact on the rest of the code.
A progressive future
Moving forward, we’re looking to consider at least the basic PWA features in more of our React web apps. The technology is relatively new and support is still growing, but it is gaining popularity. More and more APIs are becoming available to grant access deeper into devices (to provide camera and microphone support, for example) and it’s becoming harder to tell a PWA apart from a true native app.
For our clients, this is an incredibly attractive future — your web app serves double duty as your mobile app with little to no extra effort. That last point is the true attraction here. Ensuring an app works well as a PWA isn’t just about good mobile experience. It means that everything will be as fast and efficient as it can be across all devices, desktop very much included. The enhanced mobile look and feel is just the icing on the cake!
If you'd like to learn more about how Gravitywell can assist with your app or software project, don't hesitate to get in touch.
