PWA - 如何缓存 html 页面（不仅是 js，css...）

Question

如果我用，

registerRoute(
    new RegExp('.*'),
    new CacheFirst({
        cacheName: 'all',
    })
);

它将工作并缓存包含所有资产的所有页面。因此，如果我在离线模式下刷新页面，它会起作用。

但显然缓存 ALL 不是一个好主意！所以我想缓存 js|css|eot|ttf|otf|woff|woff2，当然还有 html。

所以如果我使用

registerRoute(
    new RegExp('(\.(js|css|eot|ttf|otf|woff|woff2)$)'), // <<== how to add html type here to be cached?
    new CacheFirst({
        cacheName: 'all',
    })
);

并在离线模式下刷新页面，由于没有缓存，无法查看页面。

我正在使用 Vuejs、Mix、Workbox。

Answer 1

有许多不同的选择 configuring runtime routing and caching; you can also create multiple routes with different strategies for each type of resource. Routing based on the request.destination value 是一种相当稳健的方法。

我会避免对任何未版本化的 URL 使用 CacheFirst 策略，因为您没有很好的方法来确保它在部署更改后得到更新。 StaleWhileRevalidate 或 NetworkFirst 是用于不包含哈希值的 URL 的更安全策略。

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate, NetworkFirst} from 'workbox-strategies';

registerRoute(
  // Match HTML document requests.
  ({request}) => request.destination === 'document',
  new NetworkFirst({
    cacheName: 'html',
  })
);

registerRoute(
  // Match JS, CSS, and font requests.
  ({request}) => ['font', 'script', 'style'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'resources',
  })
);

PWA - 如何缓存 html 页面（不仅是 js，css...）

PWA - How to cache html pages (not only js, css...)

javascript

vue.js

progressive-web-apps

laravel-mix

workbox