Raspberry Pi および iPad による PWA コンテンツの作成

14093 ワード
iPad RaspberryPi4 SSL PWA iPad テキストリンク

iPad OS 13.3上でPWAを正常稼働させるには以前投稿した「RaspberryPiとiPadでKIOSK端末を作成する#コンテンツ作成上の問題点」では不足で、２ページ目以降に「完了」および「文字サイズ変更メニュー」を含んだメニューバーが画面上部に表示されてしまう。
※ 添付画像破線部分を参照。

「RaspberryPiとiPadでKIOSK端末を作成する#コンテンツ作成上の問題点」より抜粋

コンテンツページへのブックマークをホーム画面上に保存すると、疑似的なPWA（Progressive Web Apps）として扱う事が出来る。その場合、html内に以下metaデータを登録する必要がある。

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="apple-touch-icon" href="./img/apple-touch-icon-152x152.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

以下 Apple Developer Forums より引用

iOS 13.1 - Problem URL Bar

当該フォーラム内で提示された「https通信環境下」で「manifest.jsonを設置する」という解決策（つまりPWAを実現する為の正当な準備をする）をRaspberry Pi4（Raspbian Buster）にて構築したKIOSK端末に実装する。

母艦側での準備

ローカル（閉鎖）環境下で運用することの出来るSSL証明書を発行するため、mkcertを母艦（今回はmacOS環境）へインストールする。macOS環境下のterminalにて以下操作を行う。

FiloSottile/mkcert

homebrew のインストール

母艦環境下に homebrew がインストールされていない場合、これをインストールする。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew
==> The following existing directories will be made group writable:
〜 中略 〜
==> Installing Command Line Tools for Xcode-11.3
==> /usr/bin/sudo /usr/sbin/softwareupdate -i Command\ Line\ Tools\ for\ Xcode-11.3
Software Update Tool

途中、システム環境設定のソフトウェアアップデート画面が表示され、プログラムのインストールが促されるのでこれをインストールする。

その後、再度ターミナル画面内で状況が進行する。

Downloading Command Line Tools for Xcode
Downloaded Command Line Tools for Xcode
Installing Command Line Tools for Xcode
Done with Command Line Tools for Xcode
Done.
==> /usr/bin/sudo /bin/rm -f /tmp/.com.apple.dt.CommandLineTools.installondemand.in-progress
〜 中略 〜
==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations
==> Next steps:
- Run `brew help` to get started
- Further documentation: 
    https://docs.brew.sh

mkcert のインストール

homebrew のインストール完了後、 mkcert をインストールする。

$ brew install mkcert

==> Downloading https://homebrew.bintray.com/bottles/mkcert-1.4.1.catalina.bottle.tar.gz
==> Downloading from https://akamai.bintray.com/b7/b7cc76858dc35c6d3aabb07242ab6f5f079c4cb85deea4a9f66114528980914b?__gda__=exp=1577234992~hmac=82fb
######################################################################## 100.0%
==> Pouring mkcert-1.4.1.catalina.bottle.tar.gz
🍺  /usr/local/Cellar/mkcert/1.4.1: 6 files, 5.3MB

続いて mkcert の準備を行う。

$ mkcert -install
Created a new local CA at "/Users/ユーザ名/Library/Application Support/mkcert" 💥
Sudo password:
The local CA is now installed in the system trust store! ⚡️

$ mkcert your-own-hostname.local
Using the local CA at "/Users/ユーザ名/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "your-own-hostname.local"

The certificate is at "./your-own-hostname.local.pem" and the key at "./your-own-hostname.local-key.pem" ✅

mkcert によって発行された証明書を Raspberry Pi 端末内の適当なフォルダ内へ保存する。今回は pi ユーザフォルダ内に mkcert フォルダを作成し保存した。

pi@raspi4-kiosk:~/mkcert $ ls -la
total 16
drwxr-xr-x 2 pi pi 4096 Dec 25 09:46 .
drwxr-xr-x 4 pi pi 4096 Dec 25 09:45 ..
-rw-r--r-- 1 pi pi 1704 Dec 25 09:46 your-own-hostname.local-key.pem
-rw-r--r-- 1 pi pi 1627 Dec 25 09:46 your-own-hostname.local.pem
pi@raspi4-kiosk:~/mkcert $

Apache2 の設定

続いて作成した証明書を元に、Apache2をSSL対応させる。適当なエディタで /etc/apache2/sites-available/default-ssl.conf を以下のように修正する。

/etc/apache2/sites-available/default-ssl.conf
SSLEngine on

SSLCertificateFile      /home/pi/mkcert/your-own-hostname.local.pem
SSLCertificateKeyFile   /home/pi/mkcert/your-own-hostname.local-key.pem

Apache2 にて SSL を有効化し再起動する。

pi@raspi4-kiosk:~ $ sudo a2ensite default-ssl
pi@raspi4-kiosk:~ $ sudo a2enmod ssl 
pi@raspi4-kiosk:~ $ sudo systemctl restart apache2
pi@raspi4-kiosk:~ $ sudo reboot

iPad でKISOK端末に接続しHTTPS接続が正常に行われることを確認する。

コンテンツの準備

PWA を正当な手段で実装する為、manifest.json および service-worker.js を作成する。

manifest.json の作成

manifest.json
{
  "name": "PWA Sample",
  "short_name": "PWA",
  "background_color": "#fc980c",
  "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"
}

iOS では反映されないが、ホーム画面へ登録した際に使用されるアイコンファイルも適宜（ 256*256 , 192*192 ）作成し、manifest.json と共に index.html と同じ階層へ保存する。

service-worker.js の作成

service-worker.js
// 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) {});

index.html に manifest.json および service-worker.js への参照を設定する。

index.html
<html>
<head>
  <!-- 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>
  <title>Hello PWA.</title>
〜 以下略 〜

以上の手順により、iOS 13.3 で発生した PWA での障害を解消することが出来た。

参考としたウェブサイト

iOS 13.1 - Problem URL Bar |Apple Developer Forums
ローカル環境でSSLをオレオレ証明書で行っていて警告が出てる人に朗報 - Qiita
GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like.
Raspberry Pi 3のApacheにSSL環境を導入する
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita