What is a Progressive Web App (PWA) ?
Progressive Web App
How does a PWA work?
The requirements for a PWA can be quickly added to almost any web application. All you need to do is the following:
- Deploy it to a public web server and force HTTPS.
- Create and include a JavaScript file with code to cache network requests.
- Create and include a web app manifest.
PWAs Features:
- The Instant Loading PRPL Pattern:
- Push critical resources for the initial URL route.
- Render initial route.
- Pre-cache remaining routes.
- Lazy-load and create remaining routes on demand.
- Preload informs your browser to load a resource you know you’ll eventually need.
PWAs Features:
- HTTP/2 to “push” assets to the browser without the user having to ask for them.
- Code-splitting and lazy-loading for loading of application pages/features.
- Installed on the home screen as an app icon
- Remove browser “chrome” / navigation creating a full-screen experience
- Offline access
- Push notifications
A Deeper Dive – What is a PWA?
PWAs are the next step in how we interact with the web. There are numerous explanations why progressive web apps are enormously popularity; much of this is because of the slow speed faced by users. Users problems include storage space, internet connectivity, frequent updates, high data consumption and high cost of native apps. Progressive web apps solve all these problems.
Native apps create multiple platforms for Android and iOS, PWA words on all devices. By integrating PWA technology into your website site you can enhance your appearance, speed and retain users.
Preload Critical Resources
Preload is a declarative fetch that requests your browser to cache resources as soon as possible. Preload critical resources works by adding a tag with rel=”preload” to the head of your HTML document. The browser setting are altered to priority level to cache elements needed.
Pre-Cache Assets
Service workers can retrieve assets directly from the cache rather than the server on repeat visits. This not only allows users to use your application when they are offline, but also results in faster page load times on repeat visits. Using a third-party library to streamline the process of generating a service worker. Third party libraries offer tools that create and maintain a service worker cache asset.
On its own, the HTTP cache is not enough, so we use service worker. Cache Storage API when called from service worker provides complete control over the contents of the cache. Replacing a combination of HTTP headers and the browser. Inserting versioned URLs to the Cache Storage API cache, the browser avoids an additional network request. Service workers and the Cache Storage API use asynchronous programming, to represent the cached result of async operations.
The “A” in PWA stands for “app,” but there is a contrast between PWA’s and native mobile applications.
PWA’s are not a universal replacement for native apps. The experiences of a good app is to bring people back time after time. And if your native app or your PWA experience meets this bar then it both should be considered.
The NATIVE APP experiences tend to have some common characteristics:
- They address high frequency use in financial markets,
- They leverage low level hardware integrations or operating system features not supported by the web and/or are focused on doing so in the future.
- There is a need (or perceived benefit) for heightened security.
If your existing native app doesn’t check at least one of these boxes above then we recommend reconsidering whether or not you should use a PWA instead of a Native App.
Native apps or vanity apps – are the most likely candidates to be replaced by PWAs over time.
There are two major components of a PWA.
App Manifest – is a JSON file that differentiates the app, how to launch the app (standalone, full-screen, in the browser etc), and any such related information. It’s located in the root of your app. A link to this file is required on each page that must be rendered.
Service Worker – is where most of the functions occur. It is JavaScript code which functions as alternative code solely responsible for diverting and answering to a network call. A substitute easily programmed. The application must be HTTPS to secure all data. The service worker collects the actual response, including all HTTP. This means that your application can simply make network requests and process the response without any specific code to handle the cache.
PWAs vs. Downloaded Apps
Misconceptions about PWAs:
- PWA’s only work in Chrome FALSE
- Not as smooth as native apps FALSE
- No full-screen mode FALSE
- Building offline-first isn’t worth FALSE
Progressive Web Apps are a sufficiently established technology that big players like Forbes and AliBaba have adopted them with great success.
Native App features that PWAs can’t duplicate.
- Highly restrictive access to different hardware sensors
- Alarms
- Phonebook Access
- Modify System Settings
PWA features already exist in some of the more popular JavaScript framework application generators. HTTPS is required. Installing static web apps that access dynamic data has been vastly simplified by CDNs, AWS, CloudFoundry, and Heroku.
Generate a manifest.json file and icons for your PWA using http://realfavicongenerator.net. For online/offline data syncing, you can use solutions like IndexedDB, PouchDB, or with the Background Sync API. This feature is available in Chrome desktop and Android since version 49.
Angular
You can add service worker support and app shell for offline Angular 2+ applications. Angular team is taking the PWA challenge to heart. Ionic is a framework that leverages Angular to create native apps with web technologies. It leverages Cordova to run the app on phones but also has built-in service worker and manifest support if you want to deploy your app to the web.
React
When using Create React App (version 1.0+), a manifest is generated, and an offline-first caching strategy service worker. If you already have a React application, Create React App’s 1.0 release notes tell you how to turn your app into a PWA. Preact is an alternative implementation of React that’s built for speed. It’s a much smaller library that implements the same ES6 API, components, and Virtual DOM support as React. Using it instead of React means your application will have less JavaScript to download, parse, and execute.
Vue.js
Build in PWA with Vue CLI 3.x. There is the @vue/cli-plugin-pwa plugin. You run Vue add PWA to convert to a progressive web app. Vue.js project wizard choose ‘Manually select features’. Then choose to include Vue Router and Babel. Next, we add libraries for styling and making HTTP requests. We use Boot-strapVue for styling, Axios for making requests, Vue-Filter Date Format for formatting dates and Vee-Validate for form validation. After all the libraries are installed, we can start building our app.