拒绝在Ionic PWA中执行脚本 [英] Refused to execute script in Ionic PWA
本文介绍了拒绝在Ionic PWA中执行脚本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个Ionic渐进式网络应用程序。我收到如下错误：
I'm building an Ionic progressive web app. I am getting the errors as below:
(index):1 Refused to apply style from
'http://localhost:8100/build/main.css' because its MIME type
('text/html') is not a supported stylesheet MIME type, and strict MIME
checking is enabled. vendor.js:1 Failed to load resource: the server
responded with a status of 404 (Not Found) main.js:1 Failed to load
resource: the server responded with a status of 404 (Not Found)
(index):31 service worker installed (index):1 Refused to apply style
from 'http://localhost:8100/build/main.css' because its MIME type
('text/html') is not a supported stylesheet MIME type, and strict MIME
checking is enabled. vendor.js:1 Failed to load resource: the server
responded with a status of 404 (Not Found) (index):1 Refused to
execute script from 'http://localhost:8100/build/vendor.js' because
its MIME type ('text/html') is not executable, and strict MIME type
checking is enabled. main.js:1 Failed to load resource: the server
responded with a status of 404 (Not Found) (index):1 Refused to
execute script from 'http://localhost:8100/build/main.js' because its
MIME type ('text/html') is not executable, and strict MIME type
checking is enabled. (index):1 Refused to apply style from
'http://localhost:8100/build/main.css' because its MIME type
('text/html') is not a supported stylesheet MIME type, and strict MIME
checking is enabled.
我的index.html为：
I have my index.html as:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Beauty of soul</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
我的service-worker.js是：
My service-worker.js is:
/**
* Check out https://googlechromelabs.github.io/sw-toolbox/ for
* more info on how to use sw-toolbox to custom configure your service worker.
*/
'use strict';
importScripts('./build/sw-toolbox.js');'
importScripts('https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging.js');
importScripts('https://www.gstatic.com/firebasejs/4.9.0/firebase.js');
firebase.initializeApp({
// get this from Firebase console, Cloud messaging section
'messagingSenderId': ''
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
console.log('Received background message ', payload);
// here you can override some options describing what's in the message;
// however, the actual content will come from the Webtask
const notificationOptions = {
icon: '/assets/imgs/logo.png'
};
return self.registration.showNotification(notificationTitle, notificationOptions);
});
self.toolbox.options.cache = {
name: 'ionic-cache'
};
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.fastest);
// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;
我正在整合Firebase推送通知，因此我的firebase-messaging.ts是：
I am integrating the Firebase push notifications so my firebase-messaging.ts is:
import { Injectable } from "@angular/core";
import { FirebaseApp } from 'angularfire2';
// I am importing simple ionic storage (local one), in prod this should be remote storage of some sort.
import { Storage } from '@ionic/storage';
@Injectable()
export class FirebaseMessagingProvider {
private messaging;
private unsubscribeOnTokenRefresh = () => {};
constructor(
private storage: Storage,
private app: FirebaseApp
) {
this.messaging = app.messaging();
navigator.serviceWorker.register('service-worker.js').then((registration) => {
console.log("inside navigation-----");
this.messaging.useServiceWorker(registration);
//this.disableNotifications()
this.enableNotifications();
});
}
public enableNotifications() {
console.log('Requesting permission...');
return this.messaging.requestPermission().then(() => {
console.log('Permission granted');
// token might change - we need to listen for changes to it and update it
this.setupOnTokenRefresh();
return this.updateToken();
});
}
public disableNotifications() {
this.unsubscribeOnTokenRefresh();
this.unsubscribeOnTokenRefresh = () => {};
return this.storage.set('fcmToken','').then();
}
private updateToken() {
return this.messaging.getToken().then((currentToken) => {
console.log("heyyyyyy");
if (currentToken) {
// we've got the token from Firebase, now let's store it in the database
console.log(currentToken)
return this.storage.set('fcmToken', currentToken);
} else {
console.log('No Instance ID token available. Request permission to generate one.');
}
});
}
private setupOnTokenRefresh(): void {
this.unsubscribeOnTokenRefresh = this.messaging.onTokenRefresh(() => {
console.log("Token refreshed");
this.storage.set('fcmToken','').then(() => { this.updateToken(); });
});
}
}
为什么我收到这些错误？有什么想法？
Why I'm getting these errors ? Any idea?
推荐答案
您的服务人员正在尝试访问不存在的文件。确保/build/main.css确实存在。
Your service worker is trying to reach a file that does not exists. Make sure /build/main.css does exists.
这篇关于拒绝在Ionic PWA中执行脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
