varun sharma varun sharma - 6 days ago 4
Javascript Question

How to run offline "Progressive Web Apps"?

I am new in progressive Webs Apps development. I want to implement progressive webs app. So I have implemented one demo page and this page working fine with net connection but without network(In Offline) it is not working.


I want to open my progressive website without any internet connection(offline). I have seen one link https://developers.google.com/web/fundamentals/getting-started/codelabs/offline/. And I have implemented service worker javascript file.

enter image description here

I will explain step by step:

First Step:

I am using web server chrome:

enter image description here

Second Step:
index.html

// Register the service worker if available.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js').then(function(reg) {
console.log('Successfully registered service worker', reg);
}).catch(function(err) {
console.warn('Error whilst registering service worker', err);
});
}

window.addEventListener('online', function(e) {
// Resync data with server.
console.log("You are online");
Page.hideOfflineWarning();
Arrivals.loadData();
}, false);

window.addEventListener('offline', function(e) {
// Queue up events for server.
console.log("You are offline");
Page.showOfflineWarning();
}, false);

// Check if the user is connected.
if (navigator.onLine) {
Arrivals.loadData();
} else {
// Show offline message
Page.showOfflineWarning();
}

// Set Knockout view model bindings.
ko.applyBindings(Page.vm);


Service-worker.js

// Use a cacheName for cache versioning
var cacheName = 'v1:static';

// During the installation phase, you'll usually want to cache static assets.
self.addEventListener('install', function(e) {
// Once the service worker is installed, go ahead and fetch the resources to make this work offline.
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll([
'./index.html',
'./screen.css',
'./script.js',
'./styles/app.css',
'./styles/font.css',
'./styles/header.css',
'./styles/hidden.css',
'./styles/list.css',
'./styles/page.css',
'./styles/suggest.css',
'./styles/tags.css',

]).then(function() {
self.skipWaiting();
});
})
);
});

// when the browser fetches a URL…
self.addEventListener('fetch', function(event) {
// … either respond with the cached object or go ahead and fetch the actual URL
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
// retrieve from cache
return response;
}
// fetch as normal
return fetch(event.request);
})
);
});





Third Step
Check in Network:


enter image description here

Check in Application:

Service-worker.js file working fine you can see in screen shot:


enter image description here

But when I clicked on offline check box my website is not working. If all these things did right way then its have to open in offline.
enter image description here

If anything missing then please let me know. Please don't decline this question. If anybody has an idea then please share.


If anybody has doubt then see this link https://pwa.rocks/. You can
open this link in chrome and after then without internet connection it
will open.


If explanation need then please ask from me.

Answer

You need an extra condition for the root request / when handling the fetch event:

self.addEventListener('fetch', function(event) {
    // … either respond with the cached object or go ahead and fetch the actual URL
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                // retrieve from cache
                return response;
            }

            // if not found in cache, return default offline content (only if this is a navigation request)
            if (event.request.mode === 'navigate') {
                return caches.match('./index.html');
            }

            // fetch as normal
            return fetch(event.request);
        })
    );
});
Comments