Create a Progressive Web App – Minimal amount of code

Example of a Progressive Web App with minimal amount of code. Beat the competition by knowing these several small tips and tricks.

If you are building an app and you’re trying to reach a lot of people, you don’t need native apps for all the platforms. Before you build optimized and maximally performant experience, you need to know that you have the users [and also money] for it. The way to reach all the platforms – even those that don’t have app stores, is to have a Web App.

Thanks to the modern standards and improvements, Web Apps can now be presented to the users as apps. They are actually visualized and displayed as normal apps within the native app lists.

What you need for a Progressive Web App is: 

First a file “index.html”:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Minimal Progressive Web App</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”theme-color” content=”#000″>
<link rel=”apple-touch-icon” href=”192.png”>
<link rel=”manifest” href=”fest.json”>
<link rel=”shortcut icon” href=”192.png”><script>
if (location.protocol != ‘https:’)
{
location.href = ‘https:’ + window.location.href.substring(window.location.protocol.length);
}
window.addEventListener(‘load’, function () {
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘sw.js’).then(function (reg) {
}).catch(function (err) {
});
}
});
</script>
</head>
<body>
<!–https://pixabay.com/vectors/interface-internet-program-browser-3614766/–>
<div>TODO write content</div>
</body>
</html>

The example page does not do a lot, but you could integrate whatever CSS Library and Include Whatever Logic. Critical parts of the index.html are:

  • The registration of the Service Worker, if the Browser of the user is modern enough;
  • The attempt of registration of SW is executed only if the page is served over HTTPS. This is one of the requirements for a PWA.
  • Several Settings – Colors, Icons
  • Manifest File – (“fest.json”) listed below

fest.json

{
“background_color”: “#000”,
“theme_color”: “#000”,
“description”: “Example of Progressive Web App with the minimal amount of code.”,
“display”: “standalone”,
“icons”: [
{
“src”: “192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “512.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
],
“name”: “Minimal Progressive Web App”,
“short_name”: “Min PWA”,
“scope”: “/dev_examples/pwa/”,
“start_url”: “https://programtom.com/dev_examples/pwa/?source=pwa”
}

The manifest file is the Description of the App. It is used to show to the Users what your Web App is all about and also – some configurations. There is name, urls, icons, colors, descriptions. One tricky thing is the scope and start url to end with “/”. Many hours have been wasted with not having a / in: 

  1. “scope”: “/dev_examples/pwa/“,
  2. “start_url”: “https://programtom.com/dev_examples/pwa/?source=pwa”

sw.js

version = 1;
self.addEventListener(‘install’, function (e) {
e.waitUntil(

caches.open(‘MinimalPWA’).then(function (cache) {
return cache.addAll([
‘512.png’,
‘192.png’,
‘index.html?’ + version,
]);
})
);
});
self.addEventListener(‘fetch’, function (event) {
var request = event.request;
if (request.mode === ‘navigate’) {
event.respondWith(
fetch(request)
.catch(function () {
return caches.match(‘index.html?’ + version);
})
);
}
});

The Service Worker Integrates with the Web Cache API – to allow offline loading of resources and other type of logic. It is detached from the User Window Lifecycle. It is executed on registration and in this execution – several callbacks are allowed to be plugged in – when there is no Internet, after app installation and more. 

Web Developers not always have full, absolute control on how the browsers behave. When the “Install App” Button appears may be one of those cases. If you want button that will trigger this on your page, here is the basic code for the purpose: 

<button class=’add-button’>Add as App</button></p><script>
let deferredPrompt;
const addBtn = document.querySelector(‘.add-button’);
window.addEventListener(‘appinstalled’, function (e) {
console.log(‘a2hs installed’); addBtn.style.display = ‘none’;
});
window.addEventListener(‘beforeinstallprompt’, function (e) {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = ‘block’;

addBtn.addEventListener(‘click’, (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = ‘none’;
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the 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;
});
});
});
</script>

This functionality is actually copied from https://web.dev/customize-install/

Install PWA Dialog

You could try a working example by opening this address: https://programtom.com/dev_examples/pwa/ with a browser that is modern enough – Chrome, Firefox, the newest version of Edge, etc.

The Progressive Web App is installed on your device and is displayed in the list as an app. To uninstall it, you’ll have to realize that – right now [November 2020] not every OS recognizes correctly how it should be removed.

On Windows 10 for example, clicking uninstall on your PWA from the start menu – redirects you to “Programs and Features“. Microsoft’s OS does not place PWAs there. You must open edge://apps/ or chrome://apps/ [or something else] – depending on the browser you use.

On the Mobile OSes probably long holding the app icon will allow you to drag [for Android] and uninstall it [by tapping the ‘x’ on iOS] – as the other native apps.

Leave a Reply

Your email address will not be published. Required fields are marked *