Hello everyone 
I’m new here, i want to create a PWA to be able to create one’s own meal plans, like ton the screenshot:
However, I really don’t know where to start.
I thought about using a template, what do you think ? Where to find them ?
Thank you very much,
Nick
Hey @nicostv2, I have DMed you the instructions as per your request, but for anyone else who’s interested:
PWA is something that once you learn, you should be able to implement to almost any of your projects because the code is same for each PWA, no matter what the application does. I’ll be able to give you a template that you can add to your website, and thus, create a PWA.
A PWA contains 4 essential things:
manifest.json: it is more like the config file of the PWAsw.js: PWAs use Service Workers to cache assets and make them progressiveWe’ll create a manifest.json first.
but you’re free to choose whatever you like. Then on the right side, upload the icon and you’ll get to download a ZIP file which contains your logo with different dimensions along with the manifest.json file with all the values we entered.If you change the location of the logos, make sure to update their paths in manifest.json as well, because the manifest.json has each of the logos (of different sizes) with their urls.
sw.js or anything that indicates that the files is a service worker.Copy this code into your sw.js file:
const staticCacheName = 'name-of-pwa';
const assets = [
'./scripts.js',
'./style.css',
'./https://cdn.jsdelivr.net/npm/marked/marked.min.js'
];
self.addEventListener('install', evt => {
evt.waitUntil(
caches.open(staticCacheName).then((cache) => {
console.log('caching shell assets');
cache.addAll(assets);
})
);
});
self.addEventListener('activate', evt => {
evt.waitUntil(
caches.keys().then(keys => {
return Promise.all(keys
.filter(key => key !== staticCacheName)
.map(key => caches.delete(key))
);
})
);
});
self.addEventListener('fetch', evt => {
evt.respondWith(
caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request);
})
);
});
In line 2 of the code, you’ll see an array named assets. And I have included a few urls as an example. In that array, make sure to add all the assets your project uses, such as images, fonts, scripts and styles. What happens is, the service worker will cache all the urls and files listed in the array for a “Progressive Web App”. The third url that I provided in the array is just an example. Also make sure to replace name-of-pwa on line 1 with the name of your pwa (or any name for identification of the cache).
<head> tags, add the following code:<script>
if('serviceWorker' in navigator){
navigator.serviceWorker.register('sw.js')
.then(reg => console.log('service worker registered'))
.catch(err => console.log('service worker not registered', err));
}
</script>
In line 2 of the above code, make sure to replace sw.js with the file path of the service worker file we created in the above step.
manifest.json file. Add the following code before the closing <head> tags:<link rel="manifest" href="/manifest.json">
Make sure the href points towards the location of the manifest.json file.
All the above files including the images of different sizes are static assets, so if you have a separate configuration for static assets (like the public folder for an Express/Node.js setup), make sure to add all the above files into the static directory and make sure the urls everywhere point correctly to the desired file.
Maybe I should create a tutorial…
please do! would really help!
This website shows “Go 1.9 is no longer available. Please refer to Feature deprecations | Google App Engine standard environment docs | Google Cloud for more information.” after clicking “generate .zip”. Do you have other website suggestions to generate web app manifest? Thank you!