PWA angular 10

Pada kesempatan kali ini saya akan menulis tentang PWA dengan angular 10, sebenarnya aku mencontoh dari https://www.digitalocean.com/community/tutorials/how-to-build-progressive-web-apps-with-angular dengan sedikit penyesuaian.

Syarat software yang harus terinstall :

1. Install node sebagai runtime environtment, download dari https://nodejs.org/en/download/

2. Install NPM, sebagai package manager

3. Install Angular CLI. Angular CLI berfungsi untuk me-manage angular project dengan command line. detailnya bisa merujuk ke https://cli.angular.io/

4. Firebase account. Firebase disinin digunakan untuk mendeploy aplikasi angular PWA.

Sekarang lanjut ke step2 pembuatan projectnya :

1. membuat project angular dengan CLI command.

Pada kesempatan kali ini akan dibuat project dengan nama ng-pwa

struktur project

2. Membuat Web App Manifest.

Web app manifest berisi konfigurasi json supaya web app bisa diinstall di handphone tanpa playstore. Lebih detailnya bisa merujuk ke https://developer.mozilla.org/en-US/docs/Web/Manifest

tambahkan pada ng-pwa/src file manifest.json yang isinya sebgai berikut

{
"name": "Angular Progressive Web App",
"short_name": "Ng-PWA",
"start_url": "./",
"theme_color": "#008080",
"background_color": "#008B8B",
"display": "standalone",
"description": "A PWA that is built with Angular",
"icons": [
{
"src": "/assets/images/icons/icon-16x16.png",
"sizes": "16x16",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-150x150.png",
"sizes": "150x150",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-180x180.png",
"sizes": "180x180",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

Proses pembuatan manifest.json

Edit file ng-pwa/tsconfig.base.json

"outDir": "./dist/out-tsc",
ke
"outDir": "./dist/ng-pwa",

tscofig.json

tambahkan kodingan berikut pada src/index.html

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#008080">

ubah file ng-pwa/angular.json

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ng-pwa",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json"
],

file angular.json

3. Tambahkan service worker

Untuk penjelasan service worker bisa dilihat di https://www.digitalocean.com/community/tutorials/how-to-build-progressive-web-apps-with-angular pada no 3. Jalankan npm install — save-dev sw-precache-webpack-plugin@1.0.0 Pada CLI.

Buat file precache-config.js di ng-pwa dan isi seperti berikut :

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
module.exports = {
navigateFallback: '/index.html',
navigateFallbackWhitelist: [],
stripePrefix: 'dist',
root: 'dist/',
plugins:[
new SWPrecacheWebpackPlugin({
cacheId: 'ng-pwa',
filename: 'service-worker.js',
staticFileGlobs: [
'dist/index.html',
'dist/**.js',
'dist/**.css'
],
})
],
stripePrefix: 'dist/assets',
mergeStaticsConfig: true
};

precache-config.js

ubah file package.json tambahkan

"pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js"

package.json

4. Membuat view / tampilan

Untuk membuat tampilan dilihat di https://www.digitalocean.com/community/tutorials/how-to-build-progressive-web-apps-with-angular pada bab 4.

5. Deploy aplikasi ke firebase

login firebase kemudian go to console pada pojok kanan atas.

Kemudian ada project misalnya ngpwa. Jika saat create firebase project goole analitiknya bisa di uncentang / dimatikan.

firebase dashboard dg projet ngpwa yang baru dibuat

Install firebase tool, firebase tool berfungsi supaya bisa menjalankan firebase sintak lewat CLI :

firebase login

login ke firebase lewat CLI

Compile pwa : proses ini akan membuat file ng-pwa di bawah folder dist (distribution)

compile aplikasi

firebase init

Persiapan deploy ke firebase

Firebase deploy

hasil hosting aplikasi ke firebsae

Akses aplikasi pada browser : https://ngpwa-c3376.firebaseapp.com/

Buka link pada browser Handphone misal https://ngpwa-c3376.firebaseapp.com/ kemudian pada pojok kanan atas klik menu kemudian pilih Add to Home Screen, kemudian drag iconya ke screen HP

PWA berhasil dibuat

sourcode : https://github.com/wahyueko22/angular/tree/master/ng-pwa