In this article, we will look at how to "tie" and configure PWA in Angular application.
What is a PWA?
PWA (Progressive Web App) is a web technology that transforms a website into an application. When opened, the application runs in a browser wrapper, which allows the PWA to run the application on any platform that uses a standards-compliant browser.
Internally, the PWA uses a service worker that interacts with the browser to provide access to some built-in functionality. The service worker has access to Cache Storage for web resources, and IndexDB for data. Thanks to the Service worker, it is possible to implement caching, which allows the PWA application to work offline.
Initial setup
, , Angular CLI, ng new app
.
ng serve
, Angular 4200 .
Angular CLI. ng add @angular/pwa
. , .
:
ngsw-config.json
- ngsw-worker.js (serviceworker.js). Service worker'.
manifest.webmanifest
- , PWA . , , ..
src/index.html
, head', html :
angular.json
:
src/assets/icons/
, .
app.module.ts
Service worker ngsw-worker.js
( ) .
PWA
. PWA https localhost ng serve
Service worker', HTTP- . , http-. npm http-server
npm i -g http-server
.
, ng build --prod
.
dist . Service worker' ngsw-worker.js
.
dist/app
8080 , http-server -p 8080
.
Our application was successfully launched on port 8080 and when opened, a button appears in the address bar of the browser to install the PWA version of our application.
Also in dev tools, in the Application section, we can track the status of our Service worker
Conclusion
In this article, we examined the basic configuration and launching of an application with PWA technology, the screen is left with a description of the possibilities of working Service workers in "offline" mode, caching, as well as configuring a file ngsw-config.json
, which can be read about in the official documentation for Angular .