Introduction to PWA Architectures Migrate an existing site to PWA
TABLE OF CONTENTS
7. Use Cases
20. Code Base
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.