How to give offline support to a website

Question

I am developing a sales website that using PHP/MySQL for a grocery store.

I see some websites that can reload the whole website and work even when no internet access. For example, at the first time, I went to abc.com, everything works normally. But after that, I closed the website, disconnected to the internet (I unplugged the cable), and access the website again. It is still there and loaded everything. How can they do this?

For the list of products, I know need to save it in local storage or cache so I can reuse it. But what about CSS, HTML code, javascript code to load the website?

Hope you understand, sorry for my bad English.

Answer 1

This is by no means gives your site full offline support you need to look at your use cases and what you want offline for and plan how you want to handle it.

This is just the basic code for setting up a service worker which is your first step in getting offline support

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json

https://developers.google.com/web/fundamentals/codelabs/offline/

index.js

// Register the ServiceWorker
navigator.serviceWorker.register('service-worker.js', {
  scope: '.'
}).then(function(registration) {
  // The service worker has been registered!
});

service-worker.js

 self.addEventListener('fetch', function(event) {
  if(event.request.url.indexOf("download-file") !== -1) {
    event.respondWith(event.request.formData().then(function (formdata){
      var filename = formdata.get("filename");
      var body = formdata.get("filebody");
      var response = new Response(body);
      response.headers.append('Content-Disposition', 'attachment; filename="' + filename + '"');
        return response;
      }));
    }
});

https://hacks.mozilla.org/2015/11/offline-service-workers/

this tutorial should give you a good idea on what is needed to give offline support