PWA就像静态布局一样

时间:2018-11-30 09:56:58

标签: progressive-web-apps

学习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不起作用-该应用程序的工作方式类似于静态布局。

我可以为该应用制作动画吗?

0 个答案:

没有答案