Progressive Web Apps (or PWAs) is a modern web capabilities that combine all the goodness of the web and the top-notch of native app features. While native mobile apps provide the highest quality UX, they come with friction for users. One of the biggest differences between PWAs and native mobile apps is that it does not require the hassle of requiring an app marketplace (App Store, Google Play, etc.) to access, they just rely on the mobile web browser.
Key principles
Below are listed 10 key principles a web application should observe to be considered a Progressive Web App:
- Progressive: Work for every user, regardless of browser choice, has a basic level on older browsers, but fully-functional on the latest ones.
- Responsive: Fit any device with a screen and a browser, mobile phones, tablets, laptops, TVs, E-book readers, etc...
- Connectivity independent: It works offline or with a poor network connection.
- App-like: Use the app-shell model to provide app-style navigation and interactions.
- Fresh: Always up-to-date thanks to the service worker update process.
- Safe: Served via HTTPS 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 shared via a URL and do not require complex installation.
PWA vs. Native Mobile App
As showing below the superficial difference between Progressive Web Apps and Native apps has to do with the way the end user accesses them.
Progressive Web Apps were conceived as a way to sidestep, or even eliminate, a lot of the headaches associated with native app development. However native apps still more robust and can be written for any use.
First steps toward building a PWA
This codelab, will walk you through creating your own Progressive Web App, including the design considerations, as well as implementation details, to ensure that your app meets the above key principles of a Progressive Web App.
MDN
Progressive web app structure. This architecture allows a website to benefit the most from all the PWA features — it caches the app shell and manages the dynamic content in a way that greatly improves the performance.
Tools and resources
The tools and resources listed below, will help you build and publish a standout Progressive Web App and speedup the process:
- To see PWAs in action, you can refer to PWA.rocks for examples under several categories, this will help you visualize what your future PWA could look like.
- The fastest way to create a PWA is to use PWABuilder
- Debug Tools for PWA folks.
- Measuring completeness with Lighthouse, it is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
- Progressive Web App Checklist.
- Application Shell Architecture, is a comprehensive Progressive Web App starting point that covers both client and server-side portions of the model and there's quite a lot going on there, it will take some time to familiarise yourself with the codebase.
- Web Starter Kit a workflow for multi-device websites.
The tools and resource listed above are just a few of tons out there, but they should be good enough to put you on the right track.
Originally Posted on Progressive Web Apps - Mahmoud Elmahdi
Top comments (0)