)
)
Getting Started with Progressive Web App Development:
Progressive Web Applications (PWAs) are performance-based websites that have been streamlined to provide a superior mobile-experience, similar to that of an app.
They’re responsive, use less storage space and data, support push notifications and can be saved to the home screen on mobile devices.
Having recently developed a PWA in one of our app development projects, I wanted to write a step-by-step guide that would give beginners everything they needed to know to get started:
Setting up your app
Using Lighthouse audits
Registering a service worker
Enhancing progressive nature
Adding home screen capability
Including push notifications
1. Setting up your app
First up, you need to create your project or find an existing project that you want to make PWA compliant. If this is your first PWA, I’d recommend keeping it simple for now so that you can focus on the PWA side of things. Your project can be built in any framework of your choice, I built mine using Vue.js as it is a lightweight framework and the CLI comes with a lot of PWA support straight out of the box.
2. Using Lighthouse Audits
Google Lighthouse is a free, open-source software which is available in the ‘Audits’ section of Chrome Dev Tools. There are several different audit categories that you can run against your website, including whether it meets the standards for a progressive web app. The audit lets you evaluate your app based on their PWA criteria and provides a checklist of improvements that need to be made. You may find that a lot of the recommendations are best practice when building websites such as using https, however there will be a few additional things that you need to consider and add to your project. I will detail some of these in the steps below.
3. Registering A Service Worker
One of the criteria for making your app PWA compliant is registering a service worker. This is the technology that enables your app to use progressive web app features that would normally require native mobile app development, such as offline functionality, push notifications and the ability to add shortcuts to the home screen.
Service workers are a script that your browser runs in the background (separate from your webpage), which have the ability to intercept and handle network requests, including managing a cache of responses.
)
Source: Developing a PWA with Service Workers.
In the image above, you can see that the service worker acts like a proxy between your app and the network. The service worker can check if a user is connected to the Internet and grab the latest data from the backend, or if they aren’t, it will display the most recent cached version of the website instead meaning that your PWA can still work offline.
4. Enhancing Progressive Nature
Progressive enhancement is a development strategy that makes sure that your website/app is accessible to as many users as possible, ideally by building the core of the website using widely adopted technologies such as plain HTML and then layering enhancements on top such as styling and interactivity using JavaScript. The image below shows this quite nicely, the core structure and content of the site is the sponge part of the cake, and whilst this is fine and still a delicious cake, it can be made better with icing and decorations (the CSS and JavaScript).
)
Source: What is Progressive Web App Enhancement.
However, this isn’t always so easy to put into practice, especially for many modern, large-scale applications. One of the criteria for making your app PWA compliant is ‘Your app should display some content when JavaScript is disabled, even if it’s just a warning to the user that JavaScript is required to use the app’. As long as your app doesn’t render a blank page when JavaScript is enabled, you will be able to tick off this part of the criteria.
5. Adding Home-Screen Capability
The whole point of PWA’s. This functionality is what allows users to save websites to their home screen and access them in the same way they would a native app. In order for the browser to display this add to home screen prompt on your app, you need to make sure that you have met the following criteria:
1. Includes a web app manifest that includes:
icons must include a 192px and a 512px sized icons
display must be one of: fullscreen, standalone__, or minimal-ui
2. Served over HTTPS (required for service workers)
3. Has registered a service worker with a fetch event handler.
6. Including Push Notifications
To use push notifications on your app, you will need to make use of two APIs: The Notifications API and the Push API.
The Notifications API lets the app display system notifications to the user, just like a native app does. The Push API allows a service worker to handle Push Messages from a server (I’d recommend using Firebase Cloud Messaging (FCM) if you want to quickly get up and running with your own project as it creates unique tokens to for each device and session). Below are the steps you need to take to get started with this functionality:
Your app must ask the user if they would like to subscribe to notifications – you can do this using the Notifications API
Handle the notification subscriptions using the service workers. Eg, inform your service such as FCM, that the user would like to subscribe to a particular topic, eg ‘hurricanes’ or ‘puppies’
The service worker listens and is ready to receive any message coming in from the server. E.g. if a notification is sent to all users who have subscribed to the topic of ‘puppies’, then the service worker will take that content and display it on the user’s device.
You can configure what information comes through in the notification, such as the title, body text, icon, link and even the vibration pattern the phone should make when receiving the notification.
Again, browser support is key here. At the time of writing, both the Push API & Web Notifications are not supported by Safari. I’d recommend keeping an eye on out for updates as there are rumours that it is on Apple’s roadmap.
The Pros and Cons of progressive web apps:
Pros:
Don’t have to deal with app store approvals etc – though this could be a downside as it could lead to a slip in quality
Easier to install – don’t have the friction of users having to find your app in the app store, download it, etc
Search engines can crawl them so they will appear in Google searches
Linkable – just like a normal website which makes it easy to share content with people
Uses web technologies – for those with web dev backgrounds this is great as you don’t have to learn another coding language to get some great native app-like functionality
App like experience with offline functionality and push notifications.
Cons:
PWAs don’t have all the same features of native apps such as access to contacts, Bluetooth or advanced camera controls
For obvious reasons, they’ll also miss out on traffic and exposure from the App Store
There will always be some degree of browser inconsistency
Progressive Web Apps consume a lot more battery-life than native apps
Cross app login is also unavailable with other apps like Facebook and Twitter.
If you think a PWA could help solve the problems your organisation is facing, or you’re trying to develop your own progressive web app and need some help or advice, get in touch with the team!
Published on 15 November 2018, last updated on 22 May 2019