Flutter PWA Deploy Surge dan Firebase
Assalamualaikum wbt
Kebiasaan kita bangunkan mobile apps untuk deploy atas google store dan ios apple store.Proses ini memerlukan akaun dan bayaran secara oneoff pada google dan tahunan kepada apple. Terkini telah berlaku perkembangan teknologi web atas Progress Web Apps (PWA) yang mana apps ini tidak perlu di publish atas google atau apple. Ia bole run aras browser chrome dan safari dan functionality asas adalah sama dengan native apps.
Ok, saya tunjukkan step2 by step cari asas kita publish atas pwa menggunakan flutter.
Sebelum tu sila pastikan versi flutter ada versi terkini.
1. Memasang lib untuk menyokong versi web
flutter config –enable-web
lepas tu semak. Jika berjaya,chrome akan dipaparkan sebagai salah satu devices selain dari emulator atau phone
flutter devices
UMP-USER@sabrisoft MINGW64 /d/D/flutterapp/firstpwa
$ flutter devices
2 connected devices:
Web Server • web-server • web-javascript • Flutter Tools
Chrome • chrome • web-javascript • Google Chrome 83.0.4103.97
2. Buat satu project baru
flutter create firstpwa
Seterusnya, pegi ke direktori project
cd firstpwa
Tambah sokongan library web :
flutter create .
Perhatikan satu folder web dipaparkan di direktori projek.
3. Run atas web
flutter run -d chrome
yes.sekarang flutter telah run atas browser chrome.
Jika nak run terus ke mobile devices iaitu ke phone bole guna command ni. janji dalam satu wifi yang sama.
ipconfig utk dptkan ip host notebook.
seterusnya guna ip (xx.xx.xx.xx) ini utk arahan di bawah
flutter run -d chrome –web-hostname=xx.xx.xx.xx –web-port=80
Jika dalam mac
flutter run -d chrome –web-hostname=xx.xx.xx.xx
4. Build Project
flutter build web
5. PWA support
Menjana fail manefest.json dari https://app-manifest.firebaseapp.com/
masukkan icon dan nama apps dsbnya lepas downloadkan files dalam bentuk zip.
lepas tu extrakkan zip ni. ada 1 folder images dan manifest.json
pastu salin folder dan files nie dalam direktori apps > web dan di luar web
6. Jana Favicon dan apps icon generator
icon bole dijana di website https://www.favicon-generator.org/
salin generate html ini untuk dipaste dalam index.html nanti.
download zip fail dan extrak
salin semua file ni kecuali manifest.json dan paste ke dalam directori apps > web dan di luar web
7. edit files index.html
pastekan salinan html di atas ke dalam file index.html di bahagian header.
dan save
8. tambah servisworker.js untuk naikkan prestasi pwa
copi files servis worker
/** An empty service worker! */
self.addEventListener('fetch', function(event) {
/** An empty fetch handler! */
});
dari link codelab google spt di bwh:
https://codelabs.developers.google.com/codelabs/migrate-to-progressive-web-apps/index.html?index=..%2F..index#3
\
dan buat satu files js.
sw.js dalam direktori web
8. Deploy Apps
ok saya tunjukkan 2 cara utk deploy live
a) Guna Surge
install surge terlebih dahulu
npm i -g surge
jika dalam mac atau linux bole guna
sudo npm i -g surge
ok.setelah berjaya
anda terus ke directori
cd build/web
domain anda bole edit letak nama sendiri. so kita bole test akses dari browser
pwapertamaku.surge.sh
yeah berjaya.
b) Guna firebase (cli)
guna command ni untuk install firebase
npm i -g firebase-tools
lepas berjaya
terus login guna command
firebase login
jika dh login akan kuar mesej masa di atas
pastu
kita start firebase
firebase init
klik Y dan pilih hosting dan tick guna spacebar
jika dh ada project bole guna existing dan jika tiada kita create baru pilih create a new project
saya pilih project baru.(kambingcun).
pastu masukkan public directory : build/web
rewrite all ursl :yes
overwrite index. : no
dan akan dipaparkan mesej complete
Jadi kita terus deploy ke prod firebase
firebase deploy
ok berjaya deploy
bole terai buka guna browser
https://kambingcun.web.app
ok cun
sekarang cuba buka di android phone guna browser chrome
https://kambingcun.web.app
apabila link ini dibuka pada phone browser akan satu notification ‘add to home screen’. jika tiada notification anda bole terus gi ke menu setting dan pilih ‘add to home screen’.
Sekian
slmt mencuba
TQ
Recent Comments