Progressive Web App (PWA),

WHY 🤔?



About me

  • Robert Mittl
  • Germany - Stuttgart
  • first Joomla Website in 2009
  • Web Developer
  • PHP, JavaScript
  • Progressive Web App (PWA)
  • CMS Joomla
  • Creator of miTT PWA (PWA Joomla Plugin)


  • Presentation iPhone 2007
  • Steve Jobs - browser based Web-Apps
  • Developers hacked the System and were creating native Apps
  • => Launch App Store in 2008

Mobile Web 📈

  • Apps are increasing
  • Responsive is no question!
  • Data protection, spyware and tracking
  • App installation sluggishness

 Web === PWA

Benefit from the advantages of a Progressive Web App 🤗

 Web - Server

What is a PWA 📱 from a technical perspective:

Service Worker



Cache API

📱 Progressive Web App

  • runs in every web browser
  • can be integrated into any website
  • can - need not be installed
  • is found via search engines
  • Data protection (e.g. facebook)
  • increase the conversion rate, duration of stay

What we need?

  • same Domain

Where can you install a PWA?

  • Linux
  • Windows
  • macOS
  • Android (all Browsers)
  • iOS (add to Home screen - only Safari)


Clear advantage, one app of all operating system.

Service Worker Lifecycle 🔄

-> Registration

-> Download

-> Installation

-> Wait

-> Activate


  • with every change of the Service Worker
  • set an interval
  .then( (registration) => {
    setInterval( () => registration.update(), 86400 );

Cache Strategy

  • Static files

  • Network first

  • Offline first

  • Network speed


  • control the cache (Cache API)
  • use static files, load once from network
  • App Shell (only the content will updated)

Check the Network

if (navigator.connection.downlinkMax > 50) { // fast Network

Persistant Storage 💿

if (navigator.storage && navigator.storage.persist)
  navigator.storage.persist().then(function(persistent) {
    if (persistent)
      console.log("Storage will not be cleared except by explicit user action");
      console.log("Storage may be cleared by the UA under storage pressure.");

App Strategy

  • Battery (navigator.battery)
  • Cache (navigator. connection)
  • Performance Device (PerformanceObserver)

Service Worker Opportunities

  • fast page loading 🚀 - full control over the cache and request
  • Input forms or orders, send in "Offline Mode" (Shop, CMS System)
  • Delivery WebP Images, if supported

Offline data storage

Data exchange via background sync with fallback (online / offline)

  • IndexedDB (Browser)
  • PouchDB
  • LocalForage






Push Messges

Android, Windows, MacOsx


States are:



Push Messages

iOS 13.5?


Commune News App

Push Services

  • Firebase
  • Cleverpush
  • One Signal

Send own Push Messages through VapidMethod

(Voluntary Application Server Identification)

Web Share



(Web Share Target API)


Web Share API

if (navigator.share) {
  title: document.title,
  text: 'Hello JAB 2020',
  url: 'https://jandbeyond.org/',
  .then(() => {
    // do something on success
  .catch(err => {
    // do something on error

PWA App - Lifecycle 🔄

App is loading

App is going in background {visibilitychange}

App is closed {freeze}

App is called again {resume}



The event could be triggered.

Lifecycle in iOS

  • 12.x 😟

  • 13.x 🙂


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

    "lang": "de",
    "name": "Joomla",
    "short_name": "Joomla",
    "description": "Meine WordPress PWA",
    "theme_color": "#99ccff",
    "background_color": "#99ccff",
    "display": "standalone",
    "Scope": "/",
    "start_url": "/",
    "icons": [
            "src": "images/icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"

new Maskable Icon

Manifest - Maskable Icon


add to Homescreen

Custom Installation Button

installButton.addEventListener('click', e => {
let installPrompt
window.addEventListener('beforeinstallprompt', e => {
    installPrompt = e;

for iOs, you could create a layer,  with a notice message for installation

Desktop Apps

Manifest Shortcuts

  "name": "PlayerFM",
  "start_url": "https://app.playerfm.com",
  "shortcuts": [
      "name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later",
      "icons": [
          "src": "/icons/play-later.svg",
          "type": "image/svg+xml",
          "purpose": "any"
      "name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions",



Simple registration with Google, Facebook or iCloud Account (OAuth, Auth0)


Payment API 💳


Simple payment with once deposited information

(Apple Pay, Google Pay)


Message 💬 Event

Communication between client and Service Worker


self.addEventListener('message', messageEvent => {
  if (messageEvent.data === 'clean up caches') {
    trimCacheAsync(imageCacheName, 50)
    trimCacheAsync(pagesCacheName, 30)
navigator.serviceWorker.controller.postMessage('clean up caches')


Service Worker

Message 💬 Event

Communication between Service Worker and client


const respondTo = async ({ req, clientId }) => {
    const client = await self.clients.get(clientId);
    client.postMessage("Hello JAB 2020, it's amazing");
  return caches.match(req);
navigator.serviceWorker.addEventListener("message", (evt) => {

Browser / App


📱PWA Features

gives native Feeling

  • Geolocation
  • Push Notification
  • Offline / Online
  • Background Sync
  • Sharing
  • File Access
  • Payment API
  • Bluetooth API
  • and much more...

based on the Web API


  • PWA ->  becomes the native Android app during installation
  • many Android apps can be replaced as PWA

Publish App

🛠 Tools

(App Store, Google Play Store)

  • PWA Builder (Microsoft)
  • Apple Configurator 2

  • App Launcher Android - PWA Certified Url

  • TWA (Trusted Web Activity) Google Play Store

App Store   

Google Play Store 👆

  • Guidelines must be followed
  • not every app can be published in the store


Trend goes to PWA 📈

Companies offer a Native App and a PWA at the same time:

  • Google Maps, Pinterest, Twitter, Airbnb, Tinder
  • Uber (Desktop First)



  • Shopware
  • Magento


Companies are already replacing Native Apps


Reasons are:

  • easier maintenance
  • no updates for the App Store
  • "only" simple replacing files on the server



Feedback Assistant from App as a PWA

or your Website with a simple Service Worker for caching or more features?



Google Workbox

Google PWA Training:


Maximiliano Firtman @firt


Books 📚:

Jeremy Keith. “Going Offline”

Dean Alan Hume "Progressive Web Apps"

Tal Ater "Building Progressive Web Apps"

Questions?  🧐

📬 info@mittl-medien.de

Twitter: @mittlmedien

Thank You  😅

Progressive Web App (PWA) - Why should you use this technique, which possibilities do you have?

By Robert Mittl

Progressive Web App (PWA) - Why should you use this technique, which possibilities do you have?

  • 857