ParcelでPWA化する最速の方法

PWAに必要なもの、こと（最低限）

• PWA化するWebサイト、Webアプリケーション
• service-worker設定ファイル（js）
• manifest設定ファイル（json）
• それらをHTMLファイルから参照するlinkタグの追記

最速の方法

1. parcel-plugin-sw-precacheの導入

npm i -D parcel-plugin-sw-precache
# =yarn add -D parcel-plugin-sw-precache

parcel-plugin-sw-precacheは、service-worker設定ファイルとHTMLからのリンクをいいカンジに生成してくれるプラグインです。
一応細かい設定もできますが、基本的にはこれを入れてParcelを動かすだけで大丈夫です。

• parcel-plugin-sw-precache - npm

2. manifest.webmanifestの作成

GoogleによるManifest Documentでは、manifest.jsonというファイル名での記述を指定していますが、このファイル名ではParcelがファイル名を改変してしまい、上手く動作しません。

そこで、MDNが指定しているmanifest.webmanifestというファイル名で記述し、HTMLファイルから

<link rel="manifest" href="/manifest.webmanifest">

のように参照します。こちらは手動です。

manifest.webmanifestの中身はmanifest.jsonと同じです。MDNによるドキュメントに記載されている例をコピペしていじればすぐに作成できます。

Example_manifest(MDN_Webサイトより)

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

以上です。

この記事を書いた理由は主に２つあります

• parcel-plugin-sw-precacheを初めて知ったため
• manifest.jsonでハマったため

もし、これらより簡単な方法があればぜひ教えてください。
では。