@mittlmedien

Progressive Web App (PWA),

WHY 🤔?

POSSIBILITIES 🧐?

info@mittl-medien.de

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)

📱History

  • 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

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?

  • HTTPS
  • 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

Updates

  • with every change of the Service Worker
  • set an interval
navigator.serviceWorker.register("serviceworker.js")
  .then( (registration) => {
    setInterval( () => registration.update(), 86400 );
  });

Cache Strategy

  • Static files

  • Network first

  • Offline first

  • Network speed

Performance

  • 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");
    else
      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

 

 

 

 

🚫localStorage🚫

Push Messges

Android, Windows, MacOsx

👍

States are:

Foreground

Background

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

API

 

(Web Share Target API)

 

Web Share API

if (navigator.share) {
  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}

{visibilitychange)

 

The event could be triggered.

Lifecycle in iOS

  • 12.x 😟

  • 13.x 🙂

Manifest

<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

maskable.app/editor

Manifest

add to Homescreen

Custom Installation Button


installButton.addEventListener('click', e => {
    installPrompt.prompt()
})
let installPrompt
window.addEventListener('beforeinstallprompt', e => {
    e.preventDefault()
    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",

www.w3.org/TR/appmanifest/#shortcuts-member

Authentication

 

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')

Registration

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) => {
  window.alert(evt.data);
});

Browser / App

Serviceworker

📱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

whatwebcando.today/

WebAPK

  • 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)

 

Shopsystem:

  • 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

Examples
  • Appscope
  • pwa.rocks
  • findpwa.com

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

🕺🏻💃🏻

Reference:

Google Workbox

Google PWA Training:

https://developers.google.com/web/ilt/pwa/

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

Made with Slides.com

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

  • 984

More from Robert Mittl