What are Progressive Web Apps and how to start?

apps on a phone

Picture a company that has a nice web application, but also has plans to create a Native Application for mobile devices. Unfortunately creating a complete Native app, will cost a lot of time and money to develop. If this is your situation, maybe transforming your web application into a Progressive Web App can help you.

The term “Progressive Web App” isn’t a formal or official name. It’s just a shorthand used initially by Google for the concept of creating a flexible, adaptable app using only web technologies.

The goal of Progressive Web Apps is to make the end-user feel as if they are working in a Native App, as we know it from mobile devices (Android and Ios).

Another big advantage of a Progressive Web App is the fact that any existing web application can easily become a Progressive Web App.

The capabilities of Progressive Web Apps

With progressive Web App functionalities, you have a couple of powerful features at your disposal that can really enhance the user experience. You can make it look like if the user is working on a real Native App instead of a web application. Progressive Web Apps have many features that can give your Web application a Native App feeling.

Some of the following features can help you with that:
– javascript service workers
– Background synchronization (in case of network outages)
– Mobile push notifications
– Install and start up your web application like a normal app
– Advanced caching possibilities for offline use
– access and use of native device feature (such as camera, GPS)

It’s all about service workers

The service workers are the engine of the PWA (functionalities). Without service workers, PWA applications can not display offline information, send push notifications, etc.
All processes of a service worker-run in the background and have no direct interface with the main process. It runs on a separate thread.

As soon as the end-user accesses a page of the web application, the browser checks if a service worker is already installed for this website (each web application has its own service worker). If no service-worker is installed yet, it will be installed automatically. If there is one installed, but it is not yet the latest version, it will be updated automatically.
The service worker is responsible for the caching of different pages in the application, the synchronization mechanism between the application and the server (in case of network connectivity), and the use of push notifications on mobile devices.

Manifest

Before you can start with Progressive Web Apps you need to tell your browser that it has support for it. You can do this with a manifest.json.
Inside your index.html place the following code between the head elements

    <link rel="manifest" href="/manifest.json" />


Now create a manifest.json file

{
    "name": "4dotnet pwa example app",
    "short_name": "PWA4Dotnet",
   "icons": [
        {
            "src": "/icons/4dotnet-48x48.ico",
            "type": "image/x-icon",
            "sizes": "48x48"
        },
        {
            "src": "/icons/4dotnet-64x64.ico",
            "type": "image/x-icon",
            "sizes": "64x64"
        },
        {
            "src": "/icons/4dotnet-144x144.png",
            "type": "image/png",
            "sizes": "144x144"
        }
    ],
    "start_url": "/index.html",
    "scope": ".",
    "display": "standalone",
    "orientation": "portrait-primary",
    "background_color": "#fff"
}

This is just an example of a manifest.json file. You can configure a lot more stuff for your Progressive Web App. Here you can find a list of all kinds of properties you can configure.

Because of the presence of the manifest file, the browser recognizes the manifest and tries to validate if the web application can be used as a Progressive Web Application. Click inside your browser developer tools, on the application tab. Then click on the section manifest to see how your browser is reading your manifest.json file.

How to start with service workers

Service worker needs to have a supported browser and your Progressive WebApp need to be running through HTTPS. But https is only for production applications. If you are developing locally, then you allowed running with HTTP on the localhost.
To start place the following javascript code inside the starting javascript file of your web application. Also, create another empty javascript file and call it sw.js

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(() => {
            console.log('registered')
        })
} else {
    console.log('no support');
}

This code checks if the browser has support for a service worker and if so it register it in your browser. You can check your browser console.

And if you click on the application tab of your browser development tools you can see that it registered our sw.js file as a service worker.

Going offline

Funny enough we are almost ready in creating an app that we can install on our device. The only thing left now is to install it.
If you go to our application and you select the manifest tab again you will see this picture.

You see a section called installability and it’s telling us that the page has no offline functionality and cannot work offline. Normally a native app needs to be accessible even if there is no working internet connection. Because of the fact we have no offline capabilities, the browser will not let us install our WebApplication as an App.

Now in order to get some offline functionality, we have to intercept the web request of the browser for getting some content from the server. But if you have no working internet connection the browser will return an error.
In order to intercept the request, we have to implement an event listener in our service-worker (sw.js file). We do this with the following code. here you can find some more information about this event listener.

self.addEventListener('fetch', (event) => {
    console.log('intercepting a fetch request from the browser');
    
    event.respondWith(fetch(event, request));
});

Maybe you can now already see the huge potential that this function has. You can now for example access some caching functionalities and get the content from the cache instead of the server. 🙁 There is however one catch to it. It can only intercept fetch requests. Any other request will not be intercepted and can not be answered with some offline content in your cache. So this can be, in potential, a problem for starting with a Progressive Web App.

Install the app

Now that we implemented an event listener in our sw.js file, the browser recognizes this as an intention to have offline functionality. So inside the manifest section, there is no warning anymore and we are free to install the App.

And that’s it. It’s now an app inside which you can access from within your operating system.

You can find the source code here

Leave a Reply