Taking risks

What did we learn about PWA?

Why PWA?

  • Need for a smartphone app
    • missing resources in Android team
  • Desktop app
  • Improve speed of webapp

Is it really an app?

  • No
    • It's still a website
  • But
    • Native App icon in the app drawer
      • Android
      • Windows
      • Linux
    • Android does actually create a APK and install the PWA
    • No browser wrapper
      • Forward / Back buttons
      • Url input
      • ...

Desktop PWA

export const ArrowBlock = styled.span`
  display: none;
  flex: 0 0 auto;
  @media(display-mode: standalone){
    display: inline-block;
    margin-top: 3px;
  }
`

Steps

  • Installation process
    • Very critical 🔥
  • Improve speed with caching
    1. Get cache and return
    2. Get data from backend
    3. update cache
    4. Send updated data to client
    5. update client
  • Handle online / offline
  • Download plan and assets
  • Show downloaded plans on offline
  • Insert update data in offline mode
  • Sync data
  • Sync overview
  • Installation process
    • Very critical 🔥
  • Improve speed with caching
    1. Get cache and return
    2. Get data from backend
    3. update cache
    4. Send updated data to client
    5. update client
  • Handle online / offline
  • Download plan and assets
  • Show downloaded plans on offline
  • Insert update data in offline mode
  • Sync data
  • Sync overview

Architecture

  • Service worker
    • All self written
    • Handles cache
    • Works like a proxy
    • Communication via messages
  • Database
    • IndexedDb wrapper pouchDB
    • 100% nice but nearly the only option

Encryption 🔐

  • Cache
    • Encrypt whole responses with cryptoJS
    • Generate crypto password via backend and unique browser key.
  • Database
    • use pouchDB plugin
    • Not possible to make queries on encrypted data
    • 2 databases
      • 1 for queries (all ids, types, connections)
      • 1 for data

Dev troubles

  • Dev server with hot reload
    • Update serviceworker
  • PouchDb update document workflow
  • Dev tools
    • Cache last change
      • Cannot set
      • Cannot read
  • Testing changes

Preview desktop app

Questions?

Taking risks

By masterwendu

Made with Slides.com

Taking risks

  • 42

More from masterwendu