Question

我想做我的第一个渐进式网络应用，但我有点困惑。

项目的结构为：
-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.

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

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

编辑：
第一个错误是我像普通文件javascript一样在索引的开头包含了sw.js。因此，我在script.js中添加了代码以包含该文件。但是现在错误是“ 未捕获（承诺）TypeError：请求失败”

Answer 1

PWA的整个思想是将您的网页所需的资源存储在本地。一个php文件应使用服务器端语言PHP来执行。

如果您离线运行，则无法运行php文件。请改用html文件。

Answer 2

"Uncaught (in promise) TypeError: Request failed"

始终毫无例外地指向缓存中的拼写错误（在服务工作者的缓存功能中）或文件丢失（在主机上）。

我使用PHP文件。它们被写在服务器上，并且由服务工作者完整地缓存在浏览器的内存中，因此可以使用PHP。有趣的部分是尝试离线使用API进行任何调整。：）

只要.htaccess文件支持，您就可以使用PHP来编写清单或服务工作者。

对于样式表，我将其放在文件顶部：

<?php header("Content-type: text/css; charset: UTF-8"); ?>

我的.htaccess文件如下所示（在其自己的样式表目录中）：

<FilesMatch "^.*?style.*?$">
SetHandler php5-script
</FilesMatch>

您可能想要一些地址来解决“ js”文件或您使用的任何内容。

PWA：未捕获（承诺）TypeError：请求失败，并且没有使用文件php下载

2 个答案: