Я пытался зарегистрировать работника сервиса в моем проекте AMP, но не добился успеха - PullRequest
Новая
       27

Я пытался зарегистрировать работника сервиса в моем проекте AMP, но не добился успеха

0 голосов
/ 21 января 2020

Я пробовал несколько раз, но безуспешно.

Я запустил код усилителя по индексу. html с добавлением 

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

над кодом в голове. и затем я пишу следующий код в теле. 

<amp-install-serviceworker src="/serviceworker.js"  data-iframe-src="/serviceworker.html" layout="nodisplay"></amp-install-serviceworker>

В Serviceworker. js 

    importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
  assetCachingOptions: [{
    regexp: /\.(png|jpg|woff2|woff|css|js)/,
    cachingStrategy: 'CACHE_FIRST',
  }],
  offlinePageOptions: {
    url: '/offline.html',
    assets: [],
  },
});

в Serviceworker. html

    <!doctype html>
<html>
    <head>
        <title>installing service worker</title>
        <script type="text/javascript">
            var swsource = "/serviceworker.js";
            if("serviceWorker" in navigator) {
                navigator.serviceWorker.register(swsource).then(function(reg){
                    console.log('ServiceWorker scope: ', reg.scope);
                }).catch(function(err) {
                    console.log('ServiceWorker registration failed: ', err);
                });
            };
        </script>
    </head>
    <body>
    </body>
</html>

Полный индекс. html

<!DOCTYPE html>
<html amp>

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon">
   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,500,600,700&amp;subset=cyrillic"
      rel="stylesheet">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="canonical" href="index.html">
   <link rel="manifest" href="/manifest.json">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

   <style amp-boilerplate>
      body {
         -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
         -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
         -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
         animation: -amp-start 8s steps(1, end) 0s 1 normal both
      }

      @-webkit-keyframes -amp-start {
         from {
            visibility: hidden
         }

         to {
            visibility: visible
         }
      }

      @-moz-keyframes -amp-start {
         from {
            visibility: hidden
         }

         to {
            visibility: visible
         }
      }

      @-ms-keyframes -amp-start {
         from {
            visibility: hidden
         }

         to {
            visibility: visible
         }
      }

      @-o-keyframes -amp-start {
         from {
            visibility: hidden
         }

         to {
            visibility: visible
         }
      }

      @keyframes -amp-start {
         from {
            visibility: hidden
         }

         to {
            visibility: visible
         }
      }
   </style>
   <style amp-custom>

   </style>
   <noscript>
      <style amp-boilerplate>
         body {
            -webkit-animation: none;
            -moz-animation: none;
            -ms-animation: none;
            animation: none
         }
      </style>
   </noscript>
</head>

<body>


   <amp-install-serviceworker src="/serviceworker.js"  data-iframe-src="/serviceworker.html" layout="nodisplay"></amp-install-serviceworker>

</body>

</html>

Но успех не удался. Пожалуйста, помогите мне и покажите мне правильную процедуру регистрации сервисного работника в файлах усилителя.

...