Google Developer Days Europe landed in Krakow to help developers upgrade their skills, absorb new tech trends and connect with experts across the region. Alongside topics like machine learning with TensorFlow, developing conversational assistant apps and using Android to program for the Internet of Things, progressive web apps gained lots of attention, offering a way to combine the best of the web and the best of apps to give users a consistent, beautiful digital experience.
For a user, visiting a website through a browser on a mobile device can be frustrating, with added layers of complexity not present when using a native app. For example, network conditions mean that a site might be slow or unable to load. And it’s not only broken connections that cause a nuisance – intermittent, flaky connectivity can be just as annoying.
At the same time, users are increasingly coming to expect app-like functionality when they view a website on their mobile screens. For instance, a site that’s easy enough to navigate in a desktop browser window can feel impossible on a mobile screen. On top of this, there are lots of features that native apps offer that standard websites cannot.
What’s a way around this? With progressive web apps, developers can combine the best of the web and the best of native apps. As with a traditional site, they offer the reach of the web and require no installation. But they also embody the extended capabilities of modern apps and devices: they load quickly, work offline or on flaky networks, offer a full-screen app-like user experience that feels like a natural extension of the device, can have an icon on the home screen and can drive reengagement through push notifications. In short, they are fast, integrated, reliable and engaged.
Improve user experience with a service worker
In the typical web model, the user clicks a URL and the browser goes to the network, looks up the web server and retrieves the resources required for a page. The browser has an http cache, but if the network is down then the page won’t load. In contrast, when users download a typical native app, they download everything that the app needs, which takes up device storage space. But a progressive web app leverages the resources of the browser to progressively install more assets and data only when required.
The technical foundation that many progressive web app features rely on, the service worker, is a client-side JavaScript proxy that acts as an intermediary between the web app and the outside world. After the user’s first visit, the service worker is installed. As a script that the browser can now run in the background – separate from the web page – it enables functionality that would otherwise require a native app, such as rich offline experiences, periodic background syncs and push notifications.
Getting started is easier than you may think
The good news for developers is that progressive web apps are modular, which means you don’t need to launch an entirely new site to start realising the benefits. Lighthouse is a Chrome extension that lets you measure how close your existing website is to being a progressive web app. Use it to record a benchmark of performance. Then, by analysing your existing site against your users’ needs in light of your own business goals, you can prioritise which features to implement immediately and which to put in the pipeline for later development.
It’s smart to start by getting your site “PWA-ready”. The idea is to fix the basics first, before moving to progressive web app feature additions. This means getting the site in good working order by optimising your images and scripts and removing unnecessary code. Measures like these will help improve site speed and performance, which is important for your first-time users who won’t have the service worker installed yet.
Next it might make sense for your business to prioritise a move to a secure domain connection in order to keep users safe. A lot of progressive web app features require an https connection anyway. From here you could opt to adopt any of the three technologies that are core to achieving parity with native apps: the service worker (for speed, reliability and caching), push notifications (for reengagement) and the ability to add to the home screen (allowing your web app to become a first-class citizen among the user’s native apps). Finally, you could address your payments and credential pages, making it faster and easier for users to input their secure information and perform tasks that can be difficult in a mobile setting.
Speed things up with accelerated mobile pages
As an ecosystem for quick, beautiful and responsive pages, accelerated mobile pages (AMPs) offer another way to enhance user experience that you can import into your progressive web app strategy. AMP pages are faster than traditional pages, and as a result they deliver lower bounce rates, better engagement and more conversions. So while progressive web apps enable app-like experiences on the mobile web, AMP makes the web fast for users and simple for developers. Put them together and you’ve got a way to build a fast, beautiful, immersive web app.
AMPs are useful in the context of progressive web apps because they can be used as a library of html web components, as rich data and as portable content units that you can embed in other pages. You can fit existing AMP content into a progressive web app experience without a single JavaScript framework, so the pages of your web app will load more quickly to present an optimal experience to users.
More from Google Developer Days Europe
If you weren’t able to attend Google Developer Days Europe, don’t miss the chance to catch up on the latest strategies, techniques and news about progressive web apps. Be sure to watch Developer Advocate Sam Dutton’s presentation “Progressive Web Apps: What, Why and How”, Developer Programs Engineer Ewa Gasperowicz’s talk “From Website to Progressive Web App” and Developer Advocate Ben Morss’s session “PWA+AMP = Easy for Users and Developers Alike”.
