概要
半年以上前からずっと気になっていたPWAについて、ついに入門し2日間ほど触ってみました。
たった2日間で「PWAについて完全に理解した」などというつもりはありませんが、学習が容易な割には得るものが多い技術だと感じました。
まだ試されていない方は、ぜひやってみたらいかがでしょうか?
PWAとそのメリット
詳細は参考に示すようなところにあるので主な感想だけ書きます。
- 信頼性と性能
- キャッシュにより瞬時に起動する
- インストール時にダウンロードされ適宜更新されるキャッシュ
- ユーザーがネット接続で訪問するたびにダウンロードされるキャッシュ
- キャッシュは多くなりすぎないよう制御可能
- ネットワークの接続が切れていてもキャッシュにより表示できるものがある
- キャッシュにより瞬時に起動する
- 見た目や使い勝手がよい
- スマホのアプリのようにホーム画面のアイコンから起動できる
- スプラッシュスクリーンが提供される
- ブラウザのようにアドレスバーがなく全画面を使用する
- 開発環境の構築が不要
- エディタ(Visual Studio Code等)とブラウザ(Google Chrome等)があれば十分です。
- 習得が容易
- HTML, CSS, JavaScriptといった基礎知識に加えて以下のコード例に示したようなちょっとしたおまじない程度を加えるだけです。
参考
- プログレッシブウェブアプリ | MDN
- 【 PWA】シリーズPWA (5) キャッシュを制御して高 速化やオフライン対応をしてみる – knowledge base
- Progressive Web Apps | Google Developers
- Service Workers Nightly
デプロイ
以下の2箇所にデプロイしてみました。
- エックスサーバー: /yorkshire-2014-pwa/
- Firebase: https://yorkshire-2014-pwa.firebaseapp.com/
- Netlify: https://yorkshire-2014-pwa.netlify.app/
エックスサーバー
注意点として次があります。
- ドメインはSSL設定がされていること(サーバーパネルで確認)
- Webサイトの常時SSL化がされていること
- これは、http://xxx.yyy.com/zzz にアクセスすると、https://xxx.yyy.com/zzz に飛ばされるようになっているということです。
- Webサーバーの挙動を決定する設定ファイルである .htaccess というファイルを編集する必要があります。
- 追記をおこなう編集内容はこちらを参照。
- サーバーパネルで編集できるのはドメイン単位の .htaccess ファイルだけです。
- サブドメインやフォルダ単位で編集する場合は別途エディタで編集する必要があります。
デプロイは通常どおり、FTPソフト(Cyberduck等)などでアップロードするだけです(