Progressive web apps

Progressive Web Apps are:

Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenant. Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next. Connectivity independent - Enhanced with service workers to work offline or on low quality networks. App-like - Use the app shell model to provide app-style navigations and interactions. Fresh - Always up-to-date thanks to the service worker update process. Safe - Served via TLS to prevent snooping and ensure content hasn’t been tampered with. Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them. Re-engageable - Make re-engagement easy through features like push notifications. Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. Linkable - Easily share via URL and not require complex installation.

 

Build and Run it

npm install npm run build-shell cd dist npm install node-static -g static open http://localhost:8080/dashboard.html

This builds the App Shell version.

To build the Page Shell version: replace npm run build-shell with npm run build-page.

Architecture

App Shell

Total size is smaller Initial load requests three files: login.html, shell-1234.js, 3456.js Initial load needs to load: Shell + Router + content The shell is visible earlier than with Page Shell approach.

Page Shell

Total size is bigger (i. e. dashboard content is in dashboard-1234.js and 4567.js) App takes longer to be offline ready. Initial load requests only two files: login.html, login-2345.js Initial load needs to load: Shell + content The shell + content is visible earlier than with App Shell approach.

A hybrid approach can be used where shell and content is separated in two requests (see admin page as example). This makes sense when content is much bigger than shell and shell should be visible earlier.