Firebase hosting: How to deploy flutter web app
Build and release a web app
-Add web support to an existing app
flutter create .-----
Build your app in release mode, using the default (auto) option:使用 build 命令 Generate a release build:
運行下面command in android Terminal
flutter build web (一般測試模式)flutter build web --release
通過 release 模式 (flutter run --release)
或者 flutter build web 創建一個發行build。輸出文件在 build/web 目錄下，包括需要提供的 assets 資源data。
(This can be run with the release flag
or built using flutter build web. This outputs files at
build/web, including the assets, which need to be served together.)
---
手動更改 build/web下: version.json ,manifest.json 內有關app name描述.
---
Deploying to the web
-安裝 Firebase CLI, 確定以下畫面有出現. 使用powershell.
----
cd build/web 目錄下執行:
Firebase init
(注意以下答案)
? What do you want to use as your public directory? .
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
? File ./index.html already exists. Overwrite? No
i Skipping write of ./index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
-----
-在Firebase hosting manage page 下: Add custom domain in hosting
-注意若是有兩個以上的網站或app要選add another site.
去自己的dns server設定 txt record.
等待20min ~24hour for Firebase verify txt record.
等待他驗證通過...
為託管設置部署目標
firebase use --add
? Which project do you want to add? api-project-54xxxxx
? What alias do you want to use for this project? (e.g. staging) bill (ps: 自定一個名字)
所以是:
firebase target:apply hosting bill electricitybill
查詢目前target:
-firebase target
Resource targets for api-project-54940000063:
[ hosting ]
bill (electricitybill)
可以看到taget是正確的目標.
----
用編輯器修改:
-add target in firebase.json
{
"hosting": {
"target": "bill", //<--多增加這行.
"public": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
---
firebase deploy --only hosting:bill
=== Deploying to 'api-project-549420369063'...
output:
i deploying hosting
i hosting[electricitybill]: beginning deploy...
i hosting[electricitybill]: found 14 files in . //<---注意檔案數量
+ hosting[electricitybill]: file upload complete
i hosting[electricitybill]: finalizing version...
+ hosting[electricitybill]: version finalized
i hosting[electricitybill]: releasing new version...
+ hosting[electricitybill]: release complete
+ Deploy complete!
然後在console就會看到改變:
最後來看看完成版本:使用flutter.
Taiwan electricity bill calculator. 台灣電費計算機
---
後記1: flutter特點就是跨平台,所以除了android,ios外,還有web app.
但免安裝類型的web apps有時會有問題:
例如用手機開啟網址後,手機會提示下列畫面,一位這是免安裝的web app:
但不要高興太早,因為免安裝類型的web apps是依靠瀏覽器的,所以萬一瀏覽器太舊或是有問題,比如說ios(iphone/ipad)上的chrome,在目前版本的flutter還是有bug,有時會顯示不出來.
所以目前flutter還是有一點點小缺陷,但還好.僅限在ipad/iphone上用瀏覽器開的場合會出現這問題.
(而在android跟pc上的chrome都沒有這問題,且這不包括ios/android上的需要安裝app類型的flutter app,這也正常)
solution:
暫無解法:flutter build web--web-renderer html
後記2: web app icon issue.
還是一樣, android /ios上都正常. icon都可以顯示. 但到web app就會出現原始圖示.
要手動修改.web\manifest.json
圖示都要手動置換.
{
"name": "台灣電費計算機Electricity bill calculator",
"short_name": "台灣電費計算機",
"start_url": ".",
"display": "standalone",
"background_color": "#CECEF6",
"theme_color": "#CEF6EC",
"description": "台灣電費計算機",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
ps: 最後還有一個16x16小icon也要一起順便換掉.他沒有列在上面.json
最後來個三兄弟合照: android native app(java), flutter app(dart), web app.
留言
張貼留言