WordPress is great as a user-friendly and simple platform. With easy-to-install applications and advanced content management tools, it’s no surprise that it houses 74 million websites – over 23% of all web pages.
A great addition to this free platform is Progressive Web Apps (PWA) which essentially projects the user interface of mobile applications onto web browsers. Think of it as having the look and feel of an app – but on your desktop computers instead.
How were PWAs created?
In the past, web apps have tried – and failed – to recreate the user experience of native applications. The load time on browsers was simply unable to parallel that of native apps due to the packaged resources and direct access to hardware that the latter had. Developments in processors and enhancements in coding languages (HTML5, CSS3) soon paved the way for a viable solution.
In 2015, Google introduced the concept of Progressive Web Apps which, in many ways, was considered an upgrade for existing web pages. In order to mimic the experience on native applications, however, PWAs were a concept packaged together with other important components such as service workers and web app manifests. These kegs are essential parts of the mechanics that support PWAs.
What are they exactly?
PWAs provide an app-like experience that is built onto your web page. Available on Chrome 40, Firefox 40 and Opera, PWAs use caching to adopt an offline-first approach. Using service workers, Cache API and a promises wrapper, you can cache static resources and compose your application shell to create a better experience for mobile users– this applies to JS, CSS and HTML files.
Understanding the Cache API is crucial to developing your PWA. In itself, it is a resource to store and retrieve network requests and responses. It thus acts as a master database that matches to service workers and allows you to load AMP content faster. This makes network connections optional while retaining the reliability and accessibility of your page.
Some items to take into consideration in early testing phases include verifying if the site is served over HTTPS, making sure the URLs load offline and testing the load speed on 3G connectivity. Google has developed an extension called “Lighthouse” which can help to generate a report to verify that these key characteristics are in place on your PWA.
What are the benefits of using PWAs over native apps?
We already know one of the key benefits of opting for PWAs is visibility – PWAs have better search engine optimisation and thus can be retrieved more easily by search engines. But what exactly are the strengths of PWAs over native apps.
Your keyword is controlled. Each page or screen on a PWA has a direct link and can thus be shared easily. This allows specific content on your site to be circulated by your users. In addition, since you can skip the app store middleman, rest assured that you can push updates more quickly and without guideline restrictions. With PWAs, you can now target emerging markets with slower internet connectivity, which gives you the power to diversify your marketing portfolio. Or at least have more control over it.
How do we use PWAs in WordPress?
WordPress capitalizes on this by having its own mobile pack plugin that is driven by dynamic serving – the ability of the server to detect the user’s browsing agent. The plugin is able to identify that the user is accessing the site via mobile, and subsequently load content from the API. As PWA features favour Single Page Applications built on Javascript, the WordPress PWA plugin is pretty straightforward – it consists of the theme, a Javascript file, and 2 CSS files.
In the PWA starter kit, you can also find documentation, guidelines and coding standards which you can always fall back on if you do get lost.
At Krome, we specialise in website design and development services. If you or your client are interested in creating a site, it’s time to tell us about your project or have a chat about what we can do. You can contact us here.