iOSにも対応したService Workerを使ってPWAの基礎を学ぶ

2018年11月23日2022年10月11日

URLをコピーしました！

やっと、iOS 11.4（Safari 11.1）からPWA（Progressive Web Apps）に対応しました！
簡単に何ができるかと言うと、WEBアプリをオフラインでも動作するネイティブアプリのように振る舞うことができるようになりました。
これを利用すると、Appleに開発者の年間登録費を払わずに済みますし、Apple StoreやGoogle Playを通さなくても自由に公開できます。
また、SwiftやJavaに囚われることもなく、好きなプログラミング言語で自由に開発できます。

Service WorkerとPWAの基礎知識

まずは、Service WorkerとPWAについて少し触れておいてください。
実装するだけなら簡単ですので、こんなものなのかぁ～程度で良いと思います。

Service Workerとは？

Service Workerはバックグラウンドで実行するスクリプトです。
オフラインでも動作するWEBアプリを実現することができます。

PWA（Progressive Web Apps）とは？

Service Workerを利用して、WEBアプリをAndroidやiOSのネイティブアプリのように使える仕組みのことです。
PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWEBサイトに持たせる事ができます。

ナイルのSEO相談室

PWA〈Progressive Web Apps〉とは？PWAの機能と導入するメリットを解説 | ナイルのマーケティング相談室 PWAとは、モバイル向けWebサイトにスマートフォンアプリ化する仕組みです。プッシュ通知などの豊富な機能や、導入のメリット、導入事例、PWAの注意点についてご紹介します…

PWAの基礎を作る

それでは早速、PWAの基礎を作ってみましょう。

準備するファイル

PWAを作るには、Service Workerを始め以下のファイルを作成してHTMLに記述する必要があります。

ファイル名	説明
manifest.json	WEBアプリのマニフェスト。ホーム画面追加時の設定をする。
service-worker.js	バックグラウンドで実行するスクリプト。オフライン時の処理（キャッシュなど）をここに書く。
favicon.ico	ブラウザ用のファビコン。
apple-touch-icon.png	ホーム画面に追加するアイコン。
launch.png	アプリ起動時のスプラッシュ画像。

PWAに必要なもの

各ファイルをHTMLに組み込む

manifest.json

JSON形式のファイルです。
ホーム画面などにウェブアプリやサイトを表示する方法を制御し、ユーザーが起動できる対象や起動時の外観を指定することができます。
サイトのブックマークを端末のホーム画面に保存することができます。
HTMLファイルには、headタグ内にlinkタグで記載します。

{

"name": "[アプリの名前]",

"short_name": "[アプリの略称]",

"icons": [{

"src": "images/icons/icon-128x128.png",

"sizes": "128x128",

"type": "image/png"

}, {

"src": "images/icons/icon-144x144.png",

"sizes": "144x144",

"type": "image/png"

}, {

"src": "images/icons/icon-152x152.png",

"sizes": "152x152",

"type": "image/png"

}, {

"src": "images/icons/icon-192x192.png",

"sizes": "192x192",

"type": "image/png"

}, {

"src": "images/icons/icon-256x256.png",

"sizes": "256x256",

"type": "image/png"

}],

"start_url": "/",

"display": "standalone",

"background_color": "#FFFFFF",

"theme_color": "#FFFFFF"

}

HTML側では以下のように呼び出します。

1	<link rel="manifest" href="/manifest.json">

manifest.json内のオプションについては以下を参考にしてください。

web.dev

ウェブアプリマニフェストを追加する | Articles | web.dev ウェブアプリマニフェストは、ウェブアプリの動作をブラウザに伝えるためのシンプルな JSON ファイルです。

service-worker.js

Service Workerを利用するには、HTTPSかローカルの環境が必要になります。
ここ紹介するPWAは、オフライン操作を想定していませんので空でも構いませんが、基本的なパーツだけ記述しておきます。

self.addEventListener('install', function(e) {

console.log('[ServiceWorker] Install');

});self.addEventListener('activate', function(e) {

console.log('[ServiceWorker] Activate');

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

console.log('[ServiceWorker] Fetch');

});

内容は以下を参考に後から追加してくださいね！

Google for Developers

プログレッシブウェブアプリ: オフライン | Google for Developers

アイコン・スプラッシュ画像

出典：Designing Native-Like Progressive Web Apps For iOS – Appscope – Medium

manifest.jsonをご紹介した時点でもうお気付きだと思いますが、以下の3つの画像はデバイスやOSに合わせて複数用意しなければなりません。
特に注意していただきたいのがスプラッシュ用の画像です。
これは、manifest.jsonに設定した内容があれば、Androidなら不要なのですが、iOSの場合はデバイスのサイズに合わせて複数用意する必要があります。
それでは、3つの画像の指定方法についてご紹介していきます。

favicon.ico

以前は、サイズが16×16で拡張子が.icoのアイコンファイルが主流だったのですが、現在では、32×32で透過できる.pngファイルを利用することが多いようです。.icoの場合

1	<link rel="icon" href="/favicon.ico" />

複数のサイズを指定すると以下のようになります。

.pngの場合

また、以下のように複数のサイズのアイコンを1行で指定することもできるようですが、綺麗に拡大・縮小されるかはクライアント側に依存するようです。

1	<link rel="icon" href="/favicon.png" sizes="16x16 24x24 32x32 48x48 64x64 96x96" />

apple-touch-icon.png

iOSの場合
こちらは、iOSのホーム画面に表示する用のアイコンになります。
例として様々なサイズを指定していますが、基本は152×152があれば良いようです。

AndroidとChromeの場合
AndroidとChromeでは、192×192のサイズが推奨されているようなので、1つ用意するだけで良いでしょう。
書き方はファビコンの.png版と同じです。

1	<link rel="icon" href="/icon-192x192.png" sizes="192x192" />

launch.png

前述の通り、iOS用のスプラッシュ画像として必要になります。
Androidでは、manifest.jsonで指定した背景色（background_color）にアイコンが表示される仕組みになっているのですが、iOSでは全画面表示用の画像を作らなければなりません。
それも、デバイス別に解像度が異なるので、複数作成しなければなりません。
そこで、アイコンからスプラッシュ画像まで一括で作成してくれる「App Image Generator」が便利です。

参考サイト

Qiita

[HTML] ファビコンの設置について – Qiita #ファビコン画像ジェネレーターFavicon Generator for all platforms: iOS, Android, PC/Mac…#HTMLコード昔ながらのファビコン指定コ…

Qiita

【解決方法】iOS端末でPWAのスプラッシュ画面が真っ白になる – Qiita 問題iOS端末でPWA（プログレッシブウェブアプリ）のスプラッシュ画面が真っ白になり、アイコン、アプリ名などが表示されない。バージョンiOS 11.3詳細manifest.jsonでName…

参考サイトにサンプルコードがありましたので、ぜひ確認してみてください。

GitHub

GitHub – NaokiIshimura/Qiita-PWA-iosSplashScreen Contribute to NaokiIshimura/Qiita-PWA-iosSplashScreen development by creating an account on GitHub.

WEBの可能性が広がりました。
後は、Safariでもプッシュ通知に対応してくれれば完璧ですね！

知識ゼロからのWebアプリ開発入門

著:町田耕, 監修:TechAcademy

¥2,458 （2024/04/14 06:59時点 | Amazon調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

コメント一覧（2件）

LighthouseでPWA対応のウェブアプリを評価する2つの方法 | Minory より:

2019年8月6日 5:22 PM

[…] Web Apps）に興味があり、実は密かにウェブアプリを開発しています。 iOSにも対応したService Workerを使ってPWAの基礎を学ぶhttps://minory.org/pwa.htmlやっと、iOS 11.4（Safari 11.1）からPWA（Progressive Web […]

返信
支援求む！ウェブアプリを集めた「PWA Store」を制作します！ | Minory より:

2019年8月19日 12:00 PM

[…] PWAの概要については過去の記事をご参照ください。 iOSにも対応したService Workerを使ってPWAの基礎を学ぶhttps://minory.org/pwa.htmlやっと、iOS 11.4（Safari 11.1）からPWA（Progressive Web […]

返信