Progressive Web Apps are the experiences combining best of both worlds - web and apps. They require no installation and are useful to users from the first browser visit.
The Application Shell Model architecture is one of the most common ways to build Progressive Web Apps. It separates the shell of UI and the data. Refer the below example.
What is App Shell?
App shell architecture separates the core application template UI from the data. All of the UI and template is cached locally using a Service Worker so that on subsequent loads, the PWA only needs to retrieve the necessary data, instead of having to load everything.
Service Worker (SW)
Service Worker is a script that browser runs in the background which includes features like Periodical Background Sync and Push-Notification.
- Install: We register the SW in page's JS, which causes the browser to install SW in the background and caches static assets.
- Activation: Handle old caches
- Fetch: To receive
fetchevents for the scope of service worker in case of network request from the page
- Terminate: To save the memory
Web App Manifest
Defines the behaviour of your Web Application and includes app name, short_name, start_url, icons, background color, display, orientation, scope, theme_color.
What are PWA?
- Progressive: Works for all the users, regardless of browser choice and easily shareable via URL using Web App Manifest
- Web: responsive, served via HTTPS, works offline using AppShell Architecture
- App: Feels like an app, supports Push Notifications, installable to the home screen using Service Workers