DEV Community

CodingBlocks

Should your web app be a progressive web app (PWA)?

We dig into the nitty gritty details of what a Progressive Web App (PWA) is and why you should care, while Allen isn’t sure if he is recording, Michael was the only one prepared to talk about Flo and the Progressive Price Gun, and Joe has to get his headphones.

Are you using your podcast player to read these show notes? You can find this episodes full show notes and jump into the conversation over at https://www.codingblocks.net/episode104.

Sponsors

  • Clubhouse – The first project management platform for software development that brings everyone on every team together to build better products. Sign up for two free months of Clubhouse by visiting clubhouse.io/codingblocks.
  • Datadog.com/codingblocks – Sign up today for a free 14 day trial and get a free Datadog t-shirt after creating your first dashboard.
  • Stellares.ai – The AI-powered talent agent that does all the work and screening for you to find your next great opportunity outside of your network. Find the job that’s just right for you.

Survey Says

Anonymous Vote
Sign in with Wordpress
What's your favorite time to listen to podcasts?
  • During my commute. What else am I supposed to pay attention to?
  • While I work. I need an escape.
  • While I exercise. Nothing better than staying physically _and_ mentally fit.
  • Every. Waking. Moment.
  • I wish my schedule was that routine.
vote

News

  • Thank you to everyone that took time out of their busy day to leave us a review:
    • iTunes: FreshSliceOfPie, ironluis2u, VietKid2
    • Stitcher: Wesley Coffman, AndrewSucksForTaking3Yrs, herbaderp
  • We met Corey Weathers from Twilio at the Orlando Code Camp. Be sure to check out his live coding sessions on Twitch. (Twitter, Twitch)

PWA – Straight Outta Chromium

What are Progressive Web Apps?

In short, PWA are websites that behave like apps:

  • Installable, offline support, push notifications.
  • Now featured in the Google Play Store and Windows Store.

PWA are getting better all the time

  • Starting in Chrome 73, Desktop Progressive Web Apps are now supported on all desktop platforms, including Chrome OS, Linux, Mac, and Windows.

Why?

  • Works offline.
  • Faster.
  • Cheaper to support than native apps, not tied to an app store.
  • Convenient to use (i.e. it has an app icon on the desktop/Start Menu)
  • Google likes it.
  • Websites get more usage than installed apps.
  • Has access to underlying OS features.
  • Allows you to get your app in some app stores.
  • Why not?

There is a list of requirements that Google has published, that define whether your site is a PWA. Google coined the term, and published the checklist, but some other major organizations have their own high level descriptions that differ slightly. The gist is largely the same though – PWAs are websites that behave like apps and work well on any device capable of browsing the internet.

What do we mean by “progressive”?

In this context, “progressive” refers to this overall strategy to progressively enhance the user experience based on the abilities of the device at any given time. Another way to say that is that the websites gracefully degrade – based on factors like screen resolution and internet connection.

Some popular PWA

What else?

Additionally, Google emphasizes the terms: fast, integrated, reliable, and engaging (F.I.R.E.)

Mozilla emphasizes discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe.

There are some interesting words in there…

  • What does discoverable/installable mean?
    • Chrome/Android will prompt you about installing a PWA.
    • To install using Chrome, go to Menu -> Install {PWA App Name}
      • Looks like an electron app!
      • Gives access to things like the notification center in Windows
  • How does linking work?

PWA Requirements

Google has published a set of requirements for determining whether something is, or is not a Progressive Web Application. Unlike JAMstack, most of the rules are clearly defined and unambiguous. Because of the strict rules, you can run Lighthouse against your app to see if Chrome will treat your web app like a PWA.

Lighthouse

  • Lighthouse has audits for performance, accessibility, progressive web apps, and more.
  • Available from the Audits tab in Chrome Dev Tools.
  • Add it to your CI pipeline as a web service using Docker. (GitHub)
  • Includes great commentary on why each point matters, and how to fix.

Baseline requirements:

If a website misses any of these qualifications, then it is not a progressive web app! There are four categories: Fast and Reliable, Installable, Optimized.

Fast and Reliable
  • Page load is fast on mobile networks.
  • Current page responds with a 200 when offline.
  • start_url responds with a 200 when offline.
    • Important: A 200 response code is required, but it doesn’t mean your app has to be valuable in this state. Meaning you could just show a “You’re offline” screen.
Installable
  • Use HTTPS.
    • Why https? Security/Google and some browser features require https, including Service Workers.
  • Registers a service worker that controls the page and start_url.
    • Service Worker is a type of JavaScript web worker that runs in a separate thread from the website.
    • The major operations you usually see happening in service worker JavaScript file are Fetch and Cache.
    • Common to use a service worker as a network proxy and cache responses so you can return them if the network is not available.
      • Service Worker example from qit.cloud. (GitHub)
    • There are only a few important events:
      • install – Initialize access to cache, possibly pre-cache some files.
      • activate – Here you can manage caches such as migrate or delete old caches.
      • fetch – Respond to requests: either return a cache hit or attempt to make the network response, cache it (if successful), and then return the it.
    • You can view the cache(s) in the Application tab in Chrome Dev Tools.
    • Service workers have a few restrictions:
      • You can’t edit the DOM from inside a worker (but you can postMessage() that results in updates).
      • You can’t access some properties of the window object.
        • Non-blocking web sockets, data storage are fair game though!
    • Service workers can receive push messages from a server when the app is not active. (!)
      • There are some variations in how the different OSes deal with this, but it does mean that you’ll need to check messages whenever network becomes available, which you should do anyway.
  • Web app manifest meets the install-ability requirements:
    • Your web page includes a <link rel="manifest" href="/manifest.json"> tag telling the browser where it can find your manifest.
    • The manifest describes how your web app should behave when “installed”. The manifest includes things like app name, colors, icons, start url, and more.
    • You can view the App Manifest in the Application tab of Chrome Dev Tools.
PWA Optimized
  • These are about providing a nice and safe user experience
    • Redirects HTTP traffic to HTTPS.
    • Configured for a custom splash screen.
    • Sets an address-bar theme color
  • Content is sized correctly for the viewport.
    • The audit passes if window.innerWidth === window.outerWidth
  • Has a meta tag for width or initial-scale, such as <meta name="viewport" content="width=device-width, initial-scale=1">.
    • The width=device-width key-value pair sets the width of the viewport to the width of the device.
  • Contains some content when JavaScript is not available.
    • In this state, your app doesn’t have to be useful, just informative if JavaScript isn’t available.
    • From Lighthouse: “Your app should display some content when JavaScript is disabled, even if it’s just a warning to the user that JavaScript is required to use the app.”
Manual checks

These are items that lighthouse cannot check for you but are still important are require you to manually check.

  • Site works cross-browser.
  • Page transitions don’t feel like they block on the network.
    • Transition immediately to the next page, or show a “loading” (hint hint, static files are great here).
    • Google mentions a “skeleton screen”.
  • Each page has a URL.
    • Important for linking/sharing.

Why PWAs?

PWAs offer you additional benefits over “normal” websites, like showing up in app stores and being installable to the user’s home screen. Additionally, most of the requirements are best practices you should be doing anyway. So really the question is why wouldn’t you go the extra mile to make your website a PWA?

Resources We Like

Tip of the Week

  • What if dates and times were simpler? That’s the aim of the International Fixed Calendar. (Wikipedia)
  • PWA Builder – Quickly and easily turn your website into an app! (pwabuilder.com)
  • RealFaviconGenerator.net – Create favicons for your site for every platform. (realfavicongenerator.net)
  • Use a + as a “new” email address so that you can filter your inbox and track how if your email was shared. For example, if your email is johndoe@example.com, use johndoe+somewebsite@example.com. Works great with Gmail!
  • Snap your windows – Use the Windows Logo Key + the arrow keys to move your window to the side or even a corner of your screen. (support.microsoft.com)

Episode source