A progressive web application is a type of application software delivered through the
web, built using common web technologies including HTML, CSS, and JavaScript. It
is intended to work on any platform that uses a standards-compliant browser.
In this blog, we will use Angular to build a Progressive Web Application (PWA)
that works on mobile or any platform that uses a standards-compliant browser.
What is PWA?
A progressive web app offers a high level of user experience because it has the
same features as native apps have. Nowadays, PWA has become a big deal, and
more companies are switching towards Progressive web applications (PWA).
PWA does not require to be deployed via app stores; instead, we take a slightly
different approach and deploy it through the web servers through URLs. To make the
same PWA as the native apps, we have to fulfill the following requirements.
Features of PWA
Here are the features of PWA and why we should care.
- Progressive
The app should work for every user no matter what the browser choice is because it
is built with progressive enhancement as a core principle.
2. Responsive
The app can respond to the user’s behavior and environment based on screen size,
the platform, and orientation.
3. Connectivity Independent
When the network is not available or too slow, the app should still work on a device.
4. Auto-Updated
It looks and feels like an app but with no download and installation needed.
5. Shareable
It does not require to be downloaded can easily be shared via a simple link or URL.
6. User Experience
The similar user experience by engaging the same interaction methodology as a native
app has.
7. Installable
Fully installable on users’ mobile home screen, and the good thing is we do not have
to visit the app store.
Make Your Angular Application a PWA
Create a sample angular project using angular-cli for PWA configuration.
- Before creating an angular project please check the node version using below
command
$ node -v
2. Install the angular-cli using the below command
$ npm i -g @angular/cli
3. Generate new angular project using below command
$ ng new angular-pwa-example
Implement PWA Features
For implementing PWA in our project we can install the following command
$ ng add @angular/pwa
The new PWA features added the following content to our angular project:
- manifest.json file.
- Different sizes of icons in src/assets/icons folder.
- Service Worker — ngsw-worker.js
A Service Worker is a feature that’s available in modern browsers which can be used
as a network proxy that lets your application intercept network requests to cache
assets and data. This could be used for implementing PWA features such as offline
support, push notifications, etc.
The two failed audits (“Does not register a service worker” and “Does not respond
with a 200 when offline”) are related to Service Workers and caching.
We need to set up a service worker and use it to cache files locally to pass these
audits. When offline, the Service Worker should return the locally cached version of
the file.
If you try to run your application locally via ng serve, you won’t notice any PWA
features. Angular Service Workers are enabled only on production builds, so in order
to test these changes locally, you’ll need another strategy to serve your build. One
option is to use something like the npm package http-server and point it to the dist/
folder. When it’s running, you should see a fully-functional PWA.
Otherwise, you can build your project for production using $ng build –prod and check
PWA feature.
Recent Comments