/yew-trial

Primary LanguageRustMIT LicenseMIT

yew PWA example

yew + trunkでPWAを作るときのメモ.

targetフォルダの移動

.cargo/config.tomlに以下を追記

[build]
target-dir = ".output/target" #Cargo.tomlからの相対パス

index.html の移動

  • Trunk.tomlに以下を追記.

    [build]
    target = "src/wwwroot/index.html" #Trunk.tomlからindex.htmlまでの相対パス
  • index.htmlに以下を記述. hrefにはindex.htmlからCargo.tomlへの相対パスを記述. index.htmlをルートから移動した場合,これを書かないと動かない.

    <link data-trunk rel="rust" href="../../Cargo.toml" />

distの移動

Trunk.tomlに以下を追記.

[build]
dist = ".output/dist"

Service Worker

  • Service Workerはプロキシとして動く.

  • Service Workerはスコープを指定できるが,置かれているディレクトリ以下だけに対してのみ有効.

  • PWAの更新はService Workerの更新によって検出される. バージョンを表す変数を以下のように書いておくとよい.

    var version = 'yew-trial 0.0.0';

trunkのhook

trunkはビルド時,中間生成ファイルをdist.stageサブフォルダにおき,その後,.stageの中身をdistにコピーする.

そのため,hookの中で生成物の内容を書き換えたいなら.stage内の生成物を書き換える.

manifest

これが置かれているディレクトリがWeb APIのファイルパスの基準になったりする.サイトのrootに置いておくとよい.

拡張子はjson, webmanifestの複数があるが,どちらでもよい.

ここに記述されるscopeと一致するスコープを持つService Workerが必要.