What exactly are Progressive Web Apps (PWAs)?PWAs are nothing but websites that look and feel like native mobile apps. The application aims to combine features offered by modern browsers with the benefits of a mobile experience. PWAs includes push notifications, offline support, background synchronizing support, and other modern features. Plus, they access your location, webcam and other details that normal native apps seek. Of course they ask your permission before accessing them.
What makes Progressive Web Apps so special?According to Google, PWAs are,
ProgressiveWorks for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
ResponsiveFits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independentEnhanced with service workers to work offline or on low-quality networks.
App-likeFeels like an app, because the app shell model separates the application functionality from application content.
FreshAlways up-to-date thanks to the service worker update process.
SafeServed via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
DiscoverableIs identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
Re-engageableMakes re-engagement easy through features like push notifications.
InstallableAllows users to add apps they find most useful to their home screen without the hassle of an app store.
LinkableEasily share the application via URL, does not require complex installation.
How does a Progressive Web App work?PWAs are enhanced via modern web technologies to give an app-like experience. The apps will get a separate window and shortcut on your taskbar (on Windows 10 and Chrome), or an icon on your home screen. Technologies used by PWAs include,
- Cache API and IndexedDB for quick loading
- Service Workers and push notifications for background tasks like synching and sending notifications when the app is not in use
- Fetch API for easy data request
- Web App Manifest file for providing name, icon, author, and description
- HTTPS for security
Popular companies that have embraced Progressive Web AppsSome of the websites using PWAs are Forbes, Flipkart Lite, Alibaba, The Weather Channel, The Washington Post, Fandango, Jumia Travel, Lancôme, Ola, Twitter Lite, Virgin America, JioCinema, OLX, Wego, Flipboard, Telegram, Pinterest, BookMyShow, and Trivago.
Are Progressive Web Apps really the future of the web?According to Google I/O 18, Progressive Web Apps is coming to desktop with the new Chrome67. So the subject got way hotter. This is the popularity trend for Progressive apps from June 2017 to May 2018 according to Google Trends, Numbers depict that, a value of 100 is the peak popularity for the term, 50 means that the term is half as popular and score of 0 means there was not enough data for this term. The following reasons will convince you why Progressive Web Apps will dominate in the future.
- Low budget
- Lightweight and easy to create
- Cross-platform compatibility
- Easy installation
- Boosts conversion
- Competitive advantage
- Easy to expand
- Quick installation on any device
- Includes push notification options
- Reduces data usage and loading time
WordPress + Progressive Web AppsWordPress does not completely support creating progressive web apps in their core application. However, the Jetpack team is committed in the direction of adding Progressive Web App functionalities in the future. Recently a PWA plugin developed by XWP, Google And Automattic was launched in the WordPress plugin directory. According to the plugin description, it serves as a place to implement support for Service Workers, Web App Manifest and HTTPS in WordPress with the intention of being proposed for core merge, piece by piece. So it is an indication that Progressive Web Apps are also entering the WordPress core.
Top technology skills for PWA developmentThese are some of the top technology skills you need to be well versed to build a progressive web app.
ReactJsReact is managed, supported and used by Facebook. With billions of people using it daily, we can rest assured that the framework is rigorously tested. Below are some resource that will help you get started to build a PWA with Reactjs
- How to build an A+ Progressive Web App with React
- How To Build Progressive Web Application Using React Js
AngularJS is an open-source front-end framework mainly maintained by Google. The framework has seen tremendous growth and many established companies are bringing them behind their corporate firewalls. Below are some resource that will help build a PWA with AngularJs
- Angular 5 Service Worker
- Building PWAs with Angular 5
- How to build Progressive Web Apps with Angular
- Create an Angular 5 PWA With a Perfect Lighthouse Score
- Building PWAs with Vue.js
- PWA template for vue-cli based on the webpack template
- A progressive Web application with Vue JS, Webpack & Material Design [Part 1]
Other useful resources
- Google I/O ’18 PWAs: building bridges to mobile, desktop, and native
- Google’s Progressive Web Apps homepage, step-by-step code lab, and instructor-led PWA training and Your First Progressive Web App
- Pluralsight’s Getting Started with Progressive Web Apps
- Why “Progressive Web Apps vs. native” is the wrong question to ask
- 2018 State of Progressive Web Apps
- Live updates of Progressive Web App browser support