92日目 割烹芸人の実装8
今回は作ったサービスをPWA化していきます。
PWA（Progressive Web Apps）はWebアプリケーションをネイティブアプリのようなものにするための仕組みです。
WebアプリケーションをPWA化させることで、オフラインでも動作可能になったり（データの更新を行わない場合）、プッシュ通知（android）を使えるようになったりと、色々なメリットがあります。
スマホユーザーが増えている現状ではこれに対応しておくのが無難だと思われます。
特にオフラインで動かしたり、プッシュ通知したりしないですが、勉強を兼ねてどんな感じになるか知りたいのでPWA化しておきます。
参考
プログレッシブウェブアプリ
https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps
■導入するために必要な物
WebアプリケーションをPWAにするためにはいくつか準備することがあります。
・HTTPS
HTTPS通信を使用している場合のみPWA化することができます。
・サービスワーカー
キャッシュファイルの設定と、インストール処理とキャッシュロード処理を設定します。ここで設定したものがオフラインでも動作するようになります。
・マニフェストファイル
アプリをどのようにユーザーに表示させるかの設定ファイル。
この3つの準備をすることで使えるようになります。
それぞれやっておきます。
1. HTTPS化
HTTPSへはサーバー設定の段階でLet’s Encryptを使って対応させているので問題ないです。また開発環境ではHTTPでPWAの動作確認ができるみたいなので、ここはOK。
2. Service Workerへの登録
ネイティブアプリでやっていたようなことができるようになる仕組み。必要なファイルをキャッシュさせて読み込めるようにできる。
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
こんな感じの設定をPWA化させたいページに書き込めばOKなようですね。sw.jsというのがサービスワーカー用のjavascriptでここで処理を決める感じ。ということでこれを共通テンプレートに追加。
実際のsw.jsの中身はこんな感じ。
// Cache name
const CACHE_NAME = 'pwa-k-editor-caches-v1';
// Cache targets
const urlsToCache = [
'top.css',
'base.css',
'logo.png',
'editor/editor.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches
.open(CACHE_NAME)
.then((cache) => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches
.match(event.request)
.then((response) => {
return response ? response : fetch(event.request);
})
);
});
キャッシュ名とキャッシュさせたいファイル。あとは、キャッシュ処理とキャッシュファイルがあった場合の処理。
他にも更新用の設定など書いてもいいですが、今回は省略。
とりあえずinstallでキャッシュしたいファイルを保存。
fetchでキャッシュしたファイルがあればそれを読み込む感じ。
全てのページで使うimg, CSS, Javascriptをここでキャッシュさせておけば結構いちいちこのファイルをサーバーから読み込まなくてもいいので。動作速度が上がります。
静的なページはここでキャッシュさせておけば、オフラインでも動作させることが可能になります。
3. マニフェストファイルの作成と読み込み。
マニフェストファイルの仕様は以下のページを参考にして作成。
ウェブアプリマニフェスト
https://developer.mozilla.org/ja/docs/Web/Manifest
とりあえずこんな感じにしてみた。
{
"name": "k-editor",
"short_name": "k-editor",
"start_url": "../",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#FFDF97",
"description": "k-editor is an editor for Katsudo Hokoku in syousetuka ni narou.",
"icons": [
{
"src": "Logo192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "Logo512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
これを共通部分に追加
<link rel="manifest" href="{% static 'manifest.json' %}">
これで完成ですね。
こんな感じに、+マークがアドレスバーに出て、インストールすることができます。
スマホの人は、ブラウザの「ホーム画面に追加」を押すとインストールすることができます。
これをすると若干早くなります。
はい、ということでPWA化も完了です。
スマホ版割烹の最大最強の敵、ユニバーサルセレクタ先輩。
色指定されていない要素をすべて#333333で塗りつぶすというオールレンジ攻撃に苦しめられた割烹芸人は多い。
まじ勘弁してください……
