At WPMobilePack.com, we have been building Progressive Web Apps (previously called Mobile Web Apps) before they were standardized by Google. It’s not an easy road, especially when working with a Content Management System that: 1) was not created for handling these types of applications and 2) is used by 30% of the entire web, spanning incredibly diverse websites from all categories: bloggers, e-commerce, restaurants, hotels, brochure websites and many more.
Progressive Web Apps (PWAs) most certainly scratch some itches and bring a lot of benefits, if they are developed and deployed in an effective manner. A lot of businesses have shied away from investing in native mobile applications because they are expensive, take a long time to develop and are a pain to distribute. PWAs offer us a similar user experience, without the hassle of going through App Stores.
This article is about why and how we developed a series of Progressive Web Apps that can be used on top of WordPress.
What Exactly Are Progressive Web Apps?
Google has defined Progressive Web Apps as “A new way to deliver amazing user experiences on the web” and has thoroughly documented them. We like to call them “apps that work within the browser“.
According to the standard, PWA should be reliable, fast and engaging. In other words, they should provide a full “app-like” user experience without the hassle of installing them. A desktop web application can also have progressive features, but the PWA checklist is geared towards mobile and includes items such as “Add to Home Screen” and offline mode.
Don’t be scared by the lengthy documentation. PWA has a series of baseline characteristics that should be followed closely to achieve “progressiveness”, but does not impose that all of these should be developed at the same time, nor does it say how they should be developed.
To become progressive, an app has to:
- Be secure (HTTPS)
- Be responsive on tablets & mobile devices
- Use “Add to Home Screen” prompts
- Load fast
- Be cross-browser (Chrome, Edge, Firefox and Safari)
- The start URL (at least) should load while offline
- Use a separate URL for each page
Compared to mobile friendly or responsive websites, a Progressive Web App brings a series of advantages, such as:
- UI/UX that mimics native apps
- Increased engagement (sometimes 4X visits and time spent on sites)
- Ability to use push notifications
- Working reliably (less data, page loads due to caching and offline mode)
- Increased conversions
How Can We Check If an App Is Progressive?
Google has also developed a Chrome extension called “Lighthouse”, that enables us to check if a particular website is progressive. It’s pretty obvious that “progressiveness” is a score, not a yes or no.
In a similar manner to Google’s Page Speed Insights, Lighthouse generates a report with the main characteristics. It is telling us what exactly what we need to modify in order for the app to become progressive.
Why Use Progressive Web Apps Now?
Even if the REST API’s reputation has greatly suffered after the discovery of a severe vulnerability, there is no going back. The previous WordPress APIs (like XMLRPC) are a bad joke that have been affected by vulnerabilities of their own, so the REST API is here to stay.
The “appification of the web” movement is supported by Google, not only by its PWA standard but by other means as well. Google is already pushing the Android Instant Apps project, that will allow us to preview an application without installing it. The technology behind Android Instant Apps is not the same, but it is obvious that the lines between “native” and “web” apps are fading.
To complete the circle, Google is also preparing to launch .app domains, after purchasing the Top Level Domain rights for a record sum of $25 million in 2015.
Why Do We Call Them “Apps” Instead of “Websites”?
RWD uses server-side rendering, meaning that PHP is responsible for generating the HTML code of the page. JS apps use client-side rendering. The JS code is communicating with the server and rendering the HTML code, which can create a smooth user experience because the content loading is done “behind the scenes”.
Since the server is not needed for generating HTML code, we can cache a JS app together with its content, thus producing faster apps that can work offline.
How We Use PWAs in WP Mobile Pack – Responsive vs. Adaptive
We’ve talked about PWA features, so we should clarify what is the technology that allows us to use a PWA together with WordPress.
You’re probably familiar with the way responsive themes work. They have a series of .php files that are responsible for displaying the content and also adding the necessary resources (like the stylesheet) in the HTML page. Responsive themes load the same resources for desktop and mobile users, so they are device agnostic.
If we want to load different files for desktop and mobile users, the server needs to detect the device by using the browser’s user agent. This technique is called adaptive or dynamic serving. Although it’s much less common compared to RWD, it is one of the mobile SEO strategies recognized by Google.
How We Build Progressive Web App Themes
After several apps built, we have developed our own starter kit with AngularJS and Ionic 1, which allows us to build new app themes quickly and efficiently. This starter kit includes:
- Documentation on how to set up the working environment
- Guidelines for the files & folders structure
- Guidelines for structuring the stylesheet
- Several modules that are common for all apps, for example communicating with the API, translating texts from the app, etc.
- Build tasks
- Coding standards
- Unit and end-to-end tests
Our roadmap includes developing new app extensions such as offline mode, push notifications and a new starter kit for building React applications.
In a web dominated by Responsive Web Design – 70% of mobile friendly websites are responsive (as we wrote in a study featured on SmashingMagazine.com) – we are often asked why we believe PWAs are necessary. After all, they are more difficult to develop. Also, the concept behind responsive – using a fluid and flexible design that is device agnostic – is particularly attractive because we have to maintain a single code base.
We see PWAs as being used first where conversions and engagement matter most – like in the publishing and e-commerce industries. If you’re a WordPress developer and want to offer your customers an app solution, you’re more than welcome to start with the free OBLIQ app theme, customize it to fit your needs and let us know about it – we’d be more than happy to include some of your contributions into the main repository for other developers in the community to use.