silviolleite / laravel-pwa Goto Github PK
View Code? Open in Web Editor NEWLooks like an app, feels like an app, but IS NOT an app.
License: MIT License
Looks like an app, feels like an app, but IS NOT an app.
License: MIT License
idk how to cache the dynamic url in serviceworker. How to cache them? Thanks!
Hey,
I installed this package and followed all the steps carefully. When I tested it on my iOS device (iPhone 7 plus) the splash screen is not visible and a blank screen comes up. It works fine on android devices.
Hi,
Great plugin for laravel, but i've issue with absolute path for manifest.json file in vendor directory. This issue can't be done if we're using proxy_pass in nginx/webserver which is set to subdirectory. Example:
myproduction url:
domain1.com/sub1/sub2/sub3/
deployment server:
domain2.com/public/manifest.json
The problem is, domain1 trying to access like this domain1.com/manifest.json
how can i change or create dynamic path for access file manifest.json in this case instead of change on vendor directory?
*sorry for my poor english
Do we need to create a manifest.json file ourselves? It's not being detected by lighthouse too.
I thought the point of this was that the config/laravelpwa.php file would sort out the manifest.json file automatically.
Is possible use this package with laravel and vuejs?
I try use that in my vue/laravel project but dont work
Hi,
First, thanks to your package !
Did you considered to add splash screen meta for iOS ? https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210
Quite simple to implement and great benefits !
Hello i have the error:
Laravel PWA: ServiceWorker registration successful with scope: https://divuar.com.ua/
serviceworker.js:1 Uncaught (in promise) TypeError: Request failed
var staticCacheName = "pwa-v" + new Date().getTime();
var filesToCache = [
'/offline',
'/css/app.css',
'/js/app.js',
'/images/icons/icon-72x72.png',
'/images/icons/icon-96x96.png',
'/images/icons/icon-128x128.png',
'/images/icons/icon-144x144.png',
'/images/icons/icon-152x152.png',
'/images/icons/icon-192x192.png',
'/images/icons/icon-384x384.png',
'/images/icons/icon-512x512.png',
];
Please Explain me what the problem.
You can check site url https://divuar.com.ua
.mp4 videos are no longer played in Safari Mac Os and iOS after installing the PWA. After research, I found a solution.
I'm not a pro in SW, I can't have a crooked look at this JS but it works fine.
The origin is : https://stackoverflow.com/questions/52087208/pwa-cached-video-will-not-play-in-mobile-safari-11-4
Here is the adapted code for laravel-pwa (CURRENT_CACHES change to staticCacheName )
Only fetch part is changed in the original script.
///////////////////////////////
self.addEventListener('fetch', function(event) {
headersLog = [];
for (var pair of event.request.headers.entries()) {
console.log(pair[0]+ ': '+ pair[1]);
headersLog.push(pair[0]+ ': '+ pair[1])
}
console.log('Handling fetch event for', event.request.url, JSON.stringify(headersLog));
if (event.request.headers.get('range')) {
console.log('Range request for', event.request.url);
var rangeHeader=event.request.headers.get('range');
var rangeMatch =rangeHeader.match(/^bytes\=(\d+)\-(\d+)?/)
var pos =Number(rangeMatch[1]);
var pos2=rangeMatch[2];
if (pos2) { pos2=Number(pos2); }
console.log('Range request for '+ event.request.url,'Range: '+rangeHeader, "Parsed as: "+pos+"-"+pos2);
event.respondWith(
caches.open(staticCacheName.prefetch)
.then(function(cache) {
return cache.match(event.request.url);
}).then(function(res) {
if (!res) {
console.log("Not found in cache - doing fetch")
return fetch(event.request)
.then(res => {
console.log("Fetch done - returning response ",res)
return res.arrayBuffer();
});
}
console.log("FOUND in cache - doing fetch")
return res.arrayBuffer();
}).then(function(ab) {
console.log("Response procssing")
let responseHeaders= {
status: 206,
statusText: 'Partial Content',
headers: [
['Content-Type', 'video/mp4'],
['Content-Range', 'bytes ' + pos + '-' +
(pos2||(ab.byteLength - 1)) + '/' + ab.byteLength]]
};
console.log("Response: ",JSON.stringify(responseHeaders))
var abSliced={};
if (pos2>0){
abSliced=ab.slice(pos,pos2+1);
}else{
abSliced=ab.slice(pos);
}
console.log("Response length: ",abSliced.byteLength)
return new Response(
abSliced,responseHeaders
);
}));
} else {
console.log('Non-range request for', event.request.url);
event.respondWith(
// caches.match() will look for a cache entry in all of the caches available to the service worker.
// It's an alternative to first opening a specific named cache and then matching on that.
caches.match(event.request).then(function(response) {
if (response) {
console.log('Found response in cache:', response);
return response;
}
console.log('No response found in cache. About to fetch from network...');
// event.request will always have the proper mode set ('cors, 'no-cors', etc.) so we don't
// have to hardcode 'no-cors' like we do when fetch()ing in the install handler.
return fetch(event.request).then(function(response) {
console.log('Response from network is:', response);
return response;
}).catch(function(error) {
// This catch() will handle exceptions thrown from the fetch() operation.
// Note that a HTTP error response (e.g. 404) will NOT trigger an exception.
// It will return a normal response object that has the appropriate error code set.
console.error('Fetching failed:', error);
throw error;
});
})
);
}
});
Will the package support Laravel 8?
I changed some images but the PWA keeps showing the old ones. How do I force the client to redownload all resources?
For a company we I work for, I tried to deploy this project and I get this error in the console (url redacted):
Laravel PWA: ServiceWorker registration failed: TypeError: "ServiceWorker script at https://<url>/serviceworker.js for scope https://<url>/ encountered an error during installation."
How can I fully remove this package? I ran into problems where somewhat older browsers were showing a warning about performance issues probably regarding the service worker in the background.
I remove the composer package and any files I could find, but when I login it directs me to /serviceworker.js and I cannot seem to remove that.
php artisan vendor:publish --provider="LaravelPWA\Providers\LaravelPWAServiceProvider"
Symfony\Component\ErrorHandler\Error\FatalError
Declaration of Carbon\Translator::setLocale($locale) must be compatible with Symfony\Contracts\Translation\LocaleAwareInterface::setLocale(string $locale)
I used this package and it is working great. Thanks for the support.
As I have some admin panel so I want that all the pages related to admin panel including login page being accessed only if the network is connected. These pages do not even cached via ServiceWorker and hence can't be accessed in offline mode.
Any suggestion or code. Thanks all.
Use the "Add to homescreen" link on the Application Tab to verify you can add the app successfully.
I don't see this link on Application Tab, do you have a picture.
Hello
@laravelPWA the blade directive no run ....
we can do another method to implement ?
Deprecation Notice: Class LaravelPWA\Database\Seeders\LaravelPWADatabaseSeeder located in ./vendor/silviolleite/laravelpwa/database/seeders/LaravelPWADatabaseSeeder.php does not comply with psr-4 autoloading standard.
cuando se compilan archivos diferentes a los clasicos llamados app.js y app.css generan problemas al cargar en el servidor demora en hacer cambios y genera error en el serviceworker.js
Hello i try to change image of popup to work dynamic but it not working ,
Storage::url(setting('site.favicon_logo'))
when I include new parameters in the laravelpwa.php file, these are not reflected in the manifest.json file generated
In the console, I see this error : Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed
In the serviceworker.js, I have
var filesToCache = [
'/offline',
'/css/app.css',
'/js/app.js',
'/images/icons/icon-72x72.png',
'/images/icons/icon-96x96.png',
'/images/icons/icon-128x128.png',
'/images/icons/icon-144x144.png',
'/images/icons/icon-152x152.png',
'/images/icons/icon-192x192.png',
'/images/icons/icon-384x384.png',
'/images/icons/icon-512x512.png',
];
However, if I remove '/offline', I dont see this error.
I have added this route
Route::get('offline', function () { return view('vendor/laravelpwa/offline'); });
in the routes file.
Can someone guide me why this error is happening ?
The page cache doesn't get updated when using default config.
My laravel app has cache-control headers defined but i guess the serviceworker takes precedence? I'm logging the staticCacheName
variable and it can confirm it is updated correctly and outputs pwa-v{{ timestamp of now() }}
. But still, it serves the cached version of the app weeks ago.
Any ideas @silviolleite ?
Actually, the serviceworker seems to give an error Uncaught (in promise) TypeError: Request failed
the filesToCache only include images/icons.
I noticed that https://github.com/silviolleite/laravel-pwa/blob/master/Http/Controllers/LaravelPWAController.php does not add Cache-Control:
and Expires:
headers to the response for manifest.json
. It seems like this causes Chrome to re-download manifest.json
with every navigation.
Would it be possible for the route registrar to add the corresponding caching middleware with a configurable delay, e.g. one hour?
Cache do not save. My chrome dev tab under application/cache tab there is no cache save its empty.
How do i solve this cache issue.
Thank you.
Hi All,
I have a 403 error in my manifest.json. anyone can help me to solve this?
When i run http://localhost/myapp/public ,it bring me error "Laravel PWA: ServiceWorker registration failed"
1 icon https://127.0.0.1:8000/images/icons/icon-72x72.png does no specify its size in the manifest
2 Shortcut #1 should include a 96x96 pixel icon
3 Icon src is not set
4 Shortcut #2 should include a 96x96 pixel icon
Installability
No matching service worker detected. you may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start.
start_url does not respond with a 200 when offlineTimed out waiting for start_url (http://localhost:8000/) to respond.
Does not register a service worker that controls page and start_url
Manifest doesn't have a maskable icon
Laravel PWA: ServiceWorker registration successful with scope: http://localhost:8000/
serviceworker.js:1 Uncaught (in promise) TypeError: Request failed
not working on server centos7 apache
I have api for orders. I want to get json data from there and cache in sw. How can I do so.
Everything in the title. The @laravelPWA in the code isn't displaying the header.
Instead I used to temporary fix the problem
@include('laravelpwa::meta', [
'config' => (include('../config/laravelpwa.php'))["manifest"]
])
Did I missed something to make it works ?
Thanks for this package @silviolleite !
I know this is out of scope. But , is there any additional config to make installed PWA open from a external link?
On iOS13 when click http://www.mysite.com it opens on Safari, not installed PWA.
Manifest file is not generated. The route and blade directive is all ok, but when access the route, domain/manifest.json it gives me error 404.
I have heroku free host its http not https. And not working but local server it works.
In my android install option not showing but only shortcut show.
Does pwa works http domain ?
Why my android shortcut show not install ?
( Note : my android from shortcut i can use most things except service worker )
Thank you.
Illegal string offset 'path'
hello i need help after successfully installed the latest update
then i run @php artisan config:clear
when i open my url it shows this error
Illegal string offset 'path' (View: C:\xampp\htdocs\Churchaut\resources\views\layouts\index.blade.php) (View: C:\xampp\htdocs\Churchaut\resources\views\layouts\index.blade.php)
the project manisfect.json
'start_url' => asset(config('laravelpwa.manifest.start_url')),
'display' => config('laravelpwa.manifest.display'),
'theme_color' => config('laravelpwa.manifest.theme_color'),
'background_color' => config('laravelpwa.manifest.background_color'),
'orientation' => config('laravelpwa.manifest.orientation'),
'status_bar' => config('laravelpwa.manifest.status_bar'),
'splash' => config('laravelpwa.manifest.splash')
];
foreach (config('laravelpwa.manifest.icons') as $size => $file) {
$fileInfo = pathinfo($file['path']);
$basicManifest['icons'][] = [
'src' => $file['path'],
'type' => 'image/' . $fileInfo['extension'],
'sizes' => $size,
'purpose' => $file['purpose']
];
}
foreach (config('laravelpwa.manifest.custom') as $tag => $value) {
$basicManifest[$tag] = $value;
}
return $basicManifest;
}
}
need help guys!!!!
Hi there,
I have an issue with prompt to install the app.
Right now, when I login to the app there is no popup to add to the home screen. I can do it by opening menu and clicking Add to home in Chrome.
Is there a way to automatically show the prompt when user performs the login?
Thanks.
I created an app with and used laravel-pwa which works well, but unfortunately when i decide to test embeded video, it plays well but the audio was muted. The youtude video was loaded using iframe embed.
=> I test the video on youtube/chome on my phone, audio came out
=> I tested it on previously app created with Andriod WebView, audio came out
=> the volume control did not fix the audio
Is there anything missing? kindly help
Please I'm trying to use this package on my laravel 5 site. but Blade doesn't parse the @laravelPWA directive, instead it appears on the front-end between text tags like this, <text>@laravelPWA</text>
The directive is inside the head
When a user signs in with Laravel Auth, I get the iOS webview after Auth is successful. If I tap done, it takes me to the login screen then throws a 419, but once I close the PWA and reopen it, it works as expected (the users Auth state remains signed in).
Do I have to add anything to stop this from happen?
hello...
i'have installed on laravel 6.
but i get some error..
vendor/silviolleite/laravelpwa/Services/ManifestService.php:27
url : https://flareapp.io/share/dmknY653#F56
can you fix this ?
hi i want to know if there is any possible way to show up and force users to use pwa in mobile because now though i meet all criteria but popup is not showing up and if possible i want to force my users to use pwa with a custom message . thanks in advance
When opening the PWA from mobile after adding it on homescreen through Chrome, there is a screen before the app has been loaded, and it loads the logo I put in the laravelpwa.php and on the bottom it says "Laravel". How can I remove that Laravel writing?
I put the screenshot as an attachment (I blurred out the logo and the top part of the phone), as you can see there is a "Laravel" writing on the bottom of the screen.
I am getting this error when I include the meta.blade.php.
Or Am I including it in a wrong way? This is how I am doing it:
@include('modules.laravelpwa.meta') in my app.blade.php file. I get this error though
Undefined variable: config (View: C:\xampp\htdocs\queendom\resources\views\modules\laravelpwa\meta.blade.php) (View: C:\xampp\htdocs\queendom\resources\views\modules\laravelpwa\meta.blade.php) (View: C:\xampp\htdocs\queendom\resources\views\modules\laravelpwa\meta.blade.php)
Hi !
Thanks for your work, its great !
I have a question, maybe do you know wky my app still displaying the default offline view?
I have already changed file on \resources\views\modules\laravelpwa (also on vendor folder), cleared cache from web server, reinstalled the movil app etc, and still see the same view.
Any clue would be appreciated
Hi Thanks for this by the way, ive got a problem when adding to homescreen from mobile because it wont install and just create a shortcut that says the site cant be reached when you open the app in offline.
The Laravel method TestResponse::assertSeeText()
fails when turning on laravel-pwa.
It is because this method uses strip_tags()
to remove HTML tags before checking if a given text is found in the page.
The bug is simply caused by a this JavaScript comment in views/modules/laravelpwa/meta.blade.php:
// <--- THIS BIT IS REQUIRED
Strangely, <--
apparently confuses strip_tags()
. Like this:
$str = "aaa bbb <-- ccc ddd";
echo strip_tags( $str ); // Displays "aaa bbb " (tested in a PHP 7.2.4 sandbox)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.