How we store the pages in cache, the website can work also offline with PWAHow we store the pages in cache, the website can work also offline with PWAhttps://liferay.dev/en/c/message_boards/find_thread?p_l_id=119785333&threadId=1213272172024-03-29T12:20:36Z2024-03-29T12:20:36ZHow we store the pages in cache, the website can work also offline with PWASamaresh Baruihttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1213272162022-01-11T06:05:51Z2022-01-11T04:56:51Z<p>
<em>
<strong>How we store the pages in cache, so that the website can
work also in offline mode with PWA.?</strong></em></p>
<p> </p>
<p>
<b>
<u>Steps I followed to make a PWA compatible site:</u></b></p>
<p> </p>
<p>1. Created a theme<br /> 2. Created manifest.json file into the theme
and added the below code, also uploaded required images which were
mentioned in the json file.<br /> {<br /> "short_name":
"RBI Test",<br /> "name": "RBI
Test",<br /> "icons": [<br /> {<br />
"src":
"images/android-chrome-192x192-1.png",<br />
"type": "image/png",<br />
"sizes": "192x192"<br /> }, <br />
{<br /> "src":
"images/android-chrome-512x512.png",<br />
"type": "image/png",<br />
"sizes": "512x512"<br /> },<br /> {<br />
"src": "images/maskable_icon_x512.png",<br />
"type": "image/png",<br />
"sizes": "512x512",<br />
"purpose": "maskable"<br /> }<br /> ],<br />
"start_url": "/",<br />
"background_color": "#272833",<br />
"display": "standalone",<br />
"orientation": "portrait",<br />
"theme_color": "#272833"<br /> }<br /> 3. Created
service worker(sw.js) file in the theme<br /> 4. Added manifest.json
file path into portal_normal.ftl in the theme.<br /> 5. Below script
tag added in portal_normal.ftl file into the theme.<br />
<script><br /> if ('serviceWorker' in navigator) {<br />
window.addEventListener('load', function() {<br />
navigator.serviceWorker.register('/o/sample-theme/sw.js', { scope: '/'
}).then(function(registration) {<br />
console.log('ServiceWorker registration successful with scope: ',
registration.scope);<br /> }, function(err) {<br />
console.log('ServiceWorker registration failed: ', err);<br />
});<br /> });<br /> }<br /> </script><br /> 5. We have also
made the domain https<br /> 6. Added ' <b>Header always set
Service-Worker-Allowed "/" </b>' into apache config file.</p>
<p> </p>
<p>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 <b>add
shortcut in the home screen </b>
<b>option</b>
<b>. </b>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 "<b>The site cannot
be reached</b>". Please help how we store the pages in cache,
so that the website can work also in offline mode with PWA.&