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

`iPad OS 13.3`上で`PWA`を正常稼働させるには以前投稿した「<a href="https://qiita.com/osprey74/items/3eea71c93ffe9c90c54c#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E4%BD%9C%E6%88%90%E4%B8%8A%E3%81%AE%E5%95%8F%E9%A1%8C%E7%82%B9">RaspberryPiとiPadでKIOSK端末を作成する#コンテンツ作成上の問題点</a>」では不足で、２ページ目以降に「完了」および「文字サイズ変更メニュー」を含んだメニューバーが画面上部に表示されてしまう。
※ 添付画像破線部分を参照。
![IMG_0020.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279688/d02ae294-a7ce-3e73-cf4e-ae78ab2b1274.png)


「RaspberryPiとiPadでKIOSK端末を作成する#コンテンツ作成上の問題点」より抜粋
> コンテンツページへのブックマークをホーム画面上に保存すると、疑似的なPWA（Progressive Web Apps）として扱う事が出来る。その場合、html内に以下metaデータを登録する必要がある。

```html
<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` より引用
> <a href="https://forums.developer.apple.com/thread/123486">iOS 13.1 - Problem URL Bar</a>
<img width="935" alt="スクリーンショット 2019-12-25 10.24.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279688/d60cb3d5-606d-fe83-61d4-c506948ef1fa.png">

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

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

> <a href="https://github.com/FiloSottile/mkcert">FiloSottile/mkcert</a>

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

```shell
$ /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
```

途中、システム環境設定のソフトウェアアップデート画面が表示され、プログラムのインストールが促されるのでこれをインストールする。
<img width="678" alt="スクリーンショット 2019-12-25 9.33.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279688/f3dc53f5-8265-2809-f24d-15a2e87be251.png">
その後、再度ターミナル画面内で状況が進行する。

```shell
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` をインストールする。

```shell
$ 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` の準備を行う。

```shell
$ 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` フォルダを作成し保存した。

```shell
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` を以下のように修正する。

```shell:/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 を有効化し再起動する。

```shell
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 の作成

```shell: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 の作成

```shell: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 への参照を設定する。

```shell: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` での障害を解消することが出来た。


#参考としたウェブサイト
<a href="https://forums.developer.apple.com/thread/123486">iOS 13.1 - Problem URL Bar |Apple Developer Forums</a>
<a href="https://qiita.com/walkers/items/b90a97a99bbb27f6550f">ローカル環境でSSLをオレオレ証明書で行っていて警告が出てる人に朗報 - Qiita</a>
<a href="https://github.com/FiloSottile/mkcert">GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like.</a>
<a href="http://itemy.net/?p=1052">Raspberry Pi 3のApacheにSSL環境を導入する</a>
<a href="https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20">PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita</a>