これはなに？
野良PWA
このサイトについて説明していきます。
前回のあらすじ
前々回、前回とPWAでインストールしたアプリをコマンドラインで立ち上げる方法と、PWAに対応していないサイトをPWAにするアイデアを紹介しました。
今回やったこと
野良PWAを簡単に作れるサイトを作りました！
さっそく使い方を見ていきましょう。
使い方
トップページ
殺風景ですね。
サンプルとしてGoogleを登録してあります。
カードをクリックする
さらに殺風景なページに遷移しましたね。
このページをPWAとしてインストールします。
インストールする
Google Chromeの場合、アドレスバーの右側がこんな感じになっているかと思います。
PCに落とすような雰囲気を感じるアイコンをクリックします。
するとインストールするか聞かれますので、「インストール」をクリックしましょう。
いや、まぁこうなりますよね。
一旦閉じましょう。
アプリを開く
Google Chromeの場合、アドレスバーに chrome://apps/ と入力するとアプリ一覧が表示されます。
この中に先程インストールしたPWAのアプリがあるのでクリックすると以下のようになります。
グーグルが開きました。
どうしてこうなるかについては前回の記事を参照。
ちなみにスマホでインストールするとホーム画面やドロワー内にアプリストアからインストールしたアプリと同様にアイコンが並ぶと思います。
ブラウザのショートカットを作るとホームには置けるがドロワーには存在しないと思いますが、これがスマホでPWAインストールするかなりのメリットになるかと思います。
ショートカットから起動するとブラウザの新規タブで開きますしね……
サイトを追加する方法
右下にあるフローティングアクションボタンをクリックします。
追加ページ
必要な項目を埋めていきます。
こんな感じにPWA化して開きたいURLを「リダイレクト先」に指定します。
アプリ名、テーマカラーはご自由に。
保存する
あとは保存ボタンを押して無事に保存されればトップページにカードが追加されます。
カードが追加されましたら、先述の方法でインストールして完了です。
システムについて
- OS
- Linux (Ubuntu)
- Webサーバー
- Nginx
- フロントエンド
- Flutter
- バックエンド
- Node.js
- PHP
雑感
Flutter初めて触りましたが簡単にマテリアルデザイン作れて良いですね。
Dartは最近良く触ってますがDartという感じがなく、もうFlutterだよねこれ……という感じがします。
NginxでPHP動かすのが面倒だったのでサーバーサイドはNodeで待ち受けてPHPのプロセス立ち上げる手抜き仕様です。
野良PWAのアイデア自体は大分前からあったので、その時にPHPで作ったスクリプトがあり流用した結果となります。
新規で作るならサーバーサイドもDartで書くかもしれない。
あとは大分雑に作ってるので色々おかしい部分があるかもしれません。
PWAに対応していないサイトもスマホにインストールできるようになるし、PCからは前々回の記事のやり方でターミナルからコマンド叩いてPWAのサイトが起動するようにできるし、色々と捗ります。
公式がPWAに対応してる場合はこのシステムを使う理由が皆無ですので素直に公式を入れましょう。
また、スマホでアプリ版が存在する場合も素直にアプリを使う方が良いでしょう。
それでは良いPWAライフを。
採用PR
株式会社viviONでは一緒に働く仲間を募集しております。
オタク文化を盛り上げたいWebエンジニアのご応募お待ちしております！
Devトークもあります！