Zenn
Open1

flutter with PWA(Progressive Web Application)

unokununokun

FlutterでPWAアプリを作成する。

環境

  • macOS Big Sur 11.2

事前インストール

PWAアプリ構築手順

iOS/Androidアプリを作成しない場合には、flutter doctorで✗がついても気にしない。

$ flutter channel master
$ flutter upgrade
Downloading Dart SDK from Flutter engine edcca81180297174c1cf715910a4e3b8b5240d80...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  197M  100  197M    0     0  15.2M      0  0:00:12  0:00:12 --:--:-- 17.0M
Building flutter tool...
Flutter is already up to date on channel master
Flutter 1.26.0-18.0.pre.177 • channel master •
https://github.com/flutter/flutter.git
Framework • revision 9278ea984f (10 minutes ago) • 2021-02-03 18:31:03 -0500
Engine • revision edcca81180
Tools • Dart 2.12.0 (build 2.12.0-283.0.dev)

$ flutter doctor -v
Downloading package sky_engine...                                1,113ms
Downloading flutter_patched_sdk tools...                         1,691ms
Downloading flutter_patched_sdk_product tools...                 1,323ms
Downloading darwin-x64 tools...                                     3.3s
Downloading darwin-x64/font-subset tools...                        890ms
[✓] Flutter (Channel master, 1.26.0-18.0.pre.177, on macOS 11.2 20D64
    darwin-x64, locale ja-JP)
    • Flutter version 1.26.0-18.0.pre.177 at /Users/unokun/flutter
    • Framework revision 9278ea984f (15 minutes ago), 2021-02-03 18:31:03 -0500
    • Engine revision edcca81180
    • Dart version 2.12.0 (build 2.12.0-283.0.dev)

[✗] Android toolchain - develop for Android devices
    ✗ ANDROID_HOME = /Users/unokun/Library/Android/sdk
      but Android SDK not found at this location.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 48.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.19.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.96

! Doctor found issues in 1 category.

$ flutter config –enable-web ← これが重要
Setting "enable-web" value to "true".

You may need to restart any open editors for them to read new settings.

$ flutter devices
1 connected device:

Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.96

プロジェクト作成

$ flutter create hello
$ cd hello
$ flutter run -d chrome 
　→ Goole Chromeが起動する
　http://localhost:50260/#/

デプロイ

Webアプリをビルドする。
build/web以下にlib/main.dartがminifyされてmain.dart.jsとして作成される。

$ flutter build web

surgeを使ってWeb上にdeployする。
※)deployできるのであれば必須ではないが、簡単に確認できる。

$ npm install -g surge
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
/Users/unokun/.anyenv/envs/nodenv/versions/14.9.0/bin/surge -> /Users/unokun/.anyenv/envs/nodenv/versions/14.9.0/lib/node_modules/surge/lib/cli.js
+ surge@0.21.7
added 112 packages from 96 contributors in 6.019s

$ cd build/web
$ surge
   Running as xxx (Student) ← 初回実行時に登録したメールアドレス

        project: (プロジェクトをインストルしたパス)/flutter/hello/build/web/
         domain: flashy-history.surge.sh
         upload: [] 100% eta: 0.0s (13 files, 3384473 bytes)
            CDN: [====================] 100%
     encryption: *.surge.sh, surge.sh (79 days)
             IP: 138.197.235.123

   Success! - Published to flashy-history.surge.sh

不要になった場合には、以下のコマンドを実行する。
surge teardown flashy-history.surge.sh

確認

Android/iOS端末のGoogle ChromeでdeployしたURLを開く。

http://flashy-history.surge.sh

Android端末の場合には、メニュー「ホーム画面に追加」をタップするとショートカットが作成される。