アプリのPWA化

はじめに

本屋で気になっていた本を少し立ち読み。

React Native ~JavaScriptによるiOS/Androidアプリ開発の実践

これVue.jsで一回試したPWA上手く駆使したらわざわざReact Native使わなくてもアプリライクに作れないかな??と思いいろいろ調べてみました。

※上記の本でDBにはFirebaseを活用している点がヒントになりました。

目標は以下のアプリを少し改良してアプリ化すること。

スタジオ管理シートアプリの制作② ~エスケープ処理・Sass・CSS設計~

✅参考

MDN:プログレッシブウェブアプリ

公式:プログレッシブ ウェブアプリで Firebase を使用する

公式:Firebase Cloud Messaging

チャット機能の実装に必要。

まずは調べる

✅PWAとは 参考:MDN

Progressive Web Appsの略。

ウェブアプリを PWA と呼ぶには、技術的に言えば、 安全なコンテキスト (HTTPS)、1つ以上のサービスワーカーマニフェストファイルを持つべきです。

使うメリット

①アプリインストールの手間を省ける。

②ホーム画面のアイコンから起動ができる(ホーム画面に追加ボタンの実装)。

③オフライン対応(※初回はhtml,css,jsファイルのダウンロード必要)

④iOS/Android固有の対応が不要

デメリット

iOSでプッシュ通知が使えない、Safariと相性が悪いなどApple絡みの問題がある

🙄iPhoneユーザーの大半がSafariだと思うからこれは気になる点。

Webディレクターが知らないとマズい!Googleの注目プロジェクトPWAって何?

Googleが作った仕様っぽいので、firebaseと相性悪いはずがない。

公式:プログレッシブ ウェブアプリで Firebase を使用する

Firebase駆使すればSSL対応も簡単にできるし、DBも使えるので相性抜群な気がする!

とりあえず試してみる

PWA入門!JavaScriptで簡単に高速化&オフライン対応のWebサイト制作チュートリアル!

上記サイトのソースコード

素のJSでもどうやら作れるとのことで試してみます。

✅manifest.json

manifest.jsonの作成。

{
  "short_name": "PWAサイト",
  "name": "サンプルのPWAサイト",
  "start_url": "https://~~~~.web.app", // firebaseのデプロイ先URL
  "display": "standalone"
}

「short_name」:スマホのホーム画面に表示される名前
「name」:インストールを促すバナーに表示される名前
「start_url」:ホーム画面から起動する最初のサイトURL
「display」:ホーム画面から単独で起動するかを決める

pugファイルのheadタグ内に以下追記。

link(rel="manifest" href="manifest.json")

とりあえずデプロイ。

firebase deploy

確認したらこれだけでできてました◎(※スマホ全画面のスクショ)

✅Service Worker

※未実装です

これを使うことで、オフライン時でもネイティブアプリの様に画面操作が可能で、サーバーとの通信再開時に投稿処理などもしてくれるとのこと。

index.jsに以下を追記。

navigator.serviceWorker.register('/sw.js').then(function() {
  console.log('サービスワーカーの登録成功');
}).catch(function(err) {
  console.log('サービスワーカーの登録ができませんでした:', err);
});

sw.jsを作成。

※ソースコード丸々参考にしているので割愛。

ここでうまく起動できず躓きました。。。

Progressive Web Apps (PWA) 学習者のメモ その1  (Service Worker)

別途この記事のコードを参考に作りなおしたいと思います。

※push通知の実装を予定していなかったため深掘りする気にもならず。。。

※追記※

PWA対応 Webサイトのアイコンをホーム画面に追加

上記記事を参考に一旦実装しました。

index.jsに追記

window.addEventListener('load', function() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register("/serviceWorker.js")
      .then(function(registration) {
        console.log("serviceWorker registed.");
      }).catch(function(error) {
        console.warn("serviceWorker error.", error);
      });
  }
});

sw.jsの編集

※最低限以下のコードが必要らしい。

self.addEventListener('fetch', function(event) {
});

確認できた◎

🙄どのような恩恵があるのかはまだプッシュ通知を実装していないのでピンと来ていません。

✅firebaseのプッシュ通知

※未実装です

PWAでプッシュ通知を実装してみる(3)Firebaseでプッシュ通知に必要なトークンを処理する

【PWA】Firebaseを利用してプッシュ通知の配信基盤を作成してみた!

上記2つの記事見るとService Worker使わずしてfirebaseなら実装できそう。

→公式見たらちゃんとあった。

公式:Firebase Cloud Messaging

実際の途中経過

✅アイコン表示

Androidは192×192でiPhoneでは180×180のpngファイルが必要とのこと。

※画像のサイズ変更はここでやった。

manifest.jsonに以下を追記。

"icons": [
    {
      "src": "img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ]

表示はされたがiPhoneだと背景透明な部分が思いっきり黒くなる。

※上記記載したもののヘッドタグが優先されるっぽい。

link(rel="icon" href="img/icons/icon-180×180.png")
link(rel="apple-touch-icon" sizes="180x180" href="img/icons/icon-180×180.jpg")

アイコン

表示

🙄横画面だと違いはほぼないですが、縦だとすっきりしていていいですね◎

✅恩恵の検証

よくわからないのでどういうことなのか検証してみる。

PWA化前のオフライン送信。

現状は変わらず。。。

以下の追記もしているので、なんらかの処置はされそうだけど、現状だと更新時にリロード処理しているのがいけないのかも??

let presenceRef = firebase.database().ref("disconnectmessage");
presenceRef.onDisconnect().set("I disconnected!");

躓いた点

✅Service workerの理解

おわりに

React Nativeを使わずに、個人的にはPWAで割と満足でした。

※知人もApple Storeからインストールはめんどくさいと言っていました。

上記のアプリを少しずつアップデートしていきたいと思います◎

✅その他参考

実際どうなのか?いまさら聞けないPWAについて

Service Workerについて詳しい。

Angular と Firebase で月間PV1億超えの PWA を作った話

これ面白かった。PWAでの広告単価が低く稼ぎにくい。

誰でもPWAやWebアプリを作り放題のNoCodeサービス「Adalo」を使ってみた!

それとこんなのもあるんですね。将来的にはNoCodeな時代がやっぱり来るんですかね。。。

[HTML] サイトにアイコンを設定する

コメントを残す