学习PWA。
从HTML5UP获得一个我喜欢的模板,将此脚本添加到index.html中:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.info('ServiceWorker registration successful with scope: ', registration.scope);
},
function(err) {
// registration failed :(
console.error('ServiceWorker registration failed: ', err);
});
});
}
</script>
这是我的服务人员(sw.js):
'use strict';
importScripts('sw-toolbox.js');
toolbox.precache([
'index.html',
'elements.html',
'generic.html',
'assets/fonts/fontawesome-webfont.eot',
'assets/fonts/fontawesome-webfont.svg',
'assets/fonts/fontawesome-webfont.ttf',
'assets/fonts/fontawesome-webfont.woff',
'assets/fonts/fontawesome-webfont.woff2',
'assets/fonts/FontAwesome.otf',
'assets/css/main.css',
'assets/css/font-awesome.min.css',
'assets/js/breakpoints.min.js',
'assets/js/browser.min.js',
'assets/js/jquery.min.js',
'assets/js/main.js',
'assets/js/utils.js'
]);
toolbox.router.get('/images/*', toolbox.cacheFirst);
toolbox.router.get('/*', toolbox.networkFirst, {
networkTimeoutSeconds: 5
});
我现在可以将应用程序保存在主屏幕上,看起来很漂亮。但是没有按钮起作用-侧边栏不移动,依此类推。
看起来js不起作用-该应用程序的工作方式类似于静态布局。
我可以为该应用制作动画吗?