1
我正在尝试使用angular 1.5帮助创建渐进式web应用程序。离线渐进网络应用程序无法使用Angular Js 1.5.x
我已经在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:{
'[email protected]':{
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"
}
我生成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);
});
文件通过后，我跑了一口buld应用程序正在运行正常的服务工作者已创建，并且在Application选项卡开发者控制台中，我可以看到服务工作者已激活并正在运行但是当我离线并刷新页面时，它不会打开
请告诉我我的错误在哪里。
你在浏览器开发工具中找到了什么线索？所有的库都包含在'sw.js'中吗？ – charlietfl
是的，所有资源都已加载。但在控制台中，我发现此注册成功。范围是http：// localhost：3000/scripts/ –