# Progressive Web App

# About

Google came with this idea by the fact that nobody (from regular users, the big majarity of customers of Google) install apps on smartphones. They use what is already installed and for the rest they all mostly use the website/webapp version (Twitter Mobile, Facebook Mobile), especially, but not only, on emergent markets where disk space is very limited (because it's expensive).

🍎 The Store/Application flow is bad by design (on mobile or desktop)

  1. Go to the website and discover the service πŸŽ‰
  2. There is an app for thatβ„’πŸ€¨
  3. Click the link to open the Store 😐(1st fail)
  4. Oh! You need an account! 😣
  5. Oh! You need a credit card! 🀬(2nd fail πŸ”ž)
  6. Download the app and waaaaaaaait 😴
  7. Oh, you probably need Wi-fi 🀬 (remember few years ago)
  8. Finally go to the Application πŸ˜’
  9. Log in again... πŸ˜’
  10. Use the service πŸ˜…

πŸ†š Web Application

  1. Go to the website and discover the service πŸŽ‰
  2. Create an account / Log in πŸ˜’
  3. Use the service 😎
  4. Install later as Progressive Web App if wished (+ already downloaded)

Moreover as a developer you must rely on the vendor to publish/update your application on his store. While with PWA, you are the only stakeholder for that. - Which explains why Apple is not a big fan of that -

# Support

Unfortunately it is still only available on Chrome Desktop / Mobile and Firefox Android. Partial support is available with Safari on iOS and iPadOS (aka. HTML5 Apps). Well, Apple's App Store does make πŸ€‘.

Available also in Microsoft Store and Play Store!

# Code

# Web manifest

<!-- index.html -->

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

{
    "name": "Genedata Selector",
    "short_name": "Selector",
    "start_url": "/home",
    "icons": [
        {
            "src": "./assets/logo-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./assets/logo-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#000000",
    "background_color": "#000000",
    "display": "standalone",
    "scope": "/",
    "orientation": "landscape"
}

# Service Worker

// index.js

if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("./service-worker.js");
}
// service-worker.js

async function networkOnly(fetchEvent) {
  return fetch(fetchEvent.request);
}

self.addEventListener("fetch", networkOnly);

# Strategies

# VS. Electron

  • PWA s an installed browser instance, not a new embedded browser.
  • PWA has a less controlled environment.
  • Electron still needs OS-specific work.
  • Electron is not available on tablets or smartphones (except with Windows 10X/Core)

# Documentation