ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。Chatbot の運用実験は終了しました。ご協力いただいたみなさん、ありがとうございました。

意外と簡単!?Bubble で作った Webアプリを PWA にする方法(2023年版)

こんにちは!ノーコードラボの岡崎です。

2021年に同じタイトルの記事を作っていたのですが、改めて PWA を作ってみたところ、特に iOS の部分が大きく異なりましたので記事を修正して再度投稿します。一応、2021年当時のものも残しておきますので、違いを知りたい方はこちらもご確認ください。

blog.nocodelab.jp



今日は Bubble で作った Webアプリを PWA にするための方法について記述します。

Metaタグを操作するので、Bubble は有料プランである必要があります。

下は弊社内部で使っている課題管理ツール(KADAII)を PWA にしたときの動画です。 ホームスクリーンのアイコンから全画面表示して Webアプリを表示しているのがわかるかと思います。

1. PWA とは

PWA は Progressive Web Apps(プログレッシブウェブアプリ) のことです。

Google が推進している、モバイルでのウェブサイトの体験価値向上のための技術のことを指します。

  • ホーム画面からアクセス可能
  • ウェブサイトの高速表示
  • 通信データ量の削減
  • オフラインで使用可能
  • プッシュ通知

などができるようになります。

2. A2HS とは

A2HS は Add to Home Screen の略で、日本語だと「ホーム画面に追加」という機能になります。
今回は PWA 化の第一歩として、この A2HS を iOS / Android でできるようにしてみます。

2.1 iOS の場合(Safari)

iOS の場合は、Safari の 共有ボタンからをクリックし、「ホーム画面に追加」をクリックします。

手順としては、ブックマークの方法と同じです。
ただ、知らない人も多いと思いますので、やり方を伝える必要があると思います。

2.2 Android の場合(Chrome)

Android の場合、Chrome の画面の下部にプロンプトが表示されて簡単にホーム画面に追加できるようになるので、インストールの誘導がスムーズです。

3. PWA の設定

3.1 apple-touch-icon

まずは、iOS 専用のアイコンの設定です。

こちらは Bubble に設定項目があるのでそこを変更します。

Settings - General - iOS appearance に Icon for home screen というプロパティがあります。
ここにタッチアイコンをアップロードしておきます。

Bubble には 60 x 60 pixels という表示があるのですが、実際には 180x180 の画像が1つあれば良いということなので、180x180 の画像を作ってアップロードしておきます。

3.2 manifest.json の作成

続いて manifest.json を作成します。
メモ系のアプリなどでファイルを作成してください。

{
  "name": "Kadaii",
  "short_name": "Kadaii",
  "theme_color": "black",
  "icons": [{
      "src": "/icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },{
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }],
  "start_url": "/?utm_source=homescreen",
  "display": "standalone"
}
  • name と short_name はご自分のアプリの名前を入れてください。
  • アイコンは 192x192 と 256x256 を用意してください。
  • ?utm_source=homescreen は Google Analytics にホームスクリーンからのアクセスであることを伝えるものです。
  • display タイプは standalone / browser から選択します。今回は iOS の表示に合わせて、ステータスバーを残して全画面表示する standalone を選択しています。

3.3 Service Worker の作成

続いて service-worker.js を作成します。
メモ系のアプリなどでファイルを作成してください。

※A2HS だけなら Service Worker はなしでも大丈夫です。ご参考程度に。

// service-worker.js
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});

// 現状では、この処理を書かないとService Workerが有効と判定されないようです
self.addEventListener('fetch', function(event) {});
  • ここではコンソールにログを吐き出しているだけです。Service Worker としては実際には特に何もしていません。

3.4 manifest.json と service-worker.js を呼び出すコードを作成

  <!-- manifest.jsonを呼び出しています -->
  <link rel="manifest" href="./manifest.json">
  <script>
    // service workerが有効なら、service-worker.js を登録します
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js').then(function() { console.log('Service Worker Registered'); });
   }
  </script>

こちらのコードを Bubble の Settings - SEO / metatags - Advanced settings - Script/meta tags in header に追記します。

※Service Worker なしの場合は、manifest.json だけでも大丈夫です。

  <!-- manifest.jsonを呼び出しています -->
  <link rel="manifest" href="./manifest.json">

3.5 manifest.json、service-worker.js、アイコンの画像ファイルのアップロード

Bubble の Settings - SEO / metatags - Hosting files in the root directory から manifest.json と service-worker.js、それと 256x256 と 192x192 のアイコンの画像をアップロードします。

3.6 Live 環境へデプロイ

ここまでできたら、Live 環境にデプロイしてください。
デプロイすると 3.5 でアップロードしたファイルが / 配下に配置されます。
デプロイするまでは /version-test/ にしかファイルがありません。

デプロイが終わりましたら、Live 環境で動かしてみてください。
iOS なら Safari、Android なら Chrome で動かしてみてください。
うまく A2HS は動作していますでしょうか?

ホーム画面にインストールできたら、そこから起動して動作を確認してみてください。

4. まとめ

PWA の第一歩とも言える A2HS に Bubble の Webアプリを対応させてみましたが、いかがでしたでしょうか?
意外と簡単だったんじゃないか?と思っていただけるのではないかと思います。

今回は Service Worker については何もしていません。
高度なキャッシュコントロールができるようなので、PWA というからには、こちらも使いこなせるようになりたいところです。

参考

今回は PWA ということで多くのサイトを参考に Bubble に対応してみました。
ありがとうございました。

ホーム画面へのアプリ追加(iOS編)【これからはじめるPWA】 - bagelee(ベーグリー)

PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita

PWAのmanifest.jsonで「display」の指定による表示の違い(fullscreen、standaloneなど)|OAR CODE

iOS PWA Compatibility - firt.dev