Google PWA Training
Over the last few days, I have had the privilege of spending some time down in London at Google. To learn about progressive web apps (PWA’s) and the range of features that they have to offer. During the course, we went through the implementation of a PWA and how to build a service worker for your website. The course was very intense and showcased a broad spectrum of functions that are designed to increase engagement, improve usability & add functionality to a website. The course consisted of two days of lectures and hands-on coding practice and a small hackathon event at the end. We were asked to develop a PWA that would be ready to ship to an end user from scratch in small teams of 4. My team managed to complete the event in just under 30 minutes securing 3rd place in the small competition.
What is a PWA?
Progressive web apps are Google’s latest method of taking over the mobile app and website user-base. A PWA utilises the same technology and can call on the same native API systems as an Android application. Allowing the ease and usability of an app but the responsiveness of a website. Fetching features such as payment, offline working, push notifications and push messaging into the website world is a game changer. Giving websites an extra layer of functionality that they may not have initially had access to. Progressive web apps are the bridge between the mobile web world and the app world, offering the reach of a website with the interaction of a native app.
PWA – Features & optimisation
Progressive web apps carry a database of their own. This allows them to work offline or in areas of flaky connection. Giving a website the ability to work offline is what makes progressive web apps stand out from other mobile-first systems such as Google’s AMP. (Accelerated Mobile Pages) AMP was a great system however it lacked core, fundamental values that all web and mobile users have come to expect over the last few years. With a PWA the users are offered the chance to add a home screen button to your website or application. This gives it the ability to use push notifications, push messaging and offline e-commerce functionality.
Large companies such as Ali Express, Konga & Washington Post have already taken the leap to turn their website into a PWA, since doing so Ali Express has seen a 70% increase in mobile sales. If your company is looking to turn your website into a PWA there are a number of things you need to consider. You also need to be patient and work slowly to add functionality to your website. Ali Express changed their website in 4 phases. This was to make sure it did not disturb their current website’s operations and reduced the risk of downtime.
Google smart lock
Giving your website access to a service worker allows you to carry out tasks in a much faster manner. Service workers ‘sleep’ until they are given an event trigger this makes them a very valuable resource to have on your website. As well as helping keep your site size down. One feature that comes with the implementation of a service worker is access to Google smart lock. This feature is being used across a large number of Android devices. As it allows the user to sign into any website once. After the initial sign-in process the user is asked if they would like to save their credentials to their smart lock. (Providing they have a google account attached to the device they are on.) This allows the user to simply visit the login screen in future and be automatically signed in by the service worker and smart lock.
Using a service worker on your website allows all users to access content across your website even when they are offline or in areas of bad connection, this is done by providing a local cache & database for your users.
Importance of HTTPS
All Progressive web apps require an SSL to function. Without an SSL they won’t pass data and won’t trigger when a user visits the website. The idea behind a service worker is to create a small and secure event on your website. Which can cache, pull and push data to a user regardless of their network status. Without an SSL no data can be accessed via the service worker rendering it useless.
Who controls what?
When it comes to the caching side of a progressive web app certain files and assets are handled in different ways. Anything that is classed as static data such as images, HTML & CSS are handled by the service worker and are sent into a cache for the user to download. Anything that is dynamic such as JSON is stored in the client-side database. The mixture of these two systems is what allows the user to use the website as if it was online even when they aren’t. This combined functionality is how a PWA can allow a user to carry out functions and processes on a website. Such a complete a purchase or retrieve information even when they are offline.
Do I need to make my site a PWA?
Every website can benefit in their own way from making the transition to a progressive web app. Even if it is just so you can provide some form of offline access to your users. If you are seriously considering turning your current website into a PWA please don’t hesitate to contact us. We will help you develop a caching strategy and form a process of implementation. To make sure that the fundamental parts of your website get ported across first. Transforming your website into a PWA has the potential to increase interaction and reduce bounce rate significantly.