Create a Progressive Web Application

Progressive Web Applications are absolutely awesome and they will just get better and better. In my previous post I have shown how to implement caching using a ServiceWorker. Working offline is a big chunk of PWAs, now let’s add the missing pieces.

Get started

To kickstart this project, I’ve cloned the repository of the “Implementing a Service Worker” post. To get the initial state check out pwa-start tag of this new repository.

Initialize the project

Shell

1

2

3

git clonehttps://github.com/seabadger-io/blog.create-a-pwa.git

cdblog.create-a-pwa

git checkout pwa-start

As I said, with this we already done a big part of the PWA development, as this small application works offline. Let’s see what else is needed to make it a Progressive Webb Application.

Manifest file

One of the core concepts of a Progressive Web Application is the manifest file. This is the JSON file which configures the application and this is a big part of what makes a Single Page Application a Progressive Web Application. This is where you define the theme color of the application, add icon which can be shown while the application is loading, define how the application should be displayed and even add reference to the native application if you have one available in an app store.

First I create the manifest file and will call it manifest.json. The name is otherwise up to you, but this one seems to pretty well describe what this file is.

manifest.json

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

{

"name":"PWA Demo Application",

"short_name":"PWADemo",

"start_url":"/",

"display":"standalone",

"background_color":"#d8f0f8",

"theme_color":"#d8f0f8",

"description":"A simple PWA demo application",

"icons":[{

"src":"img/logo/logo@48.png",

"sizes":"48x48",

"type":"image/png"

},{

"src":"img/logo/logo@192.png",

"sizes":"192x192",

"type":"image/png"

},{

"src":"img/logo/logo@512.png",

"sizes":"512x512",

"type":"image/png"

}]

}

This is enough to get it started. For the details on the available configuration options check out the MDN site of PWA manifests. The different sized logo images I have generated using Gulp, which is not in scope of this post, but I leave a piece of code here if you need it (click to open).

gulpfile.js to create resized images

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

constgulp=require('gulp');

constimage=require('gulp-image');

constresponsive=require('gulp-responsive');

gulp.task('image',()=>{

returngulp.src('img/logo/*')

.pipe(responsive({

'logo.png':[

{

width:48,

rename:{suffix:'@48'}

},

{

width:192,

rename:{suffix:'@192'}

},

{

width:512,

rename:{suffix:'@512'}

}

]

},{

errorOnUnusedImage:false

}))

.pipe(image({

optipng:['-i 1','-strip all','-fix','-o7','-force']

}))

.pipe(gulp.dest('dist/img/logo'));

});

Link the manifest

Now the manifest file looks good, but it floats in the nihil. To attach it to the application, update the HTML file with a link:

XHTML

1

2

<!-- link the manifest file from within the head tag -->

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

And that’s almost it, now just need to make sure, that the browser’s address bar will match the theme color of the application. As it should happen already before the manifest was loaded, this information also goes to the HTML file.

Define theme color

XHTML

1

<meta name="theme-color"content="#d8f0f8">

What have I done?

In its most basic form, that was it. We have an arguably useless web application, which works offline, customizes how the browser displays it and can be added to the home screen on Android devices and according to the news, recently iOS support also arrived.

So let’s see how it looks if I remote debug it on my device:

Let’s just say, that my choice of color was brave, but other than that, it looks pretty cool, huh? The address bar of the browser became this lovely babyblue, the visitor has the option to install the application and once it’s done, there is an app icon on the home screen. Of course it also works offline, because we cached everything in the previous post.

If you start the application from the home screen, it will be started in a standalone mode, without displaying the address bar, so your application can take all the screen.

Important note: the browser may still decide, that for security reasons it falls back to a display mode which shows the address bar, so the user can see the URL. If you serve your application properly from a secure (HTTPS) URL, it should be displayed in standalone mode though if you use Chrome. Check out this W3C page for more details in the fallback display mode.

That’s it in a nutshell, hope you found it useful and feel free to ask if something was not that clear.