PROGRESSIVE WEB APPS a.k.a PWA are the latest trend in the web development industry.
They are growing popular day by day as they make it easy to build web apps with JAVASCRIPT, HTML, and CSS and give web-based applications a native experience to the user.
I’ll discuss all the basic and advanced points that should be remembered during the development of PWAs.
First of all, there are critical capabilities that separate a progressive website from a traditional website. Progressive web apps must be able to do the following:
- Work with most browsers and devices (mobile and desktop) with a progressive codebase.
- Fit all screen and form factors using a responsive design.
- Leverage service workers to enable offline connectivity (https://techbeacon.com/offline-first-web-mobile-apps-top-frameworks-components) (HTTPS required)
- Provide an app-like experience that leverages re-engagement tools, such as push notifications
- Leverage a web app manifest to describe the used resources. At this point of time, JAVASCRIPT and its UI frameworks are the main players behind the PWAs popularity. Building progressive web apps with React
- It's managed and supported by Facebook, which uses the framework on its mrroom site and thereby demonstrates that the framework is rigorously tested with 1.18 billion users daily (https://s21.q4cdn.com/399680738/files/doc_presentations/FB-Q316-Earnings-Slides.pdf).
- React is the foundation for React Native (https://facebook.github.io/react-native/), which lets you easily port apps built with React to native apps. The UI consists of components. Those components can render in the browser, on the server, using Node.js, and inside apps, using React Native. In this way, the challenges of managing apps that need to be delivered to many different operating systems, browsers, and devices are resolved. Getting started: Using a Polymer template
- The Polymer templates (https://github.com/StartPolymer/progressive-web-app-template) use the PRPL pattern to optimize the delivery of the app to the device. Use it to:
- Push critical resources for the initial route
- Render the initial route
- Pre-cache the remaining routes
- Lazy-load and create remaining routes on demand Managing dependencies with Webpack Final Testing: Check your code with Lighthouse The first section, "Progressive Web App", returns the following analytics:
- App can load offline/flaky connections
- Page load performance is fast
- Site is progressively enhanced
- Network connection is secure
- User can be prompted to add to the home screen
- Installed web app will launch with a custom splash screen
- Address bar matches brand colors
- Design is mobile friendly Each of these sub-sections then breaks out specific technologies that you can add or modify to improve the performance of your progressive web app. For instance, the report for "App can load offline/flaky connections" provides details on:
- Has a registered service worker (and describes what a service worker is)
- URL responds with a 200 when offline The second section, "Best Practices", provides details on the following:
- Using modern offline features
- Using modern Protocols
- Using modern CSS
- Using modern JavaScript features
- Avoiding APIs that harm the user experience
- Accessibility The third section, "Performance", lists how fast it takes to load a single page from a responsive web app and how long each item in the page takes to load. It also includes tools to drill down into any issues causing slowdowns. The final section, "Fancier Stuff," examines whether the latest HTML5/JS features (http://caniuse.com/) are in use. The goal with Lighthouse is to both test your site and to give you the direction to fix the issues. Extra tools The above tools are a selection of the many different progressive web application tools our team has reviewed. A few extra tools that you might want to consider in addition to (or as a replacement for) the tools above include:
- AMP (Accelerated Mobile Pages)—Tools to guide image/JS compression to speed up your website. Google heavily supports AMP (even going as far as to highlight AMP-powered mobile websites in search results). Google supports AMP Cache (https://developers.google.com/amp/cache/) on the elements in AMP, which developers can leverage without any cost.
- AngularJS—Google’s front-end JavaScript framework is more heavyweight than React, but also highly preferred (https://techbeacon.com/node/1563)among enterprise Java and .NET developers
- Ionic 2—The AngularJS 2-based framework was released in early 2017 and looks, at first glance, like an attractive solution for building on the success of the original Ionic framework, released in 2015. Ionic is a good platform for developers moving from Cordova/PhoneGap to modern responsive web app solutions. The bottom line is that the tools for progressive web apps are still maturing and changing at a rapid rate. Many of the leading browser vendors, specifically Apple (with Safari and mobile Safari), Google (with Chrome) and Microsoft (with Edge) provide regular updates every 1-3 months. We are always keeping a close eye on new solutions, and evaluating how or if we should be using them in our projects. The end goal is to increase the app-like experience using web technologies. Popular websites that have adopted PROGRESSIVE WEB APPS. Just have a look.
Bonus: Best Course on PWA on Udemy Progressive Web Apps (PWA) - The Complete Guide
Top comments (0)