1 of 23

Introduction to PWA Architectures

Progressive Web Apps

1

Progressive Web Apps

2 of 23

Progressive Web Apps

3 of 23

Migrate an existing site to PWA

Move to HTTPS
Use caching strategies for perf and offline
Implement an app shell architecture
Incorporate "Add to Homescreen"
Add Push Notifications, Payment API, Credentials API, etc. (if relevant)

Progressive Web Apps

Building a PWA does not mean starting from scratch. You can implement the steps progressively.

First, you need to secure your connection. Service workers require HTTPS to keep malicious scripts out. However, given the importance of security and privacy, you should be using HTTPS anyway.

Then you can cache your site's static assets using the service worker and cache API. This can improve the performance of your app and enable offline experiences.

The next step is to migrate to an app shell. An app shell separates dynamic content from the logic used to render it. If you are building a modern single-page app, then you are probably using something similar to an app shell already.

Using an app shell is the recommended approach to migrate existing apps and structure your PWA. This architecture provides connectivity resilience and it is what makes a PWA feel like a native app to the user, giving it application-like interaction and navigation, and reliable performance.

Once you have an app shell, adding a manifest file and meta tags enables "Add to Homescreen". Adding an icon to the home screen makes it easier for users to return to your web experience.

Finally, you can enhance your app with features such as push notifications, integrated payments, and automatic login. These are built on the same underlying framework that enables PWAs.

---

4 of 23

What is an application shell?

Progressive Web Apps

5 of 23

Architectural patterns

and caching strategies

Progressive Web Apps

6 of 23

Server-Side Rendering (SSR)

Server returns a complete page
Page loads CSS, JavaScript, and all content
Page updates reload the DOM

Progressive Web Apps

7 of 23

Client-side rendering (CSR)

Server returns "template page" with CSS & Javascript
JavaScript makes request to get content, adds to page
Page updates reload only the dynamic content

Progressive Web Apps

8 of 23

Caching SSR

Cache common files: CSS, Javascript, common images
For offline use

If server renders static pages, cache them
Add code for offline mode

Progressive Web Apps

9 of 23

Detecting offline use

if (navigator.online)

or

navigator.addEventListener('online', …)

navigator.addEventListener('offline', …)

Progressive Web Apps

10 of 23

Caching CSR

Cache core code, CSS, and template page
Add code to:

Cache data using Cache API or IndexedDB
Detect when app is offline and save user actions for later replay

Progressive Web Apps

11 of 23

Fine-Tuning your App Shell

Progressive Web Apps

12 of 23

Where does the data live?

Progressive Web Apps

13 of 23

Combined strategies

Cache first, Network fallback
Network first, Cache fallback
Network only
Cache only

Progressive Web Apps

14 of 23

Special cases

Cache first, Network fallback
Network first, Cache fallback
Cache-Network race
Network only
Cache only

Progressive Web Apps

15 of 23

Using libraries to code service workers

sw-toolbox library

Loaded by SW at run time

Applies caching strategies to URL patterns

Installs via Bower, npm, GitHub

sw-precache

Integrates with build process

Generates SW code for caching

Maintains resources in app shell

Hooks into build process (Gulp, Grunt)

Progressive Web Apps

The good news is we provide the code for these caching strategies. These libraries automate many of the details for you while also following best practices and avoiding common gotchas.

sw-toolbox is an open-source library on GitHub that builds on top of Service Worker, Cache and Fetch. It implements each of the strategies we discussed and makes them easy to integrate into your app.

sw-precache libraries is an open-source tool, also on GitHub, that can generate a service worker script for you. You can call it from the command line or integrate it into your build process.

You can use these tools to simplify your implementation. They support all of the standard caching strategies, or you can add your own, and include control over options such as maximum cache size and item lifetimes. I highly recommend you take a look at them, even if you want to build your own solution.

---

16 of 23

Completing your PWA

Progressive Web Apps

17 of 23

Add to Homescreen

Name
Icon
Startup URL
Display mode

Orientation
Background color
Theme color

Manifest file for Android
<meta> tags for others

These specify:

Progressive Web Apps

18 of 23

Push Notifications

App subscribes client to a push service
App receives client token
Server sends request to push service using token
Push service sends message to client
Service worker wakes up and receives push event
Service worker displays a notification

* Even when app & browser are closed!

Progressive Web Apps

19 of 23

Payments and Credential Management

Payment API
Credential Management API

Progressive Web Apps

20 of 23

Building high-performance PWAs

Progressive Web Apps

21 of 23

Recommended patterns for PWAs

Client-side rendering full page (full page caching, potential for JSON payload bootstrapping via server)

In recommended order:

Application shell (SSR) + use JavaScript to fetch content once the app shell is loaded

Application shell (SSR both shell + content for entry page). Use JavaScript to fetch content for any further routes and do a "take over"

Server-side rendering full page (full page caching)

Progressive Web Apps

All in all, we recommend four possible approaches.

The best option is a combination of server-side and client-side rendering. Your server can draw the first page quickly, then JavaScript takes over and renders future pages using dynamic data. This also works for users with browsers that don't support Service Worker.

The next best option is a pure app-shell, single-page app approach. You should cache the app shell. You can speed this up using HTTP streams to begin rendering content as it comes in.

Option three is to use server-side rendering and cache everything that you can.

Finally, we come to the single-page app that renders all its own content. You might be surprised this is at the bottom of the list, but it's often slower to the first render than server-rendered apps. That's due to the time it takes to load the JavaScript before rendering begins. The difference between this app and the app shell is the app shell can render at least the navigation instantly and often contains default content.

Before I go, I want to emphasize two things.

First, this is our recommended approach, but there may be use cases for each pattern. PWAs can be built with any mixture of server-side rendering and client-side rendering that best fits your needs.

Second, the textbook that accompanies this video has a detailed chapter on PWA Architectures, with updated advice.

---

22 of 23

Real world examples of PWA's

Offline Wikipedia app, a demo by Jake Archibald

Flipkart Lite, an e-commerce company

Voice Memos, a sample web app that records voice memos

AliExpress, one of the world's largest e-commerce sites

BaBe, an Indonesian news aggregator service

United eXtra, a leading retailer in Saudi Arabia

The Washington Post, America’s most widely circulated newspaper published in Washington, D.C.

Progressive Web Apps

23 of 23

Resources

Progressive Web Apps