PWA stands for Progress Web Application and is a set of rules for using contemporary browser technologies to produce a more native app-like user experience. Although it is still a website, it will have the appearance and feel of an app and offer features not seen on regular websites. Users won’t need to download and install your PWA from app stores since they will be prompted to “Add to Home Screen” when they view your PWA in their browser at your URL. When people access the PWA from the home screen, it will behave and launch similarly to an app.
PWAs (progressive web apps) are just regular web applications with a few additions that function like native applications. PWA applications don’t require a network to function. PWA renders the application from local cache after caching it. It periodically checks the application’s live version before caching the most recent version in the background.
PWA can be installed on a computer much like a native app, and a shortcut may be shown on the desktop. In the absence of a network connection, clicking the shortcut will launch the programme in a browser with local cache.
It is possible to create PWA applications using Angular. Service worker API is required in order to transform an Angular application. An intermediary between the browser, the application, and the network, the service worker is essentially a proxy server.
Web pages and service employees are distinct. Access to DOM objects is not possible. Service Workers instead use the PostMessage interface to connect with web pages.
PWA application requires two things. Here are some of them:
Browser support Despite the fact that most browsers support PWA apps, IE, Opera Mini, and a few other browsers do not.
Delivery using HTTPS protocol is required for the application. Localhost is one exception to the https support and is used for development.
Let’s build a brand-new application and turn it into a PWA application.
Use the following command to create a new Angular application.
ng new pwa-sample
Create the production version of the programme,
ng build --prod
An Angular development server cannot execute PWA applications. Apply the following command to install a basic web server.
npm install -g http-server
Start the web server, and make sure the root folder of the application is our production build.
http-server -p 8080 -c-1 dist/pwa-sample
Open browser and enter http://localhost:4200
Now, go to Developer tools -> Network and select Offline option.
Normal applications stop functioning if the network is turned to offline, while PWA applications continue to function as illustrated below.
