phonegap-template-vue-f7-blank icon indicating copy to clipboard operation
phonegap-template-vue-f7-blank copied to clipboard

Add PWA features to template

Open macdonst opened this issue 8 years ago • 6 comments

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 avatar May 29 '17 19:05 macdonst

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

macdonst avatar May 29 '17 19:05 macdonst

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

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

macdonst avatar May 29 '17 23:05 macdonst

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 avatar May 30 '17 00:05 macdonst

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.

macdonst avatar May 30 '17 01:05 macdonst

  1. Register the service worker - https://github.com/phonegap/phonegap-template-vue-f7-todos-pwa/blob/master/template_src/www/index.html#L36-L40

hollyschinsky avatar Jun 01 '17 17:06 hollyschinsky

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

devgeeks avatar Nov 15 '17 05:11 devgeeks