Build Your Own Progressive Web App

To build your own progressive web app there are a few things you need to make sure of.

Firstly, your server must support https. Secondly, you must provide a web application manifest file listing all the additional details concerning your app and finally, you must define a service worker to allow some kind of offline capability.

So, lets take a look at these one at a time:

HTTPS

Your website needs to be securely served via https. 

You can check this very quickly by taking a look at your website url in the address bar which should have https and a padlock icon

If you don’t have https, then you will need to get a SSL certificate.

Most good hosts provide a free SSL certificate these days but if your hosting provider does not, then you can get a free certificate from Let’s Encrypt

Instructions on installation should be given as well.

 

Web Manifest

Next you will need to define the web manifest which provides a more detailed description of your web app.

There is a very easy to use open source pwa builder which will generate the web manifest and service worker thereby making it a lot easier to transform your website into a progressive web app.

It will also tell you exactly where to add the code which has been generated.

You will also need to add the following line to the head section of your website which tells the browser there is a web application manifest present <link rel=”manifest” href=”/manifest.json”>

Service Worker

This description of a service worker is from the developer.mozilla.org website

Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.

 

Cross-platform features

You can, if you like, also add some extra cross-platform features to your progressive web app, giving it that native app like appearance.

 

With the help of the pwa builder it shouldn’t prove too difficult to build your own progressive web app, good luck!