Shunya Ueta

サイトのPWA化、ホスティングをGithub PagesからFirebaseへ移行

PWA と FireBase を試してみたかった

image

firebase init で現れる画面、テンション上がる

Github Pages + CloudFlare で独自ドメインの shunyaueta.com をホスティングしてたんですが、Firebase でホスティングできると聞いて Firebase に移行しました。

PWA にしたのは完全に趣味です。

TL;DR;

PWA

1 年前ですが、簡潔に PWA の事が書かれています

プログレッシブウェブアプリ詳解 ─ 過去・現在・未来

image

image

左: PWA 化以前 右: PWA 化以降

ServiceWorker と manifest.json,あとは<meta name=”theme-color”>を指定すると PWA のスコアが 100 点になる 🎉

image

manihest.json によるホームアイコン作成誘導

Favicon の各画像の生成は下記のサイトが便利でした。要求される解像度毎の画像(Favicon,Home icon, Apple home icon)が生成されて mahifest.json も同梱されます。(画像の圧縮率も選べる)

Favicon Generator for all platforms: iOS, Android, PC/Mac…

後は、

Learn how to build a PWA in 5 minutes

を参考に最小実装で実現しました。(Web 通知は無意味だから止めました)

CSS は Skelton を採用しました。(css only 実装で js がなくてシンプルで良い)

dhg/Skeleton

Web App やってる人は、実装コスト 1 時間程度で済むので皆 manifest.json を設置するべき!!!

kitamura さんの受け売りです

Web App Manifest については下記の記事が分かりやすいです。

Web App Manifest で Web アプリをインストール可能に - Qiita

というか皆 Chrome の中の人の記事だった(どうりで詳しいわけですね…)

ホスティング

Github Pages+CloudFlare(独自ドメイン運用)で SSL 認証された Web Page のホスティングを実現していました。

FireBase では、FireBase Hostingを使うことで独自ドメインでもデフォルトで https で Web サイトがホスティングされます(最高)

image

やり方は以下を参考

Deploy Your Site | Firebase

めっちゃ簡単にデブロイできます…!!

成果物

Shunya Ueta | Engineer

所感

今回は静的かつ小規模な Web サイトを PWA 化したので、恩恵殆ど無いですがまともな WebApp だと恩恵めっちゃ受けると思います。(Twitter Lite や日経電子版の web サイトなど)

---

関連しているかもしれない記事


📮 📧 🐏: 記事への感想のおたよりをおまちしてます。 お気軽にお送りください。 メールアドレス入力があればメールで返信させていただきます。 もちろんお返事を希望せずに単なる感想だけでも大歓迎です。

このサイトの更新情報をRSSで配信しています。 お好きなフィードリーダーで購読してみてください。

このウェブサイトの運営や著者の活動を支援していただける方を募集しています。 もしよろしければ、Buy Me a Coffee からサポート(投げ銭)していただけると、著者の活動のモチベーションに繋がります✨
Amazonでほしいものリストも公開しているので、こちらからもサポートしていただけると励みになります。

#firebase #pwa