Shunya UETA

Software Engineer As Data Scientist

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

Posted at — Jan 9, 2018

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を設置するべき!!!

[](https://twitter.com/agektmr/status/894753854373351424) 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サイトなど)

How we built Twitter Lite

いまさら聞けないPWAとAMP - Qiita

comments powered by Disqus