Transform a website into an application with PWA (Progressive Web Apps) technology
Published on February 11, 2024
Summary
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:
- Secure connection using HTTPS protocol
- Some META tags entered in HTML code
- Application icon in 512x512 and 192x192 pixel resolutions (ideally in .png format)
- File site.webmanifest installed on the server. It defines the application settings (title, icon, display mode...).
Progressive Web App page markup
- apple-mobile-web-app-capable: yes - tells the browser that the page can be used as an application (Apple)
- apple-mobile-web-app-title: application title (Apple)
- apple-mobile-web-app-status-bar-style: status bar color (Apple)
- application-name: application title (HTML5)
- mobile-web-app-capable yes - tells the browser that the page can be used as an application (HTML5)
- msapplication-starturl: application launch URL (HTML5)
<!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.
{
"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.
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;
});
});
});
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.