php - PWA: Uncaught (in promise) TypeError: Request failed and no download with file php

问题描述

我正在尝试做我的第一个渐进式网络应用程序，但我有点困惑。

项目结构为：
- index.php
- products.php
- css/style.css
- css/font/font.eot
- js/script.js
- img/logo.png
- manifest.json
- sw.js

在 css 和 js 文件夹中，我还有 bootstrap 和 jquery 的文件。
manifest.json 包含：

{
"manifest_version": 1,
"version": "1.0.0",
"short_name": "PWA",
"name": "PWA",
"description": "First Progressive Web Application.",
"icons": [
{
"src": "img/512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "img/384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "img/192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "img/144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "img/128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/72x72.png",
"sizes": "72x72",
"type": "image/png"
}
],
"start_url": "/", 
"lang": "it-IT",
"background_color": "#424242",
"theme_color": "#cc194b",
"display": "standalone",
"orientation": "portrait-primary"
}

文件 sw.js 包含：

// use a cacheName for cache versioning
var cacheName = 'gi-cache';

// during the install phase you usually want to cache static assets
self.addEventListener('install', function(e) {
    // once the SW is installed, go ahead and fetch the resources to make this work offline
    e.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll([
                'index.php',
                'categories.php',

                'js/bootstrap.min.js',
                'js/jquery.fancybox.min.js',
                'js/jquery-3.2.1.min.js',
                'js/jquery-ui.min.js',
                'js/script.js',
                '/manifest.json',

                'css/bootstrap.min.css',
                'css/style.css',
                'css/jquery.fancybox.min.css',
                'css/jquery-ui.min-css',

                'img/logo.png',
                'favicon.ico',
                'img/72x72.png',
                'img/96x96.png',
                'img/128x128.png',
                'img/144x144.png',
                'img/152x152.png',
                'img/192x192.png',
                'img/384x384.png',
                'img/512x512.png',

                'css/font/font.otf',
            ]).then(function() {
                self.skipWaiting();
            });
        })
    );
});

self.addEventListener('activate', function(event) {
      event.waitUntil(
        caches.keys().then(function(cacheNames) {
          return Promise.all(
            cacheNames.map(function(cacheName) {
              if (cacheName.startsWith('pages-cache-') && staticCacheName !== cacheName) {
                return caches.delete(cacheName);
              }
            })
          );
        })
      );
    });

// when the browser fetches a url
self.addEventListener('fetch', function(event) {
    // either respond with the cached object or go ahead and fetch the actual url
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                // retrieve from cache
                return response;
            }
            // fetch as normal
            return fetch(event.request);
        })
    );
});

在页面 index.php 和 products.php 中，我还插入了（在头部）：

<link rel="manifest" href="manifest.json">
        <meta name="theme-color" content="#cc194b"/>
        <link rel="apple-touch-icon" href="img/152x152.png">
        <meta name="apple-mobile-web-app-capable" content="yes"> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="PWA">
        <meta name="application-name" content="PWA" />
        <meta name="msapplication-TileImage" content="img/144x144.png"> 
        <meta name="msapplication-TileColor" content="#cc194b">

在 script.js 中：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js').then(function(reg) {
        console.log('Successfully registered service worker', reg);
    }).catch(function(err) {
        console.warn('Error whilst registering service worker', err);
    });
}

显然它不起作用，因为如果我将项目放在带有 HTTPS 的子域中，我可以看到网页，但它不会下载 PWA。
如果我在 chrome 中转到“应用程序”，在清单中我有所有数据和一个字符串：

No matching service worker detected. You may need to realod the page, or check that the service worker for the current page also controls the start URL from the manifest.

服务人员返回“是多余的”和“未捕获（承诺）类型错误：请求失败”。

所以，现在，我的问题是：
- 如果我使用了 php 扩展，会不会有问题？我可以用 php 创建一个 pwa 吗？
- 程序是否正确？
- 文件清单和软件是否正确写入？- 错误可能在哪里？
谢谢

编辑：
第一个错误是我将 sw.js 包含在索引的头部，就像普通文件 javascript 一样。所以我在 script.js 中添加了代码来包含该文件。但现在错误是“ Uncaught (in promise) TypeError: Request failed ”

标签： phpprogressive-web-apps

php - PWA: Uncaught (in promise) TypeError: Request failed and no download with file php

问题描述

解决方案

推荐阅读