PWA builder

self.addEventListener('install', function(event) {
const indexPage = new Request('[[indexPage]]');
event.waitUntil(
fetch(indexPage).then(function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
console.log('[PWA Builder] Cached index page during Install'+ response.url);
return cache.put(indexPage, response);
});
}));
});
self.addEventListener('fetch', function(event) {
const updateCache = function(request){
return caches.open('pwabuilder-offline').then(function (cache) {
return fetch(request).then(function (response) {
console.log('[PWA Builder] add page to offline'+response.url)
return cache.put(request, response);
});
});
};
event.waitUntil(updateCache(event.request));
event.respondWith(
fetch(event.request).catch(function(error) {
console.log( '[PWA Builder] Network request Failed. Serving content from cache: ' + error );
return caches.open('pwabuilder-offline').then(function (cache) {
return cache.match(event.request).then(function (matching) {
var report =  !matching || matching.status == 404?Promise.reject('no-match'): matching;
return report
});
});
})
);
})

Enter the link to the page you want to turn into a PWA:

Convert to PWA

Options

Name (name, {{ json.name.length }}/45):

Short name (short_name, {{ json.short_name.length }}/12):

Start URL (start_url):

Scope:

Display:

Orientation:

Description:

Theme color:

Background color:

Icons:

{{icon.src}} ({{icon.sizes}}) ×

You need an icon with a size of at least 256x256 pixels! Add a link to the icon via the form below:

Add

Installing PWA

1. Download the archive from the link below

Download

2. Unzip the archive and place the contents in the root folder of the site, so that the file manifest.json opens at this link

3. Set the following code in the <head> part of the site page:

<link rel="manifest" href="/manifest.json"> <script src="/app.js"></script>

PWA builder

{{ errorTitle }}

Options

Installing PWA