Recommended patterns for PWAs:

All in all, we recommend four possible approaches PWAs can be built with any mixture of server-side rendering and client-side rendering that best fits our needs.


1. Introduction to Progressive Web apps

2. Why Progressive Web Apps?

3. Objective of the Project

4. Advantages of Progressive Web App

5. Advantages of PWA over Native Apps

6. Benefits of Progressive Web App

7. Use Cases

8. The Future of PWA

9. Software Requirements

10. Reference


12. Introduction to PWA Architectures

13. Introduction to PWA Architectures

14. Using libraries to code service workers

15. Add to Homescreen

16. Push Notifications

17. Payments and Credential Management

18. Recommended patterns for PWAs


20. Code Base

21. Serve the app shell from the cache

22. Automate development tasks

23. Creating a package.json

24. Customizing the init process

25. Managing dependency versions

Recommended patterns for PWAs

In recommended order:

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

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

3. Server-side rendering full page (full page caching).

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

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.

Ø 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 our needs.