[add wechat, show browser name and grading]

what: add wechat data, show browser name and grading for user why: because not every is familiar with the icon how:
toxic-johann · May 15, 2017 · b502a57 · b502a57
1 parent 519a50a
commit b502a57
Show file tree

Hide file tree

Showing 24 changed files with 466 additions and 98 deletions.
diff --git a/client/img/wechat.png b/client/img/wechat.png
diff --git a/client/views/auto/helper.js b/client/views/auto/helper.js
@@ -7,7 +7,7 @@ export const featureKeys = [
   'navigator.serviceWorker',
   'Registered',
   'installEvent',
-  'install.waitUntil',
+  'installEvent.waitUntil',
   'self.skipWaiting',
   'oncontrollerchange',
   'navigator.serviceWorker.ready',

diff --git a/client/views/auto/lifecycle/main.js b/client/views/auto/lifecycle/main.js
@@ -6,14 +6,14 @@ const list = [
   'clients.claim',
   'fetchEvent',
   'installEvent',
-  'install.waitUntil',
+  'installEvent.waitUntil',
   'navigator.serviceWorker',
   'oncontrollerchange',
   'self.skipWaiting',
 ]
 async function controllerchangeCauseByNormalInstall (evt) {
   console.log('serviceWorker now has a new activated one')
-  console.log('this event will trigger after install.waitUntil and before activateEvent.waitUntil')
+  console.log('this event will trigger after installEvent.waitUntil and before activateEvent.waitUntil')
   if(!evt) {
     const score = await store.get('feature', 'oncontrollerchange')
     if(parseFloat(score) === 1) return

diff --git a/client/views/auto/lifecycle/sw.js b/client/views/auto/lifecycle/sw.js
@@ -27,7 +27,7 @@ self.onactivate = function (event) {
   console.log('Activate event', event)
   console.log('.waitUntil', event.waitUntil)
   store.put('feature', 1, 'activateEvent')
-  store.put('feature', Number(installWaitUntilFlag), 'install.waitUntil')
+  store.put('feature', Number(installWaitUntilFlag), 'installEvent.waitUntil')
   store.put('feature', Number(skipWaitingFlag), 'self.skipWaiting')
   console.log('try to waitUntil')
   event.waitUntil((async function () {

diff --git a/client/views/base/main.html b/client/views/base/main.html
@@ -27,8 +27,8 @@
 </head>
 <body>
   <nav>
-    {% for key, link in nav%}
-      <a href="{{link}}">{{key}}</a>
+    {% for key, info in nav%}
+      <a href="{{info.href}}">{{key}}</a>
     {% endfor %}
   </nav>
   {% block body %}

diff --git a/client/views/index/main.css b/client/views/index/main.css
@@ -28,6 +28,36 @@ body {
     }
   }
 }
+article.grading {
+  padding: 0 1rem 1rem 1rem;
+  margin: 0 auto;
+  h3 {
+    margin: 0;
+  }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  li span {
+    display: inline-block;
+    width: 4rem;
+  }
+  .yes span {
+    color: #376D37;
+  }
+  .soso span {
+    color: #A8BD04;
+  }
+  .ish span {
+    color: #D5BB00;
+  }
+  .no span {
+    color: #CCC;
+    filter: grayscale(100%);
+    opacity: 0.4;
+  }
+}
 article.feature {
   padding: 0 1rem 1rem 1rem;
   margin: 0 auto;
@@ -60,7 +90,7 @@ article.feature {
     padding-left: 0.5%;
     flex-wrap: wrap;
     & .result {
-      margin: 0.5% 0.5% 0.5% 0;
+      margin: 1.2rem 0.5% 0.5% 0;
       flex-grow: 0;
       flex-shrink: 0;
       position: relative;
@@ -98,7 +128,7 @@ article.feature {
         margin: auto;
         font-size: 16px;
         text-indent: -5000px;
-        @each $icon in (chrome, chrome-canary, firefox, firefox-nightly, edge, opera, opera-developer, samsung-internet, safari, webkit, uc, xiaomi, qq, qqm, m360, baidum, sogoum) {
+        @each $icon in (chrome, chrome-canary, firefox, firefox-nightly, edge, opera, opera-developer, samsung-internet, safari, webkit, uc, xiaomi, qq, qqm, m360, baidum, sogoum, wechat) {
           &.$(icon) {
             background-image: url(../../img/$(icon).png);
             background-size: 78%;
@@ -133,6 +163,24 @@ article.feature {
         content: '';
         padding-top: 100%;
       }
+      .aka {
+        display: block;
+        height: 1.2rem;
+        line-height: 1.2rem;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        top: 0;
+        left: 0;
+        margin: 0;
+        background-color: #272b1a;
+        color: #fff;
+        transform: translate(0, -100%);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 0.8rem;
+      }
     }
   }
   & .details {

diff --git a/client/views/index/main.html b/client/views/index/main.html
@@ -10,6 +10,14 @@
   <header>
     <h1>{{title}}</h1>
   </header>
+  <article class="grading">
+    <h3>{{grading.name}}</h3>
+    <ul >
+      {% for key, info in grading.data %}
+        <li class="{{key}}"><span>{{info.range}}</span>{{info.note}}</li>
+      {% endfor %}
+    </ul>
+  </article>
   {% for feature in features %}
     {% set featureId = feature.name|striptags|lower|replace("\s+", '-', 'g') %}
     <article class="feature" id="{{ featureId }}">
@@ -24,6 +32,7 @@ <h2 class="feature-name">
       <div class="results">
         {% for browser in browsers %}
           <section class="result {% if feature[browser.id].supported > 0.8%}yes{% elif feature[browser.id].supported > 0.5 %}soso{% elif feature[browser.id].supported > 0 %} ish {% else %} no{% endif %}">
+            <p class="aka">{{browser.aka or browser.name}}</p>
             <h2 class="icon {{ feature[browser.id].icon|default(browser.id) }}">{{browser.name}}</h2>
             {% if browser.mobile %}
               <span class="isMobile">m</span>

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "node-debug": "webpack -w & nodemon --debug --watch server --watch views -e js,html,json",
     "build": "rm -f ./static/css/*-*.css && rm -f ./static/js/*-*.js && rm -f ./static/js/auto/*-*-*.js && webpack --env.mode='production'",
     "mos": "git pull origin master && pm2 restart pm2.json",
-    "test": "webpack && jsonlint server/i18n/*/*.json && jsonlint server/i18n/*/*/*.json",
+    "test": "webpack && jsonlint server/i18n/index/zh.json && jsonlint server/i18n/index/en.json",
     "flow": "flow"
   },
   "repository": {

diff --git a/server/i18n/auto/en.json b/server/i18n/auto/en.json
@@ -4,10 +4,18 @@
   "description": "auto test page for PWA",
   "keywords": "pwa, progress web app, ready, caniuse, test, check, robot",
   "nav": {
-    "Home": "/",
-    "Reboot": "/auto/",
-    "Issue": "https://github.com/toxic-johann/is-pwa-ready/issues",
-    "Github": "https://github.com/toxic-johann/is-pwa-ready"
+    "Home": {
+      "href": "/"
+    },
+    "Reboot": {
+      "href": "/auto/"
+    },
+    "Issue": {
+      "href": "https://github.com/toxic-johann/is-pwa-ready/issues"
+    },
+    "Github": {
+      "href": "https://github.com/toxic-johann/is-pwa-ready"
+    }
   },
   "note": "This test is based on indexedDB, so it may be buggy because of compatibility issues. What's more. As it's alpha version, it can't ensure to run well on all browsers. You can use v-console to debug. Welcome issue or pull.",
   "browser": "Your browser is ",