【发布时间】：2016-11-21 13:31:42
【问题描述】：
我正在尝试在 gulp 的帮助下使用 angular 1.5 创建一个渐进式网络应用程序。
我在 npm 中使用 sw-precache 模块创建了一个服务工作者（sw.js）。
这是我的 index.html
<!doctype html>
<html ng-app="ngapp">
<head>
<meta charset="utf-8">
<title>sfxInstantPay</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#CA3F39">
<link rel="manifest" type="text/css" href="app/manifest.json">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
<script type="text/javascript">
if ('serviceWorker' in navigator) {
// Path is relative to the origin, not project root.
navigator.serviceWorker.register('scripts/sw.js')
.then(function(reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
})
.catch(function(error) {
console.error('Registration failed with ' + error);
});
}
</script>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div ui-view="app" layout-fill></div>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
我正在使用 UI 路由器进行路由更改。我的 router.js 是
(function() {
'use strict';
angular
.module('ngapp')
.config(routerConfig);
/** @ngInject */
function routerConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/index.html',
views:{
'app@':{
templateUrl: 'app/dashboard/xx/views/xx.html',
controller: 'xxController',
controllerAs: 'xCtrl'
}
}
});
$urlRouterProvider.otherwise('/index.html');
}
})();
我的 manifest.json 是
{
"name": "Hello Mobile",
"icons": [
{
"src": "assets/images/angular.png",
"sizes": "100x100",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#000000",
"background_color": "#e0e0e0"
}
在 gulp 构建文件中，我通过以下代码生成 sw.js 文件
gulp.task('generate-service-worker-dist', function(callback) {
var path = require('path');
var swPrecache = require('sw-precache');
var rootDir = path.join(conf.paths.dist,'');
swPrecache.write(path.join(rootDir+'/scripts', 'sw.js'), {
staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
stripPrefix: rootDir
}, callback);
});
在我运行 gulp buld 应用程序运行后，创建了正常的服务工作者，并且在应用程序选项卡开发人员控制台中，我可以看到服务工作者已激活并正在运行。但是当我离线并刷新页面时它没有打开
请告诉我我的错误在哪里。
【问题讨论】：
-
您在浏览器开发工具中发现了哪些线索？
sw.js中是否包含所有库？ -
是的，所有资源都已加载。但是在控制台中我发现这个注册成功了。范围是localhost:3000/scripts