Imaginaire

Why you should consider a headless CMS for your website

5 Common Misconceptions About Adwords

How to Improve Your Quality Score

How to use your time better as a business owner

Get our team of ecommerce experts to build a winning strategy for your business

We make sure that every solution is personalised, efficient, and built around your goals

Request a quote today, and let's turn your ideas into results 

Request a Quote

Charlie Worrall

Marketing Executive

Jamie Gentile-Clarke

Managing Director

Matt Cooke

Website Manager

Nathan McEvoy-Swann

Head of Digital and CRM

Charita Chutoorgoon

Progressive Web Apps (PWA's) are one of the most exciting innovations to arise in the web development space recently, and it is becoming more and more important to understand why they are so great. You can think of a PWA as the best of both a website and a mobile app. A website that can be accessed normally via a desktop, but also mimics an app interface and format when accessed using mobile devices. They allow users to install shortcuts to the site onto the home screen of their phone, and can

User retention is already hard enough, and if you have to direct your users to the app store to then download your native app you will have an even harder time. There are quite a few steps on that path where you will inevitably see some drop off in users, as they have to firstly open the store, find your app and then download/install it. PWA's have the advantage of not needing to redirect your users away from the website. They will simply be prompted to install the shortcut when they load the site for the second time, and after that will be able to access the app from a shortcut on their home screen. This is a much more seamless process and should result in higher user retention. Another huge factor is that a PWA benefits from being able to send push notifications directly to the users' phone, which is a great way of getting return customers. This is a great advantage for ecommerce sites and is one of the reasons ecommerce giants 

 becomes easier when using a PWA. Whereas in the past a company may need 3 separate applications to cover the web, android and ios, now they only need 1 single application. Only needing to do a third of the development has the obvious benefit of saving development time and money, but is also great for the users too! Instead of needing to download updated versions of the app, all updates to the code will be available for them whenever they access the app.

To be a PWA, an application has certain criteria it needs to meet. Luckily for us, when the term Progressive Web Application was coined, the characteristics that the app must meet were also defined.

A simple one, the app must scale to the devices viewport size, which is something all websites should be doing these days anyway.

Accessible without an internet connection - This is achieved via a Service Worker.

Use a shell+content application model to create a web app that looks, and feels, like a native application.

New changes to the app are available instantly without the user having to redownload anything.

Basically just means that it needs to be served over SSL. This is a requirement over the Service Worker as well.

The PWA needs to be identifiable as an Application, which can be achieved with a manifest file and a Service Worker letting search engines discover them.

A PWA needs to be able to access the reusable parts of the phones UI - for example, the push notification functionality.

Being able to install the application as a shortcut on the phones home page is a key component in being a PWA.

This means that the app can be shared via a link. It doesn't sound like a big deal, but being able to link someone an application where they then have the 

 to download it and access it that way OR just using the URL is an important difference between a native app and a PWA.

It's actually pretty easy to turn most websites into a PWA, assuming the UI already looks similar to an application. You only need to check 3 things.

Firstly, your site needs to be served over https. This has been standard for more than a few years now, so this one should be checked off by default. If it isn't, go change that now.

You also need something called a 'Manifest' File. This is a simple JSON file, that is used to pass some data about the PWA to the browser. You specify the icon and name of the shortcut in this file. Your manifest.json needs to follow the 

Lastly, add a service worker. These are used to access the application offline, and come in the form of a relatively simple javascript file. You can even 

Progressive Web Apps are an interesting innovation that has almost no downsides, but lots of benefits for your users. If you are building any sort of web application, dashboard or business solution that will be used primarily by mobile users, turning it into a PWA is a no-brainer. 

Interested in how we can build a PWA for you?

, we'd love to get to know a little more about your project and how we can help. Even if you just need some free advice!

Wattbike

the human-led tech-enabled ecommerce agency

The Power of Progressive Web Apps