feat: pwa

Author: yyx990803

lib/app/app.js

@@ -64,7 +64,7 @@ export function createApp () {
     router,
     render (h) {
       return h('div', { attrs: { id: 'app' }}, [
-        h('router-view')
+        h('router-view', { ref: 'layout' })
       ])
     }
   })

lib/app/clientEntry.js

@@ -1,7 +1,8 @@
-/* global GA_ID, ga */
+/* global BASE_URL, GA_ID, ga, PWA_ENABLED */
 
 import './.temp/polyfill'
 import { createApp } from './app'
+import { register } from 'register-service-worker'
 
 const { app, router } = createApp()
 
@@ -31,4 +32,36 @@ if (process.env.NODE_ENV === 'production' && GA_ID) {
 
 router.onReady(() => {
   app.$mount('#app')
+
+  // Register service worker
+  if (process.env.NODE_ENV === 'production' && PWA_ENABLED) {
+    register(`${BASE_URL}service-worker.js`, {
+      ready () {
+        console.log('[vuepress:pwa] Service worker is active.')
+        app.$refs.layout.$emit('sw-ready')
+      },
+      cached () {
+        console.log('[vuepress:pwa] Content has been cached for offline use.')
+        app.$refs.layout.$emit('sw-cached')
+      },
+      updated () {
+        console.log('[vuepress:pwa] Content updated.')
+        app.$refs.layout.$emit('sw-updated')
+      },
+      offline () {
+        console.log('[vuepress:pwa] No internet connection found. App is running in offline mode.')
+        app.$refs.layout.$emit('sw-offline')
+      },
+      error (err) {
+        console.error('[vuepress:pwa] Error during service worker registration:', err)
+        app.$refs.layout.$emit('sw-error', err)
+        if (GA_ID) {
+          ga('send', 'exception', {
+            exDescription: err.message,
+            exFatal: false
+          })
+        }
+      }
+    })
+  }
 })

lib/build.js

@@ -71,6 +71,15 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
     await renderPage({ path: '/404.html' })
   }
 
+  if (options.siteConfig.pwa) {
+    const wbb = require('workbox-build')
+    wbb.generateSW({
+      swDest: path.resolve(outDir, 'service-worker.js'),
+      globDirectory: outDir,
+      globPatterns: ['**\/*.{js,css,html,png,jpg,jpeg,gif,svg,woff,woff2,eot,ttf,otf}']
+    })
+  }
+
   // DONE.
   const relativeDir = path.relative(process.cwd(), outDir)
   console.log(`\n${chalk.green('Success!')} Generated static files in ${chalk.cyan(relativeDir)}.`)

lib/default-theme/styles/code.styl

@@ -1,6 +1,6 @@
 @require './config'
 
-p, h1, h2, h3, h4, h5, h6
+.content
   code
     color lighten($textColor, 20%)
     padding 0.25rem 0.5rem
@@ -9,31 +9,33 @@ p, h1, h2, h3, h4, h5, h6
     background-color rgba(27,31,35,0.05)
     border-radius 3px
 
-pre, pre[class*="language-"]
-  background-color $codeBgColor
-  color #fff
-  line-height 1.4
-  border-radius 6px
-  padding 1.25rem 1.5rem
-  margin 0.85rem 0
-  white-space pre-wrap
-  word-break break-word
-  overflow auto
-  position relative
-  code
-    font-size 0.85rem
-  &:before
-    position absolute
-    top 0.8em
-    right 1em
-    font-size 0.75rem
-    color rgba(255, 255, 255, 0.4)
-
-.highlighted-line
-  background-color rgba(0, 0, 0, 66%)
-  display block
-  margin 0.1rem -1.8rem 0
-  padding 0.1rem 1.8rem
+.content
+  pre, pre[class*="language-"]
+    background-color $codeBgColor
+    line-height 1.4
+    border-radius 6px
+    padding 1.25rem 1.5rem
+    margin 0.85rem 0
+    white-space pre-wrap
+    word-break break-word
+    overflow auto
+    position relative
+    code
+      color #fff
+      padding 0
+      background-color none
+      border-radius 0
+    &:before
+      position absolute
+      top 0.8em
+      right 1em
+      font-size 0.75rem
+      color rgba(255, 255, 255, 0.4)
+  .highlighted-line
+    background-color rgba(0, 0, 0, 66%)
+    display block
+    margin 0.1rem -1.8rem 0
+    padding 0.1rem 1.8rem
 
 pre[class="language-js"], pre[class="language-javascript"]
   &:before

lib/markdown/index.js

@@ -32,6 +32,11 @@ module.exports = ({ markdown = {}}) => {
       includeLevel: [2, 3]
     }, markdown.toc))
 
+  // apply user config
+  if (markdown.config) {
+    markdown.config(md)
+  }
+
   // override render to allow custom plugins return data
   const render = md.render
   md.render = (...args) => {
@@ -43,10 +48,5 @@ module.exports = ({ markdown = {}}) => {
     }
   }
 
-  // apply user config
-  if (markdown.config) {
-    markdown.config(md)
-  }
-
   return md
 }

lib/webpack/createBaseConfig.js

@@ -210,11 +210,13 @@ module.exports = function createBaseConfig ({
       })
   }
 
-  // inject Google analytics ID
+  // inject constants
   config
-    .plugin('ga')
+    .plugin('injections')
     .use(require('webpack/lib/DefinePlugin'), [{
-      GA_ID: siteConfig.ga ? JSON.stringify(siteConfig.ga) : `false`
+      BASE_URL: JSON.stringify(siteConfig.base),
+      GA_ID: siteConfig.ga ? JSON.stringify(siteConfig.ga) : false,
+      PWA_ENABLED: !!siteConfig.pwa
     }])
 
   return config

package.json

@@ -70,6 +70,7 @@
     "optimize-css-assets-webpack-plugin": "^4.0.0",
     "postcss-loader": "^2.1.3",
     "prismjs": "^1.13.0",
+    "register-service-worker": "^1.2.0",
     "rimraf": "^2.6.2",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
@@ -84,6 +85,7 @@
     "webpack-merge": "^4.1.2",
     "webpack-serve": "^0.3.1",
     "webpackbar": "^2.6.1",
+    "workbox-build": "^3.1.0",
     "yaml-front-matter": "^4.0.0"
   },
   "devDependencies": {