The guide on progressive web apps
Last updated on
It is very difficult to get people to install a native mobile app. Even if someone installs your app it is difficult to keep them engaged for a long period of time before they either delete it or leave it sitting on their device. Websites are much more convenient as all a user needs to do is just enter a URL or click on a link – it just works. However we all know that mobile connections can be temperamental, giving your customers a poor experience of your website.
Progressive web apps are focused around improving this experience by using new browser features such as offline connections, web app install banners, push notifications and ways of making your website faster. As well as design principles such as app-shell architecture. PWA’s are not a web API, or a new way to code, it is just using existing web technologies and them applying them to your website app to create a native mobile experience in the web browser.
Provide a secure environment for your customers with HTTPS
Regardless of whether you handle sensitive information on your website you should encrypt all your web pages with HTTPS. Google recently announced that it will soon warn users about non secure web pages that collect sensitive information, with the long term plan to mark all HTTP sites as non-secure.
As well as protecting your customers data, using HTTPS allows you to use new browser features and older ones such as geolocation, which now requires SSL. HTTPS is the first essential step in order to create a PWA.
Your website should be fast.
Double Click found in their studies that 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, they expect them to be fast, no janky scrolling or slow to respond interfaces. Walmart found that:
- For every 1 second of improvement they experienced up to a 2% increase in conversions
- For every 100 ms of improvement, they grew incremental revenue by up to 1%
A good way to start making your website fast is understanding how the browser works, then start improving your code efficiency. It’s important to understand what your app or site feels like when connectivity is poor or unreliable, and build accordingly. Check out this post around website performance for further information.
Provide an offline experience
Think about the last time you were on a train and using the web on your mobile, I bet you found your network connection being highly unstable and sometimes dropping out altogether. Now you can use service workers to allow your web app to work even when there is no internet connection available. What you decide to store offline is up to you, it could be a simple landing page which notifies the person that they are offline, or you could add basic functionality but to access dynamic content it would then require an internet connection.
Web Push Notifications
One of the major differences between native and web apps is that native apps can send customers push notifications to get them to re-engage with a product. Websites can now use a service worker to utilise web push notifications to deliver timely updates. This feature won’t be useful for all types of websites, but if you are pushing out regular updates on your website or want to announce a new feature on your website then a web push notification could be a really useful tool to use. Push API is supported by most popular browsers such as Chrome, Opera and Firefox whilst it is in development for Microsoft Edge and unfortunately there is no development being made on the Safari browser at the moment.
Web App Install Banners
Most of us have seen a native app install banner when visiting websites on mobile, but it is also possible to create a web app install banner too. This allows a user to quickly add your website to their home screen with little fuss. It is really straight forward to implement too, all you have to do is to create a web app manifest file in your site with details about your app. The web app manifest file is a simple JSON file, for more information read the W3C’s specification. There is a few requirements to display the installation prompt, which are:
- The website is served over HTTPS
- Has a valid service worker
- The website has been visited twice, with at least five minutes between each visit
- Have a valid web app manifest file
By installing the web app you can then create a more native-like presence on the user’s home screen. You can utilise features such as full-screen mode not showing the URL bar, control the screen orientation, set a splash screen and theme colour for the address bar.
To get started with creating your web manifest file Google have created a sample manifest.json file. If you need a hand creating your manifest file then try out Bruce Lawson manifest generator and if you need to validator your web manifest code then I would recommend this web manifest validator.
App-shell architecture
App shell is not a framework or a web API, it is a design concept which you may decide to take when developing your PWA. The concept of an app shell is that the design is broken into two parts, the shell and the content.
The shell is all the UI elements you would find on most of the web pages, the header, footer, menus etc. The shell should be cached separately to the content, and to make it available offline if the user has no internet connection. By caching the shell you will also improve the perceived perception of your web app as you will be able to quickly retrieve the UI on request.
The content sits within the shell, which you can cache too. However, because content can be dynamic and changes from page to page it is not as efficient to cache the content as it is the shell.
Lighthouse
Lighthouse was created by Google as a way to analyse web apps and web pages and then to give you feedback and a score out of hundred on how progressive the website is. It is simple to setup with two options either as a Chrome plugin or through Node.js. Your website will need to be live in order to test it so you won’t be able to test a localhost link.
- Examples of Progressive Web Apps by PWA.rocks
- Google’s Case Studies of PWA
Wrapping Up
As more people use their mobile devices to browse the web and especially on mobile internet connections which can be flaky we shouldn’t ignore the potential of these new browser features. Providing a great online and offline experience to our customers, giving them the ability to quickly install our website on their device, sending push notifications and proving a secure environment all are essential things to consider. If you want to learn more about PWA’s and how to start creating yours then Google has a great collection on YouTube:
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects