How To Convert Your Web App into a Mobile App?

Our previous post (only available in French) looked at what a Progressive Web App (PWA) is and some recent examples of its use. We also discussed the three elements that make a web app a PWA. As a reminder:

1.  An HTTPS connection (required)
2.  A web manifest containing information about the app (name, icon, display mode, etc.)
3. ⚙A service worker, which is the most important element of PWAs. The service worker uses the browser’s cache, data synchronization, and push notifications to manage your app’s offline mode and poor device connection.

Today, I’m going to use an existing web application to show you how to add these various elements and turn your app into a PWA.

Converting Your Web App Into a PWA

If you are using JavaScript libraries or frameworks, see if there is a PWA module available. For example, the @angular/pwa package for Angular is well documented. It allows you to automatically version your service worker in your project builds and simplifies the management of your PWA application cache (implementing a caching strategy, identifying files to be cached by name or type, etc.).

HTTPS

First of all, your web app must be HTTPS-enabled. This is essential for the service worker to function correctly. If a user visits your site in HTTP, they must be automatically redirected to HTTPS.

In addition, Google ranks HTTPS sites higher in its search engine when they are public web apps.

Web Manifest

The webmanifest file is a JSON file that contains metadata about the PWA. It includes information about the application’s installation (name, shortcut icon) and display (orientation, full-screen display, etc.).

Create a file with the .webmanifest extension in your web project.

Here is an example of a web manifest file:

The example shows the main values required:

• name: name of the app
• short_name: the app’s short name. Used on the home screen (app name under the icon).
• theme_color: the color of the address bar, if visible
• background_color: background color. As seen while the PWA is running.
• display: specify the application display mode. There are four possible values:
  • fullscreen: the PWA opens in full-screen mode
  • standalone: only the status bar and sometimes the system buttons (buttons at the bottom of the screen) remain visible
  • minimal-ui: similar to a browser, but you can’t change the URL
  • browser: opens in a new tab or window

Example with an Android phone:

• scope: lets you define the navigation scope of the application context. If a URL is outside this scope (e.g., an external link), the URL opens in a new window.
• start_url: the application’s start-up URL
• icons: a list of the app icons in various sizes. Used to install (home screen shortcut, for example) and run application, etc. You will need to create an icon a variety of sizes. Use the site realfavicon to help.

Visit the W3C site for more information.

Example PWA home screen (or splash screen):

• theme_color
• Icon
• Background-color
• Name

Once you have created the webmanifest file, you must link to it in the header of your index.html file.

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

Service Worker

A service worker is a type of web worker. You define a set of instructions in a JavaScript file to be executed in a background thread, independently from the web application thread. The service worker has no access to the Document Object Model (DOM), and there is no direct interaction with the user.

Consider it a proxy between the application and the network, intercepting all requests and implementing the desired caching strategy. For example, the “cache first” (or “offline first”) strategy checks if the resource already exists in the cache before retrieving it from the network.

The service worker also helps:

• Manage offline mode by checking network status
• Receive push notifications (Push API)
• Start background synchronizations (not supported in Firefox)
• Check if an application update is available, etc.

Service Worker Declaration

You must enter the path in your web app to register your service worker.

Installing and Activating the Service Worker

Once you have registered the service workers, the main events are install and activate.

⚠ Note, the service worker is not ready until its status is activated.

For example, the install step lets you cache static elements of your application (e.g., images, icons, scripts, css, fonts, etc.) for offline mode management or to update the service worker code.

Caching

The fetch event tracks all the HTTP requests sent by your application. For example, you can filter by URL or resource type to choose the cache strategy you want to implement.

The system checks each request to see if the element has already been cached. If not, it retrieves and caches the content.

Testing Your Site in PWA Mode

In our previous post (only available in French), we looked at PWA compatibility with modern web browsers.

I recommend using Chrome or a recent version of Microsoft Edge when testing your application in PWA mode. Firefox is another possibility.

With Chrome or Microsoft Edge (>= version 79), open your debugger in the Application tab when you launch your app in debug mode. You will see the name and status of your service worker.

The pane on the left contains other categories that may be of interest:

• Manifest to see how your web manifest file looks to the browser and check that the browser has detected it
• Cache Storage to check what is cached

To continue testing your web app in PWA mode, you can debug from a smartphone or tablet by running your application:

• Locally on your computer
• On a web server

Everything that comes from the cache (ServiceWorker appears in the Size tab) is then visible in the Network tab:

PWA Project Tree Structure

Starting from a web application, you should have at least two new files:

• A JavaScript file (sw.js)
• A web manifest file (manifest.webmanifest)

Below is an example of a project without a JavaScript library/framework:

Further Reading

Hopefully, these two posts have inspired you to create your first PWA and experiment with the concepts we have covered. Why not build an app for the store?

Finally, here are some links for further reading:

• Google Doc: https://web.dev/progressive-web-apps/
• MDN: https://developer.mozilla.org/fr/docs/Web/Progressive_web_apps

The source code for the example project used in this post is available at GitHub.