feat(build): add PWA feature

Author: zhangjingyuan02

packages/mars-build/src/compiler/script/script-h5.js

@@ -76,9 +76,10 @@ exports.compileMain = function (content, options) {
             window,
             mars: {
                 navigationBarHomeColor: mars && mars.navigationBarHomeColor || 'dark',
-                showNavigationBorder: mars ? !!mars.showNavigationBorder : true,
-                useTransition: mars ? !!mars.useTransition : true,
-                homePage: `/${tabBar && tabBar.list && tabBar.list.length > 0 ? tabBar.list[0].pagePath : pages[0]}`
+                showNavigationBorder: mars && mars.showNavigationBorder ? mars.showNavigationBorder : true,
+                useTransition: mars && mars.useTransition ? mars.useTransition : true,
+                homePage: `/${tabBar && tabBar.list && tabBar.list.length > 0 ? tabBar.list[0].pagePath : pages[0]}`,
+                supportPWA: !!mars.supportPWA
             },
             componentSet,
             pagesInfo

packages/mars-build/src/gulp-mars-h5.js

@@ -165,6 +165,7 @@ async function compile(file, opt) {
         mars: opt._config.h5 || null
     });
     fs.writeFileSync(opt.dest + '/main.js', content);
+    process.env.MARS_PWA = opt._config.h5 && opt._config.h5.supportPWA;
 
     // 处理style
     const h5StylesArr = styles.filter(item =>

packages/mars-build/src/h5/template/registerServiceWorker.js

@@ -0,0 +1,16 @@
+/**
+ * @file 注册service worker
+ * @author mars
+ */
+
+function register(file) {
+    // ，service worker脚本文件为sw.js
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register(`${process.env.BASE_URL}${file}`).then(function () {
+            console.log('Service Worker 注册成功');
+        });
+    }
+}
+/* eslint-disable fecs-export-on-declare */
+export default register;
+

packages/mars-build/src/h5/transform/plugins/transformMainPlugin.js

@@ -150,11 +150,19 @@ module.exports = function getVisitor(options = {}) {
                             // 插入 import basicComponents from './components.js';
                             insertImportDeclaration('basicComponents', './components.js');
                         }
+                        // 注册 service worker
+                        if (!!mars.supportPWA) {
+                            path.node.body.unshift(t.expressionStatement(t.callExpression(
+                                t.identifier('registerServiceWorker'),
+                                [t.stringLiteral('sw.js')]
+                            )));
+                            insertImportDeclaration('registerServiceWorker', './registerServiceWorker.js');
+                        }
                         // 插入 import Vue from 'vue';
                         insertImportDeclaration('Vue', 'vue');
                     }
                 }
             }
         };
     };
-}
+};

packages/mars-cli-template/bin/mars-cli-service.js

@@ -73,11 +73,15 @@ process.env.MARS_CLI_OPTIONS = process.env.MARS_CLI_OPTIONS || JSON.stringify({
     if (!fs.existsSync(process.cwd() + '/vue.config.js')) {
         console.error(chalk.red('vue.config.js 文件未找到，请确认当前所在工程支持编译到 h5。'));
     }
-    await fs.copy(process.cwd() + '/vue.config.js', context + '/vue.config.js');
+    if (!process.env.VUE_CLI_SERVICE_CONFIG_PATH) {
+        process.env.VUE_CLI_SERVICE_CONFIG_PATH = process.cwd() + '/vue.config.js';
+    }
+    // await fs.copy(process.cwd() + '/vue.config.js', context + '/vue.config.js');
 
     const plugins = [
         idToPlugin('@marsjs/vue-cli-plugin-mars-web'),
-        idToPlugin('@vue/cli-plugin-babel')
+        idToPlugin('@vue/cli-plugin-babel'),
+        idToPlugin('@marsjs/vue-cli-plugin-pwa')
     ];
     const service = new Service(context, {
         plugins

packages/mars-cli-template/generator/index.js

@@ -4,7 +4,10 @@
  */
 
 module.exports = async (api, options) => {
-
+    const {
+        noH5,
+        needPWA
+    } = options;
 
     if (options.isDistH5) {
         api.render('./dist-h5');
@@ -15,10 +18,10 @@ module.exports = async (api, options) => {
         doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
     });
 
-    if (!options.noH5) {
-        api.render('./template-h5', {
-            doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
-        });
+    if (!noH5) {
+        api.render('./template-h5', null, {delimiter: '$'});
+
+        needPWA && api.render('./template-pwa', null, {delimiter: '$'});
 
         // 添加 h5 所需的依赖
         api.extendPackage({
@@ -36,6 +39,7 @@ module.exports = async (api, options) => {
                 'atom-web-compiler': '^2.2.0',
                 'atom2vue-loader': '^1.0.0',
                 '@marsjs/vue-cli-plugin-mars-web': '^0.0.9',
+                '@marsjs/vue-cli-plugin-pwa': '^0.0.1',
                 '@vue/cli-plugin-babel': '^3.0.0',
                 '@vue/cli-service': '^3.5.0',
                 'less': '^3.0.4',

packages/mars-cli-template/generator/template-h5/mars/mars.config.js

@@ -7,7 +7,8 @@ module.exports = function (target) {
         h5: {
             navigationBarHomeColor: 'light',
             showNavigationBorder: true,
-            mode: 'hash'
+            mode: 'hash',
+            useTransition: true
         }
     };
 

packages/mars-cli-template/generator/dist-h5/public/index.html renamed to packages/mars-cli-template/generator/template-h5/mars/public/index.html

@@ -13,6 +13,7 @@ module.exports = {
             .plugin('html')
             .tap(args => {
                 args[0].title = 'Mars demo';
+                args[0].template = process.cwd() + '/public/index.html';
                 return args;
             });
     }

packages/mars-cli-template/generator/template-h5/mars/vue.config.js

@@ -0,0 +1,17 @@
+/**
+ * @file config file
+ */
+
+module.exports = function (target) {
+    const config = {
+        h5: {
+            navigationBarHomeColor: 'light',
+            showNavigationBorder: true,
+            mode: 'hash',
+            useTransition: true,
+            supportPWA: true
+        }
+    };
+
+    return config;
+};