Pada artikel ini, kita akan melihat bagaimana "mengikat" dan mengkonfigurasi PWA di aplikasi Angular.
Apa itu PWA?
PWA (Progressive Web App) adalah teknologi web yang mengubah situs web menjadi aplikasi. Saat dibuka, aplikasi berjalan di pembungkus browser, yang memungkinkan PWA menjalankan aplikasi di platform apa pun yang menggunakan browser yang sesuai standar.
Secara internal, PWA menggunakan pekerja layanan yang berinteraksi dengan browser untuk menyediakan akses ke beberapa fungsionalitas bawaan. Pekerja layanan memiliki akses ke Penyimpanan Cache untuk sumber daya web, dan IndexDB untuk data. Berkat Service worker, cache dapat diterapkan, yang memungkinkan aplikasi PWA bekerja secara offline.
Pengaturan awal
, , 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
.
Aplikasi kami berhasil diluncurkan pada port 8080 dan ketika dibuka, sebuah tombol muncul di bilah alamat browser untuk menginstal versi PWA dari aplikasi kami.
Juga di alat pengembang, di bagian Aplikasi, kami dapat melacak status pekerja Layanan kami
Kesimpulan
Pada artikel ini, kami memeriksa konfigurasi dasar dan peluncuran aplikasi dengan teknologi PWA, layar dibiarkan dengan deskripsi kemungkinan bekerja pekerja Layanan dalam mode "offline", dan caching, serta mengkonfigurasi file ngsw-config.json
, yang Anda dapat membaca tentang di dokumentasi resmi untuk Angular .