解决ssr服务端渲染整合pwa:register-service-worker启动报错： SyntaxError: Unexpected token ‘export‘

现象：

 

从表象上看：register-service-worker模块尝试使用ES6模块语法（export和import语句），而这种语法与CommonJS（Node.js风格）模块不兼容。

这是因为由于某种原因import了register-service-worker库，但是ssr通过nodeExternals默认只打包.css样式和.vue组件文件，其他的包括node_modules一概不打包，也不做编译转换。所以就产生了上面的ES6语法不兼容的报错。

网上给出的解决办法是通过nodeExternals将register-service-worker强行打包进来

（allowlist的意思是：例外情况，允许打包和转译的范围）

nodeExternals({ allowlist: [/\.(css|vue)$/, /register-service-worker/] })

 

 因为此时webpack可以通过特定的loader把es6语法转换成commonjs规范。

但是这种解决方法并没有从根本解决问题。

因为pwa模块也就是register-service-worker，只能应用于浏览器环境，而不应该打包到ssr服务端程序里面, 因为pwa会访问docoument/navigator这样的浏览器环境才有的对象，而node服务端环境则没法提供这样的对象，那么在node环境中必然会报错。

所以，应该仅仅在浏览器运行环境才打包register-service-worker模块，服务端环境就不应该打包register-service-worker模块。

解决办法：在import register-service-worker的地方通过ssr条件判断，动态引入register-service-worker

 

// 仅在浏览器环境才引入pwa (即非node服务端环境)

if (!process.env.VUE_APP_SSR) {

  import('@/configs/registerServiceWorker');

}

 

 判断是否为ssr的环境变量： VUE_APP_SSR通过script脚本执行时的环境变量传入：

 

最后补充关于PWA的一些知识

1. PWA（Progressive Web App）:

   • 定义： PWA 是一种使用现代 Web 技术增强 Web 应用程序体验的方法。
   • 作用： PWA 的目标是提供类似原生应用的用户体验，包括离线访问、推送通知、快速加载速度等。PWA 具有以下主要特点：
     • 离线访问： PWA 可以在离线或弱网络环境中工作，通过使用服务工作线程（Service Workers）缓存资源。
     • 推送通知： 允许向用户发送推送通知，即使用户未打开应用程序。
     • 响应式设计： 适应不同屏幕尺寸，提供一致的用户体验。
     • 快速加载： 通过缓存和预取等技术，实现快速加载和渲染。

2. register-service-worker:

   • 定义： register-service-worker 是一个用于在 Vue.js 项目中注册 Service Worker 的 Vue CLI 插件。
   • 作用： Service Worker 是一种在浏览器后台运行的脚本，用于处理离线缓存、推送通知等功能。register-service-worker 简化了在 Vue.js 项目中注册和使用 Service Worker 的过程。它会自动为你生成并注册一个 Service Worker 文件，使你的应用能够获得 PWA 的一些特性。

   总体而言，PWA 是一种 Web 应用程序开发的理念，而 register-service-worker 是 Vue.js 项目中实现 PWA 特性的具体工具。

在一个 Vue.js 项目中，你可以使用 register-service-worker 插件来轻松地配置和启用 Service Worker，从而使你的应用成为一个具有 PWA 特性的应用。