PWAで手軽にスマホから見れる何かを管理せずに作りたい

PWAについて調べたくなった。知見がないので色々調べてみる。とりあえず、MDNとweb.devあたりを覗いて行けば良いだろう。

• プログレッシブウェブアプリ (PWA) | MDN
• Learn PWA

追記

やりたいことはこれ https://zenn.dev/link/comments/68a310fdab546e

MDNのexamplesにあるgithubのrepositoryはこれらしい。

• https://mdn.github.io/pwa-examples/js13kpwa/
• https://github.com/mdn/pwa-examples

とりあえず、読んだほうが良いページはこのあたり。（まだweb.devの方は読んでもいない）

• PWA をインストール可能にするには - プログレッシブウェブアプリ (PWA) | MDN
• ホーム画面に追加 - プログレッシブウェブアプリ (PWA) | MDN

やりたいことはデスクトップに追加の作業な気がする。A2HS（ Add to Home Screen）というみたい。

• caniuse https://caniuse.com/web-app-manifest
• デモはこれ https://mdn.github.io/pwa-examples/a2hs/

この辺を読むとhttpsで公開されていないとだめみたい。

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Installable_PWAs#requirements

• 正しくフィールドが入力されたウェブマニフェスト
• 安全な (HTTPS) ドメインから提供されるウェブサイト
• 端末上のアプリを表すアイコン
• アプリをオフラインで動作させるために登録されたservice worker (現時点では Android の Chrome にのみ必要です)

.webmanifestについては後で考えよう。

無料でhttpsで公開するときに使えそうなもの

• github pages https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages#
• https://www.netlify.com/pricing/
• https://vercel.com/pricing
• https://pages.cloudflare.com/

workbox?

SW（service worker）をいい感じにやってくれる何からしい。後で調べる。

• https://web.dev/learn/pwa/workbox/
• https://developers.google.com/web/tools/workbox

next.js?

たぶんnext.jsとかにも手軽に何かする方法があったりするのだろうけれど、そのあたりは調べていない。

future work

• 手軽にレイアウトを作る方法を調べる -> 普通のフロントエンドの話になる？
• もっとネイティブアプリに近づける
  • project FUGU とかの話 PWAをNativeAppだと錯覚させる
  • https://fugu-tracker.web.app/
• Flutterとかはどうだろう？ -> モバイルアプリのテスト版を実機で確認する手軽な方法がわかっていない
  • リリースの方法 https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/release_googleplay
  • APKで配信できれば良い? さまざまな配信方法  |  Google Play  |  Android Developers
  • CI/CDのサービスを契約してbitrise.ioとかに置く Androidアプリ入門 - Bitrise Docs

manifestの細かな注意事項

iconは必須っぽい。だるいね。。

あと、どこかで、iconのダウンロードに失敗などするとswが動かないみたいな話をみたような。。（あやふや）

:warning: manifestのstart_urlやscoopは /foo/bar と /foo/bar/ が異なる。これに気づけなくてだいぶハマっていた。