Install simple service-worker

[mazipan]

Please add simple service-worker

[tyohan]

Saya coba lanjutin dulu ya ini sebelum ada yang mo utilize service worker lebih jauh.

[tyohan]

Ini service worker masih belum jalan di webpack dev. Kayaknya precache manifest not found dari webpack dev server. Ada yang pernah ngalamin hal seperti ini dengan workbox webpack module? @mazipan @praditautama

[achmadk]

Contoh generated service worker dengan konfigurasi workbox webpack plugin

webpack.config.js

new WorkboxPlugin.GenerateSW({
      importWorkboxFrom: 'local',
      clientsClaim: true,
      skipWaiting: true
    })

service-worker.js

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://goo.gl/2aRDsh
 */

importScripts("/workbox-v3.4.1/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "/workbox-v3.4.1"});

importScripts(
  "/precache-manifest.43045ad58d0440ea5276817d6837dc24.js"
);

workbox.skipWaiting();
workbox.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

Mungkin karena belum importScript workbox sama precache manifest-nya jadinya belum aktif service worker-nya mas @tyohan

[mazipan]

Memang belum di set di development kan. Gua pribadi gak ngerasa butuh setup workbox buat development ya.

[achmadk]

apa saya PR pindahin inisiasi workbox-webpack-plugin ke production aja ya mas @mazipan ? commit terakhir inisiasi workbox-webpack-plugin ada di file webpack.config.common.js (diterapkan pada development sama production).

[tyohan]

@achmadk @mazipan kalau mau benerin mending coba benerin SW di development karena klo dipindahin harus merubah code pada t-app.js juga yang me-register service worker di ready callback.

[tyohan]

Close dulu karena di production jalan ini.

[achmadk]

Setelah mbaca kode-nya register-service-worker, dia pake fungsi fetch untuk memanggil file service worker-nya. File service-worker.js baru mulai di-load setelah semua asset (image, font, css, dan json) berhasil dimuat, sehingga ketika dipanggil fungsi fetch di ready callback-nya t-app masuk exception karena not found. Service worker ter-register setelah semua asset berhasil di-load sama workbox.

Apa di delete aja ready callback-nya t-app sama hapus library register-service-worker karena sudah dihandle sama workbox ya mas @tyohan ?

[tyohan]

@achmadk tapi jalan di production, jadi isunya harusnya bukan register-service-worker. Dan workboxnya tidak kita pakai auto register karena index.html kita copy bukan digenerate