Taking the next step - Progressive Web Apps
It’s an exciting time to be working at CarsGuide. Not only do we have a brand new sleek office work area and kitchen, we also have an exciting new project to work on which gives us the rare opportunity to build something from the ground up with no legacy code and the choice of whatever technology we see fit to use.
It would be a huge missed opportunity not to at least consider and investigate the viability of building a Progressive Web App (PWA) at a time when the technology is becoming increasingly popular and gaining more support from the likes of Google, Apple and Microsoft.
What is a PWA?
A PWA is simply a number of features that you can add to any web page to enhance it to feel and look more like native mobile apps.
The main features of a PWA
- Fast: quick animations, scrolling, and navigation
- Integrated: Access to camera, bluetooth, location, orientation sensors
- Reliable: fast loading, offline and working with bad connection
- Engaging: home screen icon, no browser window, splash support, push-notifications
Some of the technology behind these features include;
- Web app manifest: provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.
- Application Shell (app shell): the minimal HTML, CSS, and JavaScript that is required to power the user interface of a progressive web app and is one of the components that ensures reliably good performance. Its first load should be extremely quick and immediately cached.
- Service worker: can cache the app shell and data for your app, so that it’s available even when the network isn’t.
- Client-side rendering (CSR): JavaScript running in the browser that produces HTML. The benefit is that you can update the screen instantly when the user clicks, rather than waiting a few hundred milliseconds at least while the server is contacted to ask what to display.
Why are we interested?
The main reason we are interested in using PWA technology is the improved user experience we can offer our customers making their time online with us more responsive and engaging.
Building a PWA would also mean there is no longer a need to build and maintain separate native apps for Android and iOS resulting in one codebase instead of three.
There is now better support for PWA with Android continuing to add new features and Apple along with Microsoft recently adding basic support.
I believe eventually all web applications will be PWAs because it significantly improves the user experience and it’s not difficult to implement once you’re familiar with the technology involved.
Support
Android has supported PWA for a while and is continuing to improve their offerings. PWAs are now well integrated into the Android OS, not only can you save a PWA to your home screen, but once you save it there it also appears in the app drawer and the settings menu, gets all the same notifications options that native apps currently have, and receives incoming intents from other apps.
Apple are lagging behind with it’s support of PWAs but with iOS 11.3, they have added support for a basic set of PWA technologies. With the Web Platform on iOS you can access such features as the camera, Geolocation, Sensors (Magnetometer, Accelerometer, Gyroscope), and Apple Pay. Unfortunately there is currently no support for Push Notifications, icon badge, Bluetooth, Beacons, battery information or Siri integration.
The most significant challenge to using PWA on iOS is that there will be no prompts or invitations from Safari (known as Web App Banners on Android). So the user has to go to your PWA URL somehow within Safari, press the Share icon and then “Add to Home Screen.” There will also be no indication that the website you are viewing is a PWA.
Hackathon
Recently CarsGuide hosted another hackathon, this time with a focus on PWAs. Four teams made up of people from all areas of the business competed to build a PWA that helped to solve an existing business problem.
The hackathon was a great success with all teams presenting some interesting ideas and producing some great examples of PWAs with working demos showing many of the basic PWA features on Android devices such as save to home screen and offline support.
There was also a few impressive examples of PWAs that made use of a device’s camera to capture data from a document which could then be used to fill an online form.
No team quite managed to successfully implement push notifications as part of their PWA but this was due to the short time period we had to work with rather than push notifications being particularly difficult to implement.
PWA tools
There are now a number of tools available that help make building a PWA a lot easier and faster than it would have been previously. Below are some of the tools we have used through our investigation and our recent hackathon.
- Chrome Developer tools: allows you to inspect, modify, and debug web app manifests, service workers, and service worker caches.
- Lighthouse: an automated tool that can audit for progressive web apps.
- PWA Builder: takes data from your site and uses that to generate cross-platform Progressive Web Apps.
- Workbox: a set of JavaScript Libraries for adding offline support to web apps.
- Nuxt PWA template: a PWA solution that can supercharge your current or next Nuxt project with zero-config.
Concerns
Our main concern with using PWA technology centre on the use of a Single Page App (SPA) and the possible negative effect this can have on SEO and Data Analytics. Although a website doesn’t need to be a SPA in order to be a PWA, we feel a SPA provides a more native app feel due to the lack of page refreshes and this is an important part of the experience we want to offer our website users.
SEO and Data Analytics are both very important to the business and so we can’t afford to choose a technology that can in any way harm our ability to optimise for search engines and discover, interpret and communicate data.
With our initial investigation many of our concerns have been allayed. We have used the Vue.js framework ‘Nuxt’ to build a SPA that also serves server-side rendered content when the site is accessed via a URL either by bots or a user first landing on the site. This should mean that Google can easily crawl the site content while users get an engaging fast experience as content is loaded asynchronously avoiding the need to reload the entire page as they navigate through the site.
We have also found that by using Nuxt to update the browser URL as users navigate through a SPA, its possible for Google Analytics to track a users navigation path through the app which is an important part of our data analytics strategy.
Next step
I’m excited about what is possible using PWA technology and eager to take this great opportunity to create something special that will be a step up in terms of user experience from anything we have produced previously. We still need to test out this technology in the real world to see exactly how it performs from an SEO and Data Analytics perspective, but so far our findings have been very encouraging and I’m gaining confidence in my belief that building a Single Page Progressive Web App is the right step for the business to take and now is the right time.
