Introduction to Progressive Web Apps:

Introduction to PWA Architectures Migrate an existing site to PWA


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

Introduction to PWA Architectures:

Migrate an existing site to PWA

1. Move to HTTPS

2. Use caching strategies for perf and offline

3. Implement an app shell architecture

4. Incorporate "Add to Homescreen"

5. Add Push Notifications, Payment API, Credentials API, etc. (if relevant).

· We can implement the steps progressively.

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

· Then we can cache your site's static assets using the service worker and cache API. This can improve the performance of our 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 we are building a modern single-page app, then we are probably using something similar to an app shell already.

· Using an app shell is the recommended approach to migrate existing apps and structure our 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 we 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 our web experience.

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

What is an application shell?

Here is an example of app shell. The two screens on the left live in the app shell and contain all the common navigation parts. The screen on the right shows the content, which has been loaded from the network, displayed in the app shell.

If this looks familiar, it's essentially a single-page app.

The service worker can cache this locally to make it available offline. Then, as the user navigates around the app, the shell loads the content.

The app shell plus dynamic content model keeps UI local and pulls in content dynamically. This greatly improves app performance and works really well with service worker caching as a progressive enhancement. It's the secret to reliably good performance.