くぼひさです
注意！
現在、２０１９年８月５日時点に置いて、
service_worker.js:153 Uncaught TypeError: workbox.precacheAndRoute is not a function
at Object. (service_worker.js:153)
at newRequire (service_worker.js:79)
at service_worker.js:113
at service_worker.js:152
(anonymous) @ service_worker.js:153
newRequire @ service_worker.js:79
(anonymous) @ service_worker.js:113
(anonymous) @ service_worker.js:152
(index):1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker: ServiceWorker script evaluation failed
とエラーが出ます。以上のエラーが出なくなるまで、parcel-plugin-workbox-precacheを使わない方が良いと思います
以上、追記
parcel-plugin-workbox-precacheでHTML5のアプリをPWA化したのでメモを残しておきます
以前は、parcel-plugin-sw-precacheを使っていたのですが、古いライブラリなので現行のworkboxへ対応したく、調べたら、parcelでworkboxを使えるライブラリを見つけました
基本的にはマニュアル通りですが、workbox-buildを使っているので、
hoge> npm install workbox-build -D
でインストール。でないと、
Plugin parcel-plugin-workbox-precache failed to initialize: Error: Cannot find module 'workbox-build'
ってエラーが出ます
あとは、「service_worker.jsを置く所はindex.htmlと同じディレクトリ」って部分で。それらを守れば
hoge> npx parcel index.html
で、PWAが出来ます
とりあえずは、index.htmlのあるディレクトリのファイルのみでサブ・ディレクトリのファイルはキャッシュ出来ないけど、PWAにはなる状態ですね
（調べた所、index.htmlのあるディレクトリのファイルしかキャッシュ出来ない、簡易的なPWA生成ライブラリでした）
他にもnpmにはparcelとworkboxへ対応しているパッケージはあるけど、エラーが出るので、個人的には、それらを使える風になるか確かめながら、parcel-plugin-workbox-precacheを使う予定です
では、良いプログラムを