Cache by URL - Grav CMS Dynamic PHP - need help

[STnetwork]

Library Affected: workbox-sw, workbox-build, etc.

Browser & Platform: "all browsers".

Issue or Feature Request Description: Need Information about Cache by URL on the CMS Grav , Dynamic PHP

Hi,

My website is based on Grav CMS, it's an application PHP, so it's completely dynamic I don't have any static file instead of the styles files, so I would like to cache for offline my website by the URL is it possible ?

Thanks

[gauntface]

@STnetwork yes it's possible, your server will need to create some kind of hash for each url you cache and use that to precache.

So on your server you'd need to create a javascript array like:

const precacheList = [
  {url: '/' revision: '1234567'},
  {url: '/styles/index.css', revision: '1234567'},
  {url: '/scripts/index.js', revision: '1234567'}.
];

Then you can use that in your SW:

importScripts('<Path to workbox-sw>');

<Inject precache list here>

const workbox = new WorkboxSW();
workbox.precache(precacheList);

[STnetwork]

I am going to try it ! thanks

[STnetwork]

Hey @gauntface

I did it, but I can only access offline to the js and css files, but not the root site and the rest site too.

importScripts('workbox-sw.prod.v2.0.3.js');

/**
 * DO NOT EDIT THE FILE MANIFEST ENTRY
 *
 * The method precache() does the following:
 * 1. Cache URLs in the manifest to a local cache.
 * 2. When a network request is made for any of these URLs the response
 *    will ALWAYS comes from the cache, NEVER the network.
 * 3. When the service worker changes ONLY assets with a revision change are
 *    updated, old cache entries are left as is.
 *
 * By changing the file manifest manually, your users may end up not receiving
 * new versions of files because the revision hasn't changed.
 *
 * Please use workbox-build or some other tool / approach to generate the file
 * manifest which accounts for changes to local files and update the revision
 * accordingly.
 */
const precacheList = [
  {url: '/', revision: '1234567'},
  {url: '/user/themes/haywire/dist/css/app.css', revision: '1234567'},
  {url: '/user/themes/haywire/dist/js/app.js', revision: '1234567'}
];

const workboxSW = new self.WorkboxSW();
workboxSW.precache(precacheList);

This is the website where I try to do that : https://stnetwork.fr/

[gauntface]

Your service worker should be at the root of your site (i.e. https://stnetwork.fr/sw.js)

This is related to service worker scope. See "Service Worker Scope 101" https://medium.com/dev-channel/testing-service-workers-318d7b016b19

[STnetwork]

@gauntface Yes ! I put it on the root of my site, so now the root of my site is cached offline ! but only the root, so I guess I have to do something else in my sw.js for cache the whole site offline ?

edit1 : Do I need to put all links manually like that :

const precacheList = [
  {url: '/', revision: 'b8b232ada4215363cd6d926aa89d5e20'},
  {url: '/linux/centos/centmin-mod-lemp-web-stack-yum-updates-auto-centos-7', revision: '171f5c3b57e70c5a5711509ed41fc27e'},
  {url: '/user/themes/haywire/dist/css/app.css', revision: 'eba25e027fffaff4781a5772cdad5c7f'},
  {url: '/user/themes/haywire/dist/js/app.js', revision: 'f8b6a3e81d6f9573322d6ba2b88ba9b2'}
];

Or I can do that automatically ?

[gauntface]

@STnetwork you'll need to write the code to find the files you want to cache and add them to the list.

[STnetwork]

@gauntface Ok it's good for me, last question how I can generate this sw conf with workbox-webpack-plugin ?

[gauntface]

Best bet would be to look here: https://workboxjs.org/get-started/webpack.html

If you get stuck with that, probably best to raise an issue on stackoverflow.

[diazwatson]

Hi @STnetwork did you manage to get workbox to work with Grav?