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 より引用
当該フォーラム内で提示された「https通信環境下」で「manifest.jsonを設置する」という解決策（つまりPWAを実現する為の正当な準備をする）をRaspberry Pi4（Raspbian Buster）にて構築したKIOSK端末に実装する。
母艦側での準備
ローカル（閉鎖）環境下で運用することの出来るSSL証明書を発行するため、mkcertを母艦（今回はmacOS環境）へインストールする。macOS環境下のterminalにて以下操作を行う。
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 を以下のように修正する。
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 の作成
{
"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
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 への参照を設定する。
<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