Where to start?

Hello everyone :slight_smile:

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

If you want to build a PWA, I think @khalby786 is the expert.

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:

  1. manifest.json: it is more like the config file of the PWA
  2. sw.js: PWAs use Service Workers to cache assets and make them progressive
  3. some JS code to register the service workers
  4. a file full of logos of your website each one of a different dimension for each device.

We’ll create a manifest.json first.

  1. First things first, you should have a 512x512 sized logo for the PWA. Go to https://app-manifest.firebaseapp.com/ and then fill in all the details. Make sure to leave ‘Orientation’, ‘Start URL’ and ‘Application Scope’ as it is. As for the display mode, I recommend you choose ‘Standalone’ as that is what makes the PWA a PWA :wink: 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.

  1. Now for some JS! Create a file named 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).

  1. Now, we move towards the HTML file. In your main HTML file, before the closing <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.

  1. Then in our HTML file, we also add a link to the 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.

1 Like

Maybe I should create a tutorial…

4 Likes

please do! would really help!

This website shows “Go 1.9 is no longer available. Please refer to https://goo.gl/aESk5L for more information.” after clicking “generate .zip”. Do you have other website suggestions to generate web app manifest? Thank you!

1 Like

@khalby786 has an updated tutorial, see

1 Like

Yes, @lekgloria I have written a new tutorial which fixes this issue.

Hope this helps!

1 Like