How To Create a Progressive Web App (PWA)


How To Create a Progressive Web App (PWA)

This post will cover how to get started with Progressive Web App (PWA) development, including how to set up your app, use lighthouse audits, register as a service worker, incorporate home screen compatibility, and provide push notification functionality.

 

Getting Started with Progressive Web Application Development: 

Progressive Web Applications are performance-based websites designed fundamentally for an enhancing mobile browsing experience.

They’re responsive, use less storage space and data, support push notifications and can be saved to the home screen on mobile devices.

The step-by-step guide below is essential for PWA beginners to get started with:

  1. Setting up the app.
  2. Using Lighthouse Audits
  3. Registering a service worker
  4. Enhancing progressive nature
  5. Adding home screen capability
  6. Including push notification

1. Setting up your app

First, you have to build your project or find one that you want to make PWA-compliant. If this is your first PWA, we would recommend keeping it simple. Your project should be based on a lightweight platform. Depending on your selection, it could use AngularJS or Vue.js.

 

2. Lighthouse Audits

Google Lighthouse is a free, open-source program that is available in the ‘Audits’ part of the Chrome Development Tools. You can select from things such as website audits or web code audits to ensure your project is PWA compliant. Audits have a PWA check-up so you can see if you need to change anything. You may experience additional things that need to be added to your project and suggestions while making your website more effective. We will discuss them below.

 

3.Registering A Service Worker

One of the necessities for having the application PWA compliant is to register a service worker. This is the technology that allows your app to use innovative web app functionality such as offline connectivity, push alerts, and shortcuts on the home screen.

Service workers are scripts that your browser runs in the background (separate from your webpage), which will intercept and manage network requests.

 

 

The service worker serves as a proxy for the app and the network. In this way, the service worker will verify if the user is linked to the Internet and get the latest data from the backend. If the user is not connected, the most current cached version of the web page can be used.

 

4. Enhancing Progressive Nature

Progressive enhancement primarily sets about ensuring that the website/app is available to as many people as possible. This is done by building the website’s core 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).

 

 

It is not often so simple to put to effect, particularly for new, modern and large-scale applications. One condition for having the app PWA compliant is to make explicit that your material would become inaccessible if JavaScript is switched off. If your app makes a blank screen when JavaScript is allowed, you need to re-consider this. 

 

5.Adding Home-Screen

This functionality enables you to save websites to your home screen and view them in the same manner as you would with a native app. To make this prompt accessible on your smartphone, you need to ensure that you have followed the following criteria:.

1. It contains a web app manifest that includes:

  • Short name (so it looks neat on the home screen)
  • Must have a 192px and a 512px sized icons
  • The website must be shown in full screen, isolated, or minimal-ui. 

2.Server operated over HTTPS (required for service workers)

3.Has registered a service worker with a fetch event handler.

 

6.Include push Notifications

NOTE: You will have to use two APIs for push alerts on your app: the Notifications API and the Push API.

The Alerts API allows the app to take advantage of the device notications, which are often widely recognised as banners. The Push API helps a push service worker to process messages from a computer. Here are the steps you need to follow to use this feature:

1.Your app needs the consumer to validate that they want to accept updates – you may do this with the Notifications API.

2.Implement alerts using the service workers. 

3. The service worker listens closely and is prepared to accept communication coming in from the server. For instance, if a single service worker receives a subscription message about ‘stocks’, then it will pick that up and show it in the individual’s computer.

You can tailor to your unique requirements what information comes through by managing which updates you want to obtain via the app setup.

Again, it really depends on browser support. The Push API and Web Notifications are not supported by Safari. 

 

The pros and cons of of progressive mobile apps:

Pros:

  • There is no need to be approved on the Apple app store
  • There would be less obstacles to easy installation, particularly for new users.
  • Search engine can crawl them so they will appear in Google.
  • A linkable website is virtually equivalent to a regular website making it easy to share. 
  • 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 functionality such as getting connections to contacts and Bluetooth at all.
  • In this scenario, they’ll even lose out on traffic and benefit from the App Store.
  • There will still be an amount of confusion for various browsers.
  • Progressive Mobile Apps use more battery life than native app.
  • Cross app login is often inaccessible for users like other apps like Facebook and Twitter. 

PWA production could help address challenges that your organisation is experiencing, or if you’re designing your own progressive web app and need any guidance or support, get in contact with the team!

 

Tags

    Any Comments?

    Your email address will not be published. Required fields are marked *