Progressive Web Apps are just are regular web pages, you can view them like a website on a PC or laptop. The magic happens when you open PWA on a mobile device. On mobiles they just appear like applications which are downloaded from app stores. A PWA is a regular website it just has a link, no download required!!. You can also place it on Mobile’s home screen, it will behave just like normal applications and send notifications too. Key features of PWA’s are:
- Progressive — Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
- Responsive — Fits any form factor: desktop, mobile, tablet, or any other different screen-sized device.
- App-like — Feels like an app, because the app shell model separates the application functionality from application content.
- Fresh — Always up-to-date thanks to the service worker update process.
- Safe — Served via HTTPS to prevent snooping and tempered content.
- Discoverable — Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it
- Re-engageable — Makes re-engagement easy through features like push notifications.
- Installable — Allows users to add apps they find most useful to their home screen without the hassle of an app store.
- Linkable — Easily share the application via URL, does not require complex installation.
What will you need?
1) Service Workers:
A service worker is a type of web worker. It’s mainly a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.
Because it runs separately from the browser’s main thread, service workers are independent of the application they are associated with. This has some pros and cons:
- Because the service worker is asynchronous, synchronous XHR and local storage cannot be used in a service worker.
- Service worker can receive push messages from the server even when the app is not active. This helps the app show notifications to the user even when the app is not opened in the browser
- Because the service worker has a different flow than browser’s main thread, it can’t access the DOM directly. To communicate with the page, the service worker uses the
postMessage()method to send data and a "message" event listener to receive data.
How it works:
Service workers enable applications to control network requests, cache those requests to improve performance, and provide offline access to cached content.
Service workers depend on two APIs to make an app work offline: Fetch (a standard way to retrieve content from the network) and Cache (a persistent content storage for application data).
2) Application Shell:
The application shell architecture is a way of building a PWA, which instantly and reliably loads on user’s screen similar to native applications.
The app “shell” is the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits. Application shell is not loaded from the network every time the user visits, only necessary content is needed from the network.
For single-page applications with JavaScript-heavy architectures, an application shell is a go-to approach. This approach relies on aggressively caching the shell (using a service worker) to get the application running. Next, the dynamic content loads for each page using JavaScript. An app shell is useful for getting some initial HTML to the screen fast without a network.
Benefits of Service Worker + Application Shell:
- Fast and Reliable Performance — Revisits are extremely quick. Static assests and UI (ex. HTML, CSS, JavaScript, Images etc) are cached on first visit so they load instantly on revisits. Content may be cached on first visit but is loaded when needed.
- Native-like interactions. — By adopting the app shell model, you can create experiences with instant, native-application-like navigation and interactions, with complete offline support.
- Economical use of data — Design for minimal data usage and be judicious in what you cache because listing files that are non-essential (large images that are not shown on every page, for instance) result in browsers downloading more data than is strictly necessary. Even though data is relatively cheap in western countries, this is not the case in emerging markets where connectivity is expensive and data is costly.
Conclusion:
Progressive Web Apps are viable alternative to hybrid or native apps for many companies where they only have to focus on one PWA instead of many native platform which significantly reduces development & maintenance time and cost. Since, the technology is new all browsers do not support it fully yet. We will surely see more support in future as the technology gains popularity among users and developers. But for now if not complete, is a low cost alternative to native apps.