Sublim.design

Transform a website into an application with PWA (Progressive Web Apps) technology

Published on February 11, 2024

Summary

  1. Native applications
  2. The Progressive Web App alternative
  3. Prerequisites for creating a PWA application
  4. Progressive Web App page markup
  5. site.webmanifest file and Progressive Web Apps (PWA) settings

Alongside the creation of a website, it can be interesting to publish an application on specialized platforms: AppStore (Apple), Google Play (Android), Microsoft Store, Huawei Gallery, Galaxy Store (Samsung) ... The application is a great way to build visitor loyalty, as it integrates directly into the desktop of a computer or the homepage of a smartphone in the form of an icon. Visible on a daily basis, the application is more likely to be consulted than a simple favorite link created from the browser.

Native applications

However, developing an application is a complex and costly process; we're talking here about native software in the sense that its operation depends directly on the OS on which it is installed. Indeed, an application must be coded in different languages to adapt to the technical requirements of each operating system: MacOs, iOS, Android, Windows ....

Development agencies specialize in this niche. Although the cost of an app depends mainly on its functionality, it's estimated to cost between €5,000 and €10,000 for a simple app. Once coded, the application must be submitted to and approved by the various platforms before it can be distributed. This step is accompanied by a registration fee of around $25 on Google Play and a $99 annual subscription for the App Store.

The Progressive Web App alternative

Alongside native applications, it's possible to transform an HTML page (or web service) into an application thanks to PWA (Progressive Web Apps) technology. Called progressive web application in French, this format enables a website to be displayed in the same way as an application. Once installed, it can be found on the desktop of a PC, in the Launchpad of a macOS system, or on the homepage of an iPhone or Android smartphone. The application then lets you access the site, without having to open the web browser!

Prerequisites for creating a PWA application

To operate, this technology requires validation of the following technical elements:

Progressive Web App page markup

must be included in the HEADER of the pages. The site.webmanifest file must also be mentioned. The JavaScript file named pwa.js remains optional at this stage, but we'll come back to it later...

Code
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Exemple PWA</title>
  <meta name="language" content="fr">
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="msapplication-starturl" content="/pwa.html">
  <meta name="HandheldFriendly" content="true">
  <meta name="format-detection" content="telephone=no">
  <meta name="application-name" content="Exemple PWA">
  <meta name="apple-mobile-web-app-title" content="Exemple PWA">
  <meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">
  <script src="/js/pwa.js" defer></script>
  <link rel="manifest" href="/favicon/site.webmanifest">
 </head>
 <body>  
  <button class="add-button" hidden>Télécharger l'application</button>
 </body>
</html>

site.webmanifest file and Progressive Web Apps (PWA) settings

The site.webmanifest file is indispensable. Generally placed in the favicon directory along with the icons, it determines the application's parameters.

site.webmanifest
{
 "short_name": "Exemple PWA",
 "name": "Exemple PWA",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "display": "fullscreen",
 "Scope": "/",
 "orientation": "portrait",
 "serviceworker": "/",
 "icons": [
  {
   "src": "/favicon/android-chrome-512x512.png",
   "type": "image/png",
   "sizes": "512x512"
  },
  {
   "src": "/favicon/android-chrome-192x192.png",
   "type": "image/png",
   "sizes": "192x192"
  } ],
 "start_url": "/pwa.html"
 }

If these recommendations are met, the website should already allow installation of the Appli PWA. On Chrome, a new icon appears next to the address bar to prompt the user to install the application. On Android, this same function is present in the options menu under the heading "Install application".

You can take a more pro-active approach by integrating a button directly into your web page. This button can be customized using CSS styles and brought into line with your website's graphic charter, which is where our pwa.js file comes in.

It determines the feasibility of installing the application according to each browser's criteria, and displays a button directly in your web interface. The button often appears after a few seconds of browsing.

pwa.js
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
window.addEventListener('beforeinstallprompt', (e) => {
 e.preventDefault();
 deferredPrompt = e;
 addBtn.style.display = 'block';
 addBtn.addEventListener('click', () => {
  addBtn.style.display = 'none';
  deferredPrompt.prompt();
  deferredPrompt.userChoice.then((choiceResult) => {
   if (choiceResult.outcome === 'accepted') {
    console.log('User accepted the A2HS prompt');
   }
   else {
    console.log('User dismissed the A2HS prompt');
   }
   deferredPrompt = null;
  });
 });
});
Download

A progressive web application can run javascript and offer advanced functionalities (shopping cart management, online purchasing, user account ...). It can go even further by integrating support for push notifications or offline browsing thanks to a service worker. This part will be the subject of another TUTO ;-)

What's more, as a PWA App is directly linked to a website, it doesn't require any updates.

Back to Top
Enter informations to start donwnload now.

I accept the privacy policy of the Sublim.design website. By ticking this box, I authorise the information entered to be used in the context of my request and the commercial relationship that may result from it, in accordance with the General Data Protection Regulation (GDPR).