search

phonegap / phonegap-template-vue-f7-blank

A blank PhoneGap template using Vue.js and Framework7
Apache License 2.0
33 stars 14 forks source link

Add PWA features to template #8

Open macdonst opened 7 years ago

macdonst commented 7 years ago

Ran Lighthouse against an app created with this template and it scored:

screenshot 2017-05-29 15 13 59

This issue is to track the improvement of the template adding PWA functionality.

macdonst commented 7 years ago

You can now see a live example of this template at: http://phonegap.com/phonegap-template-vue-f7-blank/#!//

macdonst commented 7 years ago

Because of some url re-writing at phonegap.github.com the live example is now at:

https://macdonst.github.io/pwatest/#!//

macdonst commented 7 years ago

Played around with PWA'ing the template and got it to this stage:

screenshot 2017-05-29 20 51 20

Something went wrong with Lighthouse which is why performance is 0 and we are stuck at 91 on PWA.

macdonst commented 7 years ago

Things I learned:

  1. We need to handle icons better. It would be great if we automatically generated icon/splashscreen images.
  2. We should add a noscript tag to our main html file. DONE
  3. We should add a meta tag with the theme-color attribute and a theme-color in manifest.json. Ideally it should match the color used by F7.
  4. The index.html file should have a link to manifest.json.
  5. Should include a serviceWorker and the manifest should be automatically generated.
hollyschinsky commented 7 years ago
  1. Register the service worker - https://github.com/phonegap/phonegap-template-vue-f7-todos-pwa/blob/master/template_src/www/index.html#L36-L40
devgeeks commented 6 years ago

https://github.com/phonegap/phonegap-template-vue-f7-split-panel/commit/c25c5e11da6f4845163dc0fc7baa9dfd54766166