Message Boards

How we store the pages in cache, the website can work also offline with PWA

Samaresh Barui, modified 2 Years ago.

How we store the pages in cache, the website can work also offline with PWA

New Member Post: 1 Join Date: 10/6/20 Recent Posts

How we store the pages in cache, so that the website can work also in offline mode with PWA.?

 

Steps I followed to make a PWA compatible site:

 

1. Created a theme
2. Created manifest.json file into the theme and added the below code, also uploaded required images which were mentioned in the json file.
{
  "short_name": "RBI Test",
  "name": "RBI Test",
  "icons": [
    {
      "src": "images/android-chrome-192x192-1.png",
      "type": "image/png",
      "sizes": "192x192"
    },  
    {
      "src": "images/android-chrome-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
{
      "src": "images/maskable_icon_x512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ],
  "start_url": "/",
  "background_color": "#272833",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#272833"
}
3. Created service worker(sw.js) file in the theme
4. Added manifest.json file path into portal_normal.ftl in the theme.
5. Below script tag added in portal_normal.ftl file into the theme.
<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/o/sample-theme/sw.js', { scope: '/' }).then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
</script>
5. We have also made the domain https
6. Added ' Header always set Service-Worker-Allowed "/" ' into apache config file.

 

After the deployment of the theme we created a PWA compatible site.  When we open the site in a mobile we are able to see the add shortcut in the home screen  option Also in the offline mode previously opened pages are showing with all the contents but when we try to redirect by clicking any page that time it requires the internet and shows "The site cannot be reached". Please help how we store the pages in cache, so that the website can work also in offline mode with PWA.