`navigateFallback` with express routing (return 404)

[Shyam-Chen]

https://github.com/GoogleChrome/sw-precache/blob/master/app-shell-demo/gulpfile.babel.js#L140

[...]
  navigateFallback: 'index.html',
[...]

---

http://localhost:8000/list <- 404

[...]
  navigateFallbackWhitelist: [/^\/list\//],
[...]

import { Router } from 'express';

import { List } from '../models';

const router = Router();

router.get('/', (req, res, next) => {
  List.find({}, (err, data) => {
    if (err) return next(err);
    res.json(data);
  });
});

router.get('/:text', (req, res, next) => {
  const list = new List({
    text: req.params.text,
    created: new Date()
  });

  list.save(err => {
    if (err) return next(err);
    console.log('List saved successfully.');
    res.redirect('/list');
  });
});

export const listRoutes = router;

[...]
app.use('/list', listRoutes);

app.use(express.static(root));
[...]

[coryshaw]

@Shyam-Chen did you figure out the solution? Having the same issue.

[Shyam-Chen]

Change to Workbox.

// ...
const { GenerateSW } = require('workbox-webpack-plugin');

// ...
    new GenerateSW({
      skipWaiting: true,
      clientsClaim: true,
      runtimeCaching: [{
        urlPattern: new RegExp(env.SITE_URL),
        handler: 'staleWhileRevalidate',
      }],
      navigateFallback: '/',
      navigateFallbackWhitelist: [/^(?!\/__).*/],
      cacheId: pkg.name,
    }),
// ...