Pwa 在 Yii2 PHP 框架中的实现

Question

我需要在 PHP 中为 Yii 2 框架中的项目实现 PWA。我添加了manifest.json 文件，该文件在我签入devtools 时正在工作。我还添加了一个服务工作人员文件，该文件在加载浏览器时注册成功。但安装应用程序的弹出窗口不会在任何设备上触发。我被困住了，需要帮助。

sw.js

var staticCacheName = 'pwa-v' + new Date().getTime()

var filesToCache = [
        'css/bootstrap.css',
        'css/select2.min.css',
        'css/select2-bootstrap.css',
        'css/anno.css',
        'css/jquery.mThumbnailScroller.css',
        'css/jquery-ui.css',
        'css/bootstrap-theme.css',
        'css/fm.selectator.jquery.css',
        'css/lightgallery.min.css',
        'css/magnific-popup.css',
        'css/jquery.mCustomScrollbar.css',
        'css/bootstrap-datetimepicker.css',
        'css/croppie.css',
        'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css',
        'css/developer.css',
        'css/empwin.css?v=2.37',
    'js/bootstrap.js?v=0.01',
        'js/fm.selectator.jquery.js?v=0.01',
        'js/lightgallery-all.min.js?v=0.01',
        'js/jquery.magnific-popup.min.js?v=0.01',
        'js/jquery.mThumbnailScroller.js?v=0.01',
        'js/moment.js?v=0.01',
        'js/bootstrap-datetimepicker.min.js?v=0.01',
        'js/highlight.min.js?v=0.01',
        'js/jquery-ui.js?v=0.01',
        'js/bootstrap-transition.js?v=0.01',
        'js/jquery.geocomplete.min.js?v=0.01',
        'js/croppie.js?v=0.01',
        'js/webcam.js?v=0.01',
        'js/anchorme.min.js?v=0.01',
        'js/anno.js?v=0.01',
        'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',
        'js/jquery.ui.core.min.js?v=0.01',
        'js/jquery.ui.timepicker.js?v=0.01',
        'js/jquery.pinBox.min.js?v=0.01',
        'js/propeller.min.js?v=0.01',
        'js/select2.full.js?v=0.01',
        'js/video.js?v=0.01',
        'js/jquery.mCustomScrollbar.concat.min.js?v=0.01',
        'js/custom.js?v=3.49',
        'js/custom1.js?v=0.02',
        'js/blur.js?v=0.01',
        'js/exif.js?v=0.02',
        'js/browser-deeplink.min.js',



]

// Cache on install
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});

// Clear cache on activate
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith("pwa-")))
                    .filter(cacheName => (cacheName !== staticCacheName))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
});

//Serve from Cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('offline');
            })
    )
});

manifest.json

{
    "theme_color": "#175795",
    "background_color": "#175795",
    "display": "standalone",
    "orientation": "portrait",
    "scope": "xxx",
    "start_url": "xxx",
    "name": "win",
    "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
  
}

Answer 1

回复有点晚了，但可能对其他人有帮助，你需要在每个网页的标题中定义链接标签，以告知页面应该加载哪个文件