Foods Checher for Mastodon をPWA化してスマホ対応した

はじめに

先日のいわみくと!に参加した際に「PWAってWebアプリをネイティブアプリみたく使えるんですよ」という話を聞いたのが今回のきっかけ

 

いわみくと!(いわみ ICT 協議会) | Doorkeeper

 

 

以前から、スマホ対応したいなぁと考えていたこともあり、今回PWA化してみた。

 

ちなみに、PWAって何という方はこちらをご覧ください

いまさら聞けないPWAとAMP

 

やったこと

基本的にはこちらの記事二つを参考に必要なgemを追加してインストールコマンドを実行しただけ


rossta.net

 

RailsアプリケーションをPWA化する目論見

 

以下、実際の手順

RailsアプリのHTTPS化対応

config/environments/production.rb 内に以下のような記述がある。そこにtrueを渡してやればHTTPS化は完了

 

config.force_ssl = true

 

②gemの追加

Gemfileに以下のようにgemを追記して、

 

gem "serviceworker-rails"

 

そのあとは、bundle install を実行

 

bundle install 

 

③service worker のインストール

以下のコマンドを実行するとRailsでservice workerを利用することができるようになる

 

rails g serviceworker:install

 

とりあえず、これだけで既存のRailsアプリをとりあえずはPWAとして動くようにすることができる。

 

あとは、PWA対応したWebアプリをそれぞれのOSでデスクトップにインストールするだけ。

iOSならSafariで「ホーム画面に追加」を選択すればOK。

AndroidChromeから「ホーム画面に追加」を選択してください。

 

なお、iOSの場合は11.4以降のOSでないとOauth認証が別ブラウザで実行されてしますので注意が必要。

Androidの場合は特に気にしなくてもOK。

 

参考記事

いまさら聞けないPWAとAMP

 

RailsアプリケーションをPWA化する目論見

 

rossta.net

 

github.com