browser-wakatime icon indicating copy to clipboard operation
browser-wakatime copied to clipboard

Enable Progressive web app on website first

Open alzalabany opened this issue 7 years ago • 3 comments

adding a simple manifest and meta headers to https://wakatime.com/dashboard is very important so we can add it to homescreen or desktop

it shouldnt take much work and would be a great add 👍

alzalabany avatar Jun 27 '17 12:06 alzalabany

Related:

https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/

https://developer.mozilla.org/en-US/Apps/Progressive

alanhamlett avatar Jun 27 '17 16:06 alanhamlett

a simple 2 edits are enought to do.

public/manifest.json

{
  "short_name": "Wakatime",
  "name": "Waka Time Dashboard",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

and to index.html header.

<link rel="manifest" href="/manifest.json">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Waka">

and we r done 👍

alzalabany avatar Jul 01 '17 09:07 alzalabany

That manifest.json and html meta/link content already exists on every page. Progressive web apps also require binding to service worker events.

alanhamlett avatar Jul 01 '17 18:07 alanhamlett