phonegap-template-vue-f7-blank
phonegap-template-vue-f7-blank copied to clipboard
Add PWA features to template
Ran Lighthouse against an app created with this template and it scored:

This issue is to track the improvement of the template adding PWA functionality.
You can now see a live example of this template at: http://phonegap.com/phonegap-template-vue-f7-blank/#!//
Because of some url re-writing at phonegap.github.com the live example is now at:
https://macdonst.github.io/pwatest/#!//
Played around with PWA'ing the template and got it to this stage:

Something went wrong with Lighthouse which is why performance is 0 and we are stuck at 91 on PWA.
Things I learned:
- We need to handle icons better. It would be great if we automatically generated icon/splashscreen images.
- ~~We should add a
noscripttag to our main html file.~~ DONE - We should add a
metatag with thetheme-colorattribute and atheme-colorinmanifest.json. Ideally it should match the color used by F7. - The
index.htmlfile should have a link tomanifest.json. - Should include a serviceWorker and the manifest should be automatically generated.
- Register the service worker - https://github.com/phonegap/phonegap-template-vue-f7-todos-pwa/blob/master/template_src/www/index.html#L36-L40
https://github.com/phonegap/phonegap-template-vue-f7-split-panel/commit/c25c5e11da6f4845163dc0fc7baa9dfd54766166