PWA: The Breakdown on Progressive Web Applications

PWA (Progressive Website Applications), websites that allow for the installation of technologies such as service workers for offline storage.

What exactly is a PWA?

PWA (Progressive Website Applications) are websites that allow for the installation of technologies such as service workers for offline storage; this offline storage enables replication of native mobile applications on mobile operating systems with support for functionality on a website when no internet connection is available.

Often when a product such as a website is conceptualised, it is assumed that not only will the website exist as a website that is accessible from both desktop and mobile, but it would also develop into a mobile application, available on the app stores.

PWA aim to remove the divide between mobile application and websites. A PWA acts as a mobile application as well as a responsive website that users are familiar with using. PWA websites are not an abstraction from concepts previously learnt, such as RWD (Responsive Website Design); they are instead a powerful addition to excel both existing and new products with impressive case studies proving the benefits.

PWAs often provide a ‘shell’ like state which acts as a site wrapper and when available will load the latest data to populate the app, failure to attain a connection via the internet, it will use cached data.

PWA (Progressive Website Applications) is one of the newest concepts to hit the website development industry and shake the mobile application market in its entirety.

To push the conceptual idea of PWA to its full potential and investigate the strengths and weaknesses of the modern approach to website development, we have designed and developed our own product to explore the capabilities and benefits of implementing PWA technologies.

To read more on the case study head over to our page on Expelled Skateboarding.

PWA Browser Support

Once upon a time, PWA (Progressive Web Applications) was only supported on Android devices. This was a large hindrance to developers, as a large majority of the worlds demographic use iOS devices.

As of writing this, the latest version of iOS, iOS 11.3 now has support for service workers and progressive web application methods. This update in support will increase the scope of users that are able to take advantage of progressive website application technologies (service worker, manifest files, etc.). The update had been anticipated for months and will now allow the key demographic of users to have support for Expelled’s technologies.

In April of 2018, the first PWA support for windows machines was released to the Windows Store, increasing the range of devices which those developing PWA’s consider applicable. Not only are developers creating for the world wide web (accessible by the majority of devices with network access), mobile phones system but also desktop operating systems.

Google's Case Studies

MakeMyTrip.com

Google has several case studies available that display the benefits of implementing progressive web application technologies to existing products. One of the most notable being the MakeMyTrip.com case study.

The statistics found in the case study, post-implementation of the PWA technologies are as follows –

3X improvement in conversion rate
38% improvement in page load times
160% increase in shopper sessions
30% more last-minute shoppers
24% more cities with a user footprint on their new PWA
20% decrease in bounce rate
The first-time shopper 3X more likely to convert than App

George.com (February 2018)

George.com PWA - Page fully rendered after page transition

"The George.com team recognized that to meet this challenge the business had to enhance the mobile experience by building a Progressive Web App. Working with Isobar UK to assess the end to end customer journey, the team adopted a scrum driven, agile approach to the workstream. By incrementally deploying the PWA, the Asda George team were able to realize the benefits immediately."

With a 31 percent increase in mobile conversion, it is evident that PWA not only benefits users but also businesses and achieving targets. The statistics found in the case study, post-implementation of the PWA technologies are as follows –

3.8x - Faster average page load time
2x - Lower bounce rate
31% - Increase in Conversion Rate
20% - More page views per visit
28% - Longer average time on site for visits from Home screen

How do I get started with PWA?

Instead of discussing a hypothetical case study, we thought it best to speak from our own experience implementing a PWA. The Expelled Skateboarding website is our first attempt at creating a PWA, we've learnt the ins and outs that come with building a progressive web app.

Before we begin, lets first define what needs to be complete for a successful PWA.

Google’s Lighthouse auditing tool for website performance outlines a set criteria websites have to meet in order to achieve a high grade in their PWA audit review. Websites audited need to include the following -

Registers a service worker
Responds with a 200 when offline
Contains some content when JavaScript is not available
Uses httpsS
Redirects https traffic to httpsS
The user can be prompted to install the web app
Configured for a custom splash screen
Address bar matches brand colours
Has a <meta name=”viewport”> tag with width or initial-scale
Content is sized correctly for the viewport
Web Application on Android Homescreen

Registers a service worker

Based heavily on the script template provided by Jeremy Keith in his blog post titled ‘Minimum Viable Service Worker’, a service worker has been created and registered to the site.

Service workers act as a cache for the storage of web files in the browser, preventing the need for files to be downloaded multiple times on a site. Service workers are enabled through the use of Javascript and will cache files in the directories specified.

As service workers are expected to be at the root directory of the site it is scoping; a symbolic link has been registered on the Expelled Skateboarding website server, where the service worker is stored in the WordPress theme directory and linked to the root directory.

Google Chrome console.log showing the installation of service worker

const cacheName = 'files';

addEventListener('fetch', fetchEvent => {
    const request = fetchEvent.request;

    if (fetchEvent.request.url.includes('expelled_theme')) {
        if (request.method !== 'GET') {
            return;
        }
        fetchEvent.respondWith(async function () {
            const responseFromFetch = fetch(request);
            fetchEvent.waitUntil(async function () {
                const responseCopy = (await responseFromFetch).clone();
                const myCache = await caches.open(cacheName);
                await myCache.put(request, responseCopy);
            }());
            if (request.headers.get('Accept').includes('text/html')) {
                try {
                    return await responseFromFetch;
                } catch (error) {
                    return caches.match(request);
                }
            } else {
                const responseFromCache = await caches.match(request);
                return responseFromCache || responseFromFetch;
            }
        }());
    }
});

The service worker for the site uses a title or cache name variable used to label the cached files in the browser, for this service worker the title ‘files’ has been used. An event listener for the fetch event is created, this event when triggered will create a constant value based on the fetchEvent and request property related.

Before triggering the code that triggers the checking of files vs. cache, the request property is compared to verify that ‘expelled_theme’ is in the request value, this is so that only files in the theme directory are cached by the service worker.

The caching function itself looks to fetch HTML files from the network and store them into the cache once accessed if the network is unavailable it will look locally in the cache for the HTML files instead. This keeps content up-to-date if stored as an HTML file as it the site looks for new content first, then old content as a fallback.

For files that are not HTML, the site will look for a cache version so as to minimize requests for static content (CSS & JS), after the file is served to the user the service worker will verify that the files in the cache are the latest and if not the latest, the service worker will download the latest version of the files.

If no files are found in the cache, the script will load from the server when a connection is available.

Responds with a 200 when offline

The PWA audits carried out in Google Chromes Lighthouse indicates that the site responds with a 200 https code. Testing shows that the site responds with an offline label and checkbox in the URL bar when accessing the site offline.

Contains some content when JavaScript is not available

When JavaScript is disabled in-browser, the following requests are made and complete when accessing the homepage of the Expelled Skateboarding site.

Without JavaScript, the core mapping system is unable to load. Alternative solutions for an offline mapping system are being investigated, but for the current implementation of Google Maps, offline caching of map tiles isn’t possible.

Uses httpsS

The Expelled Skateboarding site is hosted by DigitalOcean on a server running Ubuntu 16.04 and using Apache to configure the domain network routing. Following a tutorial on how to generate an SSL certificate and allocate it to a domain route with Apache (Heidi 2016), an SSL certificate was generated for the domain expelledskate.co.uk.

In-browser httpsS access to expelledskate.co.uk

The SSL certificate although free has a high overall rating and is suitable for the site.

Redirects https traffic to httpsS

Once registered, WordPress settings were updated to configure the CMS to assume httpsS availability on all pages and field settings. There are no areas of the site that request https protocols internally, and with most third-party scripts supporting httpsS, the site was now fully secure for PWA verification.

WordPress administration settings configured to httpsS in favour of https

The user can be prompted to install the web app

Users of the Expelled Skateboarding website may be prompted on either desktop or mobile devices to notify them of the option to install the web app on their machine. Google outlines the minimum requirements of the web manifest file to enable prompts (Basques 2018) in their official post on PWA’s and service workers.

Desktop prompt to add Expelled to navigation

Configured for a custom splash screen

A custom splash screen has been configured in the manifest file for the website. A ‘background_color’ property has been defined with the site’s primary colour of “#071930”, as well as a icons set at 192px by 192px, 384px by 384px and 512px by 512px.

Expelled Website installed on Android homescreen, launch splash screen and app view

Address bar matches brand colours

Again, the address bar has been set to match the brand colours, setting both the background_color and theme_color property to “#071930”.

{
    "name": "Expelled Skateboarding",
    "short_name": "Expelled",
    "icons": [
        {
            "src": "https://expelledskate.co.uk/wp-content/themes/expelled_theme/img/favicons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://expelledskate.co.uk/wp-content/themes/expelled_theme/img/favicons/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "https://expelledskate.co.uk/wp-content/themes/expelled_theme/img/favicons/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "background_color": "#071930",
    "theme_color": "#071930",
    "display": "fullscreen",
    "start_url": "https://expelledskate.co.uk/",
    "orientation": "any",
    "lang": "en"
}

Has a tag with width or initial-scale

WordPress uses a partial header file across all pages unless specified otherwise. In the head tag of each page, the favicons, title, and other meta information is defined. This is where the meta name viewport is defined to scale at 1.0.

Expelled site PHP header with HTML attributes

Content is sized correctly for the viewport

The Expelled Skateboarding site is designed and developed mobile first, with the exception of rapidly prototyping components. Mobile first approaches to website design and development are essential to the success of a site as the majority of online browsing is done using a mobile device.

Mobile, tablet and desktop viewports are taken into consideration at a minimum, to ensure all popular devices are catered for. This is done using media breakpoints in the site’s CSS file.

Web Application on Android Homescreen

As the site passes the majority of PWA requirements, it is installable on an Android homescreen. This allows for users of the application to quickly access the site, as well as providing an appropriate familiarity to other native applications.

This familiarity is essential for PWA’s to be recognised as an alternative solution to native iOS and Android applications. Users won’t understand PWA’s until they are explained to the user, and frankly, non-tech users often won’t care about new technologies, they want what works well and what works the best.

Introducing the users to concepts they already understand, such as shortcuts on home screens will help blur the line and create a smooth transition to PWA implementations.

Expelled Site installed on Android Homescreen

Recommendations for Future Work on Expelled

Although a service worker has been installed and PWA methodologies are applied to the final project, the site is still not in a state of usable offline. The site uses PHP which is a server-side language; pages cannot be rendered offline without the use of an HTML container, as PHP would usually generate HTML based on the data it has access to.

Frameworks and libraries such as jQuery or React can be used to access the REST API end-points of WordPress and generate HTML pages based on the end-points. A service worker may also be used to store the JSON found for offline use if no internet connection is available. The combination of WordPress REST API JSON and libraries or frameworks to render the pages is often referred to as ‘Headless WordPress’.

However, Headless WordPress is a blog post in its own right (stay tuned).

Conclusions

So, PWA, Should I bother?

We believe that PWA is the future of the world wide web and will be trending higher as the support for Service Workers becomes stronger.

The growing number of case studies implementing PWA technologies and methodologies proves both to consumers and businesses that PWA establishes strong benefits for everyone. For businesses wanting a mobile application to support their business model, it's a no-brainer that instead of investing in the design and development of both a website and mobile application, that they instead invest in a hybrid which caters to all of their customer's needs.

Hopefully, we've given an insight into what PWAs are, how they can be implemented, and the benefits they provide.

We are far from experts on the subject but wanted to share our experience and knowledge on PWAs, if you want to learn more we suggest some further reading.

NoFace Website Development