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/ –