はじめに
Webサービスを提供していると「アプリだったらいいのに」という声をよく聞くことになります。こういった声の多くは「webだとアクセスし難い」ということが原因です。
これをサクッと解決できるのがPWAです。
サクッとPWA対応
下記の通りに実装すればスマホなどの端末でインストールを促す状態にできますが、細かい設定などはおいおい対応した方がいいと思うのでまずは「サクッと」対応する程度で下記を読み進めていただければと思います。詳しく知りたい方はこちらが参考になると思います。
HTMLのヘッダー
<!-- ▼ pwa -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#eeeeee">
<!-- ▼JS -->
<script type="text/javascript">
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then((reg) => {
});
}
</script>2つのファイルを読み込んでいます。
manifest.jsonとsw.jsです。
それぞれのファイルの解説は下記の通りです。
manifest.json
{
"name": "サービス名",
"short_name": "サービス名",
"start_url": "./index.php",
"display": "standalone",
"orientation": "any",
"background_color": "#fff",
"theme_color": "#eeeeee",
"icons": [
{
"src": "/img/logo.png",
"type": "image/png",
"sizes": "600x600"
}
]
}
manifest.jsonではサービスの情報をまとめます。
やってしまいがちなのがiconsのsizesを間違ってしまうことです。
ここで設定するのはホーム画面に登録されたときに表示するアイコンの設定ですが、実際のアイコンのサイズとsizesに乖離があるとエラーになります。
sw.js
const le = true;
if (le) console.log('Service Worker Start');
if (le) console.log('import workbox');
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
if (le) console.log('skipWaiting');
workbox.core.skipWaiting();
if (le) console.log('clientsClaim');
workbox.core.clientsClaim();
self.addEventListener('install', function(event) {
if (le) console.log('Service Worker Install', event);
});
self.addEventListener('activate', function(event) {
if (le) console.log('Service Worker Activate', event);
});
if (le) console.log('Service Worker End');
//offline
workbox.precaching.precacheAndRoute([
]);
sw.jsに関してはサクッと実装する上ではおまじないと思ってください。
googleのworkbox-sw.jsを読み込んでそれにお任せするような形です。
最後に
gokeでは上記のようなプログラムを駆使して新しいサービスを制作しています。気になることなどがあればコメントまたはTwitterでご連絡ください。