Going offline

Build a progressive web app (PWA)

24/05/2020

This series of articles is going to cover what I learned over a 6 month period building a PWA.

Scenario

Imagine Company A are in the job recruitment business. They have an existing Vue app they use to manage job applicants. The app can create applicants, notify them of updates and do all the usual admin type activities you'd expect.

The business has a requirement to allow users/recruiters to do interviews in person. In these interviews the recruiters will normally go to a coffee shop and sit down with the applicants, ask some questions and take down some basic details on their tablets/laptop. WIFI and network connections will sometimes be unreliable, but recruiters will still need to view a profile and submit a form.

There are plans to build a native mobile app eventually but Company A doesn't have the resources right now, but want the functionality available to staff ASAP. In this scenario we can leverage Progressive Web App (PWA) technologies to create a native app-like user experiencein the web applications.

Some assumptions:

  • The app is be mostly used on desktop with a solid internet connection
  • The user will use the app on mobile devices with a poor or no connection
  • The app will only support Chrome and modern browsers
  • Only certain functionality will be available offline
  • The app will detect internet connectivity
  • API data will be saved to the app to be access offline
  • Task performed offline will be saved and synced when online
  • The app need to authorise users
  • The app is used internally by staff
  • What we're
  • Service workers & Workbox
  • Index DB Available storage
  • Authorisation
  • Network detection