示例页面增加PWA支持

build/webpack.demo.build.conf.js

@@ -4,6 +4,7 @@ const merge = require('webpack-merge');
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const OfflinePlugin = require('offline-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const rimraf = require('rimraf');
 
@@ -27,6 +28,17 @@ module.exports = merge(baseConf, {
         new CopyWebpackPlugin([
             { from: path.join(__dirname, "../sites/demo/asset/img/favicon.ico"), to: path.join(__dirname, "../dist/sites/")}
         ]),
+        new CopyWebpackPlugin([
+            { from: path.join(__dirname, "../sites/demo/asset/img/pwa_logo.png"), to: path.join(__dirname, "../dist/sites/img/") }
+        ]),
+        new CopyWebpackPlugin([
+            { from: path.join(__dirname, "../sites/demo/asset/manifest.json"), to: path.join(__dirname, "../dist/sites/demo/") }
+        ]),
+        new OfflinePlugin({
+            ServiceWorker: {
+                events: true
+            }
+        })
     ],
     optimization: {
         minimizer: [

docs/intro.md

@@ -1,7 +1,13 @@
-# NutUI 2
+# NutUI
 
 NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企业级前中后台产品。
 
+<iframe src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true" frameborder="0" scrolling="0" width="60px" height="20px"></iframe>
+
+<iframe src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="70px" height="20px"></iframe>
+
+<iframe src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=fork&count=true" frameborder="0" scrolling="0" width="60px" height="20px"></iframe>
+
 <div style="margin:30px 0;">
     <img src="http://img14.360buyimg.com/uba/jfs/t1/8543/6/11560/22014/5c2c6136E8023ac0a/6abbd9de10999c48.png" width="150" alt="NutUI">
 </div>
@@ -36,7 +42,7 @@ NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web
 * [Webpack](http://webpack.github.io/)
 * [意见反馈](https://github.com/jdf2e/nutui/issues)
 * [更新日志](https://github.com/jdf2e/nutui/releases)
-* [模板工程命令行工具(Gaea-cli)](https://github.com/jdf2e/Gaea4)
+* [模板工程命令行工具(Gaea CLI)](https://www.npmjs.com/package/gaea-cli)
 * 联系我们：nutui@jd.com
 
 

package.json

@@ -63,7 +63,6 @@
     "@babel/core": "7.1.2",
     "@babel/plugin-syntax-dynamic-import": "7.0.0",
     "@babel/plugin-transform-runtime": "7.1.0",
-    "istanbul-instrumenter-loader": "^3.0.1",
     "@babel/preset-env": "7.1.0",
     "@nutui/carefree": "^0.4.0",
     "@tweenjs/tween.js": "17.2.0",
@@ -95,6 +94,7 @@
     "has": "1.0.3",
     "html-webpack-plugin": "3.2.0",
     "inquirer": "6.2.0",
+    "istanbul-instrumenter-loader": "^3.0.1",
     "jest": "23.5.0",
     "jest-serializer-vue": "2.0.2",
     "jsdom": "13.0.0",
@@ -107,6 +107,7 @@
     "node-notifier": "5.2.1",
     "node-sass": "4.9.3",
     "nyc": "10.0.0",
+    "offline-plugin": "^5.0.6",
     "optimize-css-assets-webpack-plugin": "5.0.0",
     "ora": "3.0.0",
     "portfinder": "1.0.17",

sites/demo/app.js

@@ -9,6 +9,7 @@ import NutUI from '../../src/nutui';
 // import en from '../../src/locales/lang/en-US';
 // import demoEN from './lang/en-US';
 
+import * as OfflinePluginRuntime from 'offline-plugin/runtime';
 
 import './asset/css/common.scss';
 
@@ -16,6 +17,8 @@ import './asset/img/logo_share.png';
 
 Vue.config.productionTip = false;
 
+
+
 // Object.assign(en, demoEN);
 
 // Vue.use(NutUI, {
@@ -25,6 +28,7 @@ Vue.config.productionTip = false;
 
 NutUI.install(Vue);
 
+
 //Vue.locale = () => {};
 
 // const i18n = new VueI18n({
@@ -50,7 +54,38 @@ const app = new Vue({
   router,
   components: { App },
   template: '<App/>'
-})
+});
+
+OfflinePluginRuntime.install({
+  onUpdating: () => {
+    console.log('SW Event:', 'onUpdating');
+  },
+  onUpdateReady: () => {
+    console.log('SW Event:', 'onUpdateReady');
+    OfflinePluginRuntime.applyUpdate();
+  },
+  onUpdated: () => {
+    console.log('SW Event:', 'onUpdated');
+    console.log('PWA缓存有更新，需要刷新页面');
+
+    app.$dialog({
+      title: "您正在浏览的页面有更新，请刷新",
+      noCloseBtn: true,
+      noOkBtn: true,
+      cancelBtnTxt: "刷新页面",
+      closeOnClickModal:false,
+      onCancelBtn(){
+        window.location.reload();
+      }
+    });
+
+    //window.location.reload();
+  },
+
+  onUpdateFailed: () => {
+    console.log('SW Event:', 'onUpdateFailed');
+  }
+});
 
 Vue.prototype.NUTCONF = Conf;
 

sites/demo/asset/manifest.json

@@ -0,0 +1,12 @@
+{
+    "short_name": "NutUI",
+    "name": "一套京东风格的移动端Vue组件库",
+    "icon": [
+        {
+            "src": "/img/pwa_logo.png",
+            "type": "image/png",
+            "sizes": "144x144"
+        }
+    ],
+    "start_url": "/demo.html"
+}

sites/demo/index.html

@@ -6,6 +6,7 @@
   <meta content="telephone=no" name="format-detection" />
   <link rel="shortcut icon" href="/favicon.ico">
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+  <link rel="manifest" href="./demo/manifest.json">
   <title>NutUI - 移动端Vue组件库</title>
   <!-- <script src="//misc.360buyimg.com/felibs/vue/2.5.16/vue.min.js"></script> -->
   <script src="https://h5.m.jd.com/babelDiy/Zeus/2846ykuM7PwipD9E2RzMj2BGEQpA/plugin/share.min.js"></script>

sites/demo/view/index.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="demo-list-wrapper">
+    <!-- <nut-noticebar
+      :closeMode="true"
+      v-if="cacheHasNewVersion"
+    >本页面有更新，请<a href="javascript:window.location.reload();">刷新页面</a>。</nut-noticebar> -->
+
     <h1 class="logo"></h1>
     <div class="version">NutUI 2.0</div>
     <p>NutUI 是一套京东风格的移动端Vue组件库</p>

sites/demo/view/mixin.vue

@@ -3,16 +3,14 @@ import Vue from "vue";
 Vue.mixin({
   data() {
     return {
-      isMobile: false
+      isMobile: false,
+      cacheHasNewVersion:false
     };
   },
   methods: {
     checkIsMob() {
-      if (
-        window.navigator.userAgent.match(
-          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile|MQQBrowser|JUC|Windows Phone)/i
-        )
-      ) {
+      if (window.navigator.userAgent.match(
+          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile|MQQBrowser|JUC|Windows Phone)/i)) {
         return true;
       } else {
         return false;

sites/doc/asset/css/common.scss

@@ -72,7 +72,7 @@ table {
 
 html,
 body {
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, \\5FAE\8F6F\96C5\9ED1, Arial, sans-serif;
+    font-family: Helvetica Neue, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
 }
 

src/config.json

@@ -1,5 +1,4 @@
 {
-  "version": "2.0.0",
   "sorts": [
     "数据展示",
     "数据录入",

src/packages/noticebar/demo.vue

@@ -17,7 +17,6 @@
     </nut-noticebar>
     <h4>通告栏模式--链接模式</h4>
     <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
       left-icon="//img.yzcdn.cn/vant/volume.png"
     >
       <a href="https://www.jd.com">京东商城</a>

src/packages/noticebar/doc.md

@@ -26,7 +26,6 @@
 ## 通告栏模式--链接模式
 ```html
     <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
       left-icon="//img.yzcdn.cn/vant/volume.png"
     >
       <a href="https://www.jd.com">京东商城</a>