Great book for getting a grip on what a progressive web app is. Provides guidance and tips on what to keep in mind as you develop a roadmap for your PWA.

#The technical definition of PWA

Progressive web apps are just “normal websites that took all the right vitamins.” HTTPS: A progressive web app must be served over a secure server using HTTPS. Service workers can only be used over HTTPS. This is the first step you need to take for your PWA. Service Worker: This new technology allows developers to control how a web browser handles its network requests and asset handling. Thanks to service workers we can create offline experiences in the browser. Web App Manifest: The manifest file is a short file that describes your PWA. It allows to define icons and metadata for your PWA. It also allows the PWA to be discoverable and installable.

#Cases for PWAs

It’s not an either native app or a progressive web app. It’s both together. You need a website. A PWA is your website, but better. If you have a website, you will probably benefit from a progressive web app.

If you make money from your website you should definitely convert to a PWA, since that can have a significant impact on revenue. The part of a progressive web app that will likely have the biggest impact for your users and your bottom line is performance. Even of you don’t think of your website as an “app”, the core features of a PWA will benefit any website.

Think less about making your PWA “being app-like”, and more about the experience you can create for your users. Being “app-like” is not a goal unto itself. A well-designed progressive web app will adapt to whatever the viewing context is.

Always remember: the goal isn’t to create a progressive web app. The goal is to create a better experience for your users and meet your business objectives.

#Service Workers

Service workers allow developers to explicitly define what files should be locally stored in the browser cache. This is sort of like the same way native apps work. It downloads all the files it need when it installs, and gets much faster because it doesn’t need to fetch those resources every time. Service workers allow something similar. Service workers shipped the first time with iOS 11.3. Service workers gives us the ability to store things offline and take over network requests so we can route them whatever way we deem best. You have to build web apps that are more resilient to whatever external network conditions your user may experience. Adding a service worker means you’re taking on the responsibility of managing the cache. Think about what you can precache in your application. But don’t just precache megabytes of data because you can, that’s irresponsible.

#Display modes for PWAs

When users add your PWA to their home screen, you can dictate how much browser chrome you want to show by using a display mode in the manifest file.

#There are four display modes:

  • browser
  • minimal-ui
  • standalone
  • fullscreen

You have to watch out with using the fullscreen mode, because you have no native back button etc. In standalone or fullscreen mode, you also have to watch out for losing the URL’s, because the display doesn’t have an address bar anymore.

#The manifest file

The manifest file is a simple JSON file describing a progressive web app—its icons, its colors, etc. You can treat different sections of your website as separate PWAs. Individual sections can have their own manifest files.

#The app shell model

Design a shell around your app with the recurring components: header, footer, navigation. If this is visible on every page in your app, it can be cached and render in a more performant way.

  • Web animations have reached a maturity level that make it possible to create the sort of polished interfaces that we expect.
  • Animations are now making use of the GPU to render smoothly and stutter free.
  • Animation is a necessary tool to help users understand the relationship between objects.
  • But keep in mind to use animation as an aid, not to show off.

#Native wrappers for PWAs

  • You can wrap your PWA in a native wrapper to allow for submitting to an App Store.
  • PhoneGap was the first type of native wrapper in 2008. These types of frameworks provide a web view inside a native application shell. Just keep in mind that there’s no code you can write to solve a mismatch between your business model and the constraints of a native App Store.

#Use a performance budget

Set a performance budget for your website, and stick to it. You can use Lighthouse to find out performance bottlenecks on your website. And you can also leverage WebPagetest to simulate performance under slower 3G connections. Remember that perceived speed matters more than true speed. How do you get a performance budget into your process?

#Push notifications for the web

Push notifications can be beneficial to both users and businesses, but only if they’re done well. They need to be personalized and timely to be useful, so figure out how you can create a tailored experience for your users. You can use push service provider to simplify the push notification logic you need to implement. Asking for permissions to send push notifications on the first visit is the same as someone asking to marry you on the first date. Be careful with when you are asking the user for permission.

#Push notifications requires careful consideration and planning

  1. You should only ask when you can be reasonably certain the user will say yes.
  2. Provide information on what the push notifications will do.
  3. Prompt the user for an action to indicate they want push notifications.
  4. Only ask the browser to she the permissions prompt modal if the user has indicated their interest.

#PWA-like technologies

There are three technologies sharing similar goals as progressive web apps:

  1. AMP
  2. The Credential Management API
  3. The Payment Request API

#Resources