sw-precache 是什麼？

介紹 sw-precache 是什麼之前、我們先來了解為什麼要有 sw-precache？
我們在之前的文章裡建立 Service Worker 的檔案，於 sw.js 的檔案內新增 install、activate、fetch 事件，藉由 Service Worker 的生命週期，加入對應的行為，而今天要介紹 sw-precache，分享要如何透過 sw-precache，讓你開開心心、快快樂樂更輕鬆生成 Service Worker 檔案，不需要自己新增 Service Worker 的檔案，省下更多寫 code 時間。

sw-precache 由 Google(GoogleChrome) 推出，sw-precache 的解釋，在官方文件的說明有提到：

A node module to generate service worker code that will precache specific resources so they work offline.

透過 sw-precache，你可以用最小的修改，更有效率地建立 Service Worker 檔案，完成 precache 的功能，實作網站能夠離線運作的目標。

sw-precache 如何使用？

Local build integration

npm install --save-dev sw-precache

Global command-line interface

npm install --global sw-precache

參考文件

• GoogleChrome/sw-precache
• Using sw precache - YouTube
• Offline-first, fast, with the sw-precache module
• Adding a Service Worker with sw-precache
• Automating service worker cache management with sw-precache
• 使用service worker+sw-precache实现网站加速
• 使用 React.js 的渐进式 Web 应用程序：第 3 部分 - 离线支持和网络恢复能力