Edited at

parcel-plugin-workbox-precacheを使ってみた

くぼひさです

注意!

現在、2019年8月5日時点に置いて、

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を使う予定です

では、良いプログラムを